css - 移动 View 中的wordpress导航栏

Question

我正在为我的 wordpress 网站使用 Bootstrap 主题。这是 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;
}

我的问题是在移动 View 中我无法更改导航背景。我怎样才能做到这一点？它保持透明是因为:

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

谢谢!

Answer 1

在 css 文件底部写一个以手机为目标的媒体查询，并设置背景色。

由于 bootstrap 使用移动设备优先的方法，将该颜色设置为默认颜色，然后对于较大的设备设置透明。