I am working on dividing my navbar into two equal parts. I want the right side to contain my menu and the left side to have my icon and search bar. When the search bar is clicked, it should extend to fill the rest of the half in the left part. I have managed to use a fixed navbar successfully, but I am struggling with aligning my menu to the right side.
This is how it currently looks: https://i.sstatic.net/6X9AO.png
As shown in the image, the menu is not completely aligned to the right. After trying the suggestions from Stack Overflow, using float: right did not work for me.
I am unsure of how to fix this issue.
Here is the code I am currently using:
<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<img src="images/some_logo.png" class="img-rounded" alt="some_logo" style="height: 40px; width: 80px">
<div class="px-2">
<form>
<input type="text" name="search" placeholder="Search ...">
</form>
</div>
</div>
<div class="navbar-collapse collapse w-100 order-4 order-md-0 dual-collapse2">
<ul class="navbar-nav">
<li class="nav-item-active">
<a class="nav-link" href="#/">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/product">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/career">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/contact">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="openNav()" style="width: 60px; font-size: 25px; margin-top: -7px">☰</a>
</li>
</ul>
</div>
</nav>
In the browser's Element tab, I tried adjusting the margin-right, but the values were negative, which doesn't seem like the correct approach.
I am relatively new to frontend development and finding the Bootstrap framework quite challenging. Any assistance or guidance would be greatly appreciated.