Question

我在wordpress网站上使用了引导主题。以下是header.php。

中的导航条形码

<?php
        // Collapsed navbar menu toggle
           global $xsbf_theme_options;
           $navbar = '<div class="navbar '.$xsbf_theme_options['navbar_classes'] . '">'
        .'<div class="container">'
        .'<div class="navbar-header">'
        .'<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">'
        .'<span class="icon-bar"></span>'
        .'<span class="icon-bar"></span>'
        .'<span class="icon-bar"></span>'
        .'</button>';

    // Site title (Bootstrap "brand") in navbar. Hidden by default. Customizer will
    // display it if user turns of the main site title and tagline.
    $navbar .= '<a class="navbar-brand" href="'
        .esc_url( home_url( '/' ) )
        .'" rel="home">'
        .get_bloginfo( 'name' )
        .'</a>';

    $navbar .= '</div><!-- navbar-header -->';

    // Display the desktop navbar
    $navbar .= wp_nav_menu( 
        array(  'theme_location' => 'primary',
        'container_class' => 'navbar-collapse collapse', //<nav> or <div> class
        'menu_class' => 'nav navbar-nav', //<ul> class
        'walker' => new wp_bootstrap_navwalker(),
        'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
        'echo'  => false
        ) 
    );
    echo apply_filters( 'xsbf_navbar', $navbar );
    ?>

    </div><!-- .container -->
    </div><!-- .navbar -->
    </nav><!-- #site-navigation -->

到目前为止一切顺利。我的导航孩子css：

    .navbar {
    margin-top: 20px;
    margin-bottom: 10px;
    background-color: #222;
    width: 70%;
    height: 40px;
    border-radius: 10px;
    font-family: 'PT Sans Narrow', sans-serif;
}

.navbar-nav >ul {
    margin: 0 auto;
}

.navbar-brand {
    display: none;
}

.navbar-default .navbar-brand {
    color: #978476;
}

.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
    color: #605F65;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: #605F65;
}

.navbar-default .navbar-nav > li > a {
    background-color: #E7E4E4;
    background-color: transparent;
}

我的问题是我在移动视图中无法更改导航背景。我怎样才能做到这一点？它因以下原因而保持透明：

.navbar-default .navbar-nav > li > a {
        background-color: #E7E4E4;
        background-color: transparent;
    }

谢谢！

Answer 1

编写一个媒体查询，将手机定位在css文件的底部并放置背景颜色。

由于bootstrap使用mobile first aproach，将该颜色设置为默认值，然后对于较大的设备放置透明。

Answer 2

这是我所指的媒体查询。

@media (max-width: 767px) {
    .navbar {
        background-color: #e7e4e4;
    }
}

确保在Bootstrap样式表之后调用自定义样式。

移动视图中的wordpress导航栏

2 个答案: