Having problems with CSS class selectors and wordpress/bootstrap navigation

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!

My whole custom main.css does not seem to be working. I may have done something wrong with the menu. It still has the original wordpress nav in addition to the bootstrap nav.

Hey @AdamFF!

I haven’t worked with bootstrap nav walker before but I was curious so I did some digging online. I found two articles that hopefully will be helpful to you.

In comparing your code with these articles, it looks like these lines of code are missing.

// From the Yogi hosting website
//Open your functions.php file and register Nav Walker class by adding the below line:
require_once('wp_bootstrap_navwalker.php');

/*Navigation Menus*/
function register_my_menu() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' );
/*End*/

So hopefully these articles will help you out. I wish I could have been more helpful but hopefully someone else in the forum that has worked with nav walker can guide you a little better.

Good luck!