Question

我在最新的wordpress和bootstrap上运行了一个网站navrcholu.cz。但是我的导航栏无法正确显示，特别是在平板电脑上。它应该总是像页面顶部的30px。在具有FF或Chrome的台式PC上看起来没问题。这是导航栏代码：

  <header class="container-fluid header-pic">
    <nav class="navbar navbar-default navbar-static-top">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar1">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
            <?php if((is_home()) or (is_page()) or (is_search())) : ?>
            <div class="navbar-brand">
                <h1 class="h1trans"><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1>
            </div>
            <?php else : ?>
            <div class="navbar-brand">
                <h2 class="h1trans"><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h2>
            </div>
            <?php endif; ?>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar1">
            <?php
                wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary',
                'depth'             => 2,
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker()));
            ?>
            <?php get_search_form(); ?>
        </div>
    </nav>
</header>

header-pic课程在这里：

 .header-pic {
 background-image: url("pics/img.jpg");
 background-attachment: fixed;
 background-position: top left;
 background-size: 100% 100%;
 background-repeat: no-repeat;
 height: 65%;
 margin-bottom: 15px;
 margin-top:-20px;
}

我使用了几个媒体查询，询问宽度并相应地提供更小或更大的标题图片。我没有覆盖bootstrap navbar本身的positon属性。

像这样：

@media screen and (min-width: 385px) and (max-width: 769px)  {
   .header-pic {
    background-image: url("pics/img50.jpg");
    background-position: top left;
    height: 65%;
    }}

我做错了什么？谢谢你的时间！

Answer 1

根据您的问题，我会修改CSS，如下所示：

nav
{
   position: fixed;
   top: 0px;
}

bootstrap导航栏未正确对齐

1 个答案: