Below is the HTML / CSS code for a Bootstrap navbar.
Take a look at the screenshot to see how I want it to appear. I want the navigation bar to align with the left side of #three and be the same width as it.
I'm trying to avoid putting it inside a col-md-4 as it causes issues with the mobile navigation in the WordPress theme I'm using.
Is there a way to align them by adding classes or styles to the existing elements?
<html>
<link rel="stylesheet" href="main.css" type="text/css" />
<style type="text/css">
#nav-main {
background-color: blue;
}
#nav {
background: red;
}
#three {
background-color: green;
}
#header-top div div {
padding-top: 30px;
font-weight: bold;
}
</style>
<body>
<div id="page" class="site">
<header id="masthead" class="site-header">
<div class="fixed-top bg-light">
<div id="header-top" class="container">
<div class="row">
<div class="col-md-4">
01
</div>
<div class="col-md-4">
02
</div>
<div id="three" class="col-md-4">
03
</div>
</div>
</div>
<nav id="nav-main" class="navbar navbar-expand-lg">
<div class="container">
<!-- Navbar Brand -->
<div>
<a class="navbar-brand md" href="#">
LOGO
</a>
</div>
<div id="nav" class="d-none d-md-block">
<ul id="bootscore-navbar" class="navbar-nav ">
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-49">
<a href="#" class="nav-link ">ONE</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-49">
<a href="#" class="nav-link ">TWO</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-49">
<a href="#" class="nav-link ">THREE</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-49">
<a href="#" class="nav-link ">FOUR</a>
</li>
</ul>
</div>
</div><!-- .container -->
</nav>
</div>
</header>
</div>
</body>
</html>
I've attempted using .ms-auto but it just aligns it to the right... I've also tried putting them in extra columns but it prevents the mobile navigation from functioning properly.