I`m currently utilizing a bootstrap theme for my wordpress website. Below is the navigation bar code extracted from 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 -->
Everything seems to be functioning well. Here's the CSS style for my navigation child elements:
.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;
}
My concern is that I'm unable to modify the navigation background when viewed on mobile devices. How can I achieve this alteration? The issue persists due to the following code snippet:
.navbar-default .navbar-nav > li > a {
background-color: #E7E4E4;
background-color: transparent;
}
Any suggestions would be greatly appreciated! Thank you!