I am creating a wordpress theme from scratch with boostrap for the first time and I am basically stuck with not being able to customize the bootstrap navigation bar. I am using bootstrap walker.
I am sure my class selectors are not proper. I have tried many variations of class selectors like:
header .navbar-nav {
background-color: red;
}
and .nav .navbar etc.
in the css file.
I have done html sites before but not for awhile. I am admittedly out of practice. I tried the inspect feature of google but still not sure how to get the right selector to change the styling via CSS.
Here is my header (where I want the navigation) and the main.css file as well - I’m sorry if this seems dumb I have never worked with this setup before.
<!-- This is the header of the site to be referenced by other areas of code -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<!-- inserts the default wordpress header or whatever it is set to -->
<?php wp_head(); ?>
</head>
<body>
<header>
<div class="container">
<?php // Declares menus if present
wp_nav_menu([
'theme_location' =>
'top-menu', 'menu_class' => 'top-bar', ]);
?>
</div>
</header>
<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'your-theme-slug' ); ?>">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<?php
wp_nav_menu( array(
'theme_location' => 'top-menu',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
) );
?>
</div>
</nav>
</body>
</html>
Next is my CSS so far
/* Main theme custom CSS file and code */
header {
background-color:red;
width:100%;
height: 100px;
}
header .nav .navbar-nav {
background-color: red;
}
.page-wrap {
padding:2rem 0;
background-color:orange;
}
header .top-bar {
list-style-type:none;
margin:0;
padding:0;
display: flex;
}
header .top-bar li a {
padding:.25rem 1rem;
color:orange;
}
header .container {
display:flex;
justify-content:center;
align-items:center;
height:100%;
}
header .top-bar li {
position:relative;
}
header .top-bar li:first-child a {
padding-left:0;
}
header .top-bar li:last-child a {
padding-right:0;
}
header .top-bar li .sub-menu {
display:none;
position:absolute;
z-index:999;
top:100%;
left:0;
background:orange;
box-shadow:1px 1px 10px rgba(0,0,0,0.1);
margin:0;
padding:0;
list-style-type:none;
width:200px;
border-radius: .5rem;
}
header .top-bar li .sub-menu a:hover {
color:black;
}
header .top-bar li .sub-menu a {
color:red;
padding: .25rem;
text-align:center;
display:block;
text-decoration:none;
}
header .top-bar > .menu-item-has-children:hover > .sub-menu {
display:block;
}
header .top-bar .menu-item-has-children .sub-menu > .menu-item-has-children:hover .sub-menu {
display:block;
}
header .top-bar .sub-menu li .sub-menu {
top:0;
left:100%;
}
header .container .navbar {
color:red;
}
/*
header .navbar-nav {
background-color: red;
}
*/
Thanks in advance!