I am in the process of designing the navigation bar for my website that will work seamlessly on both desktop and mobile devices.
To view my progress so far, check out this JS Fiddle link
Here is the HTML code I have created:
<div class="container-fluid">
<nav class="navbar navbar-expand-sm navbar-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<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="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<div class="row no-gutters ml-auto">
<div class="col-3">
<button class="btn btn-outline-warning btn-sm mr-1" data-toggle='modal' data-target='#login'>
<i class="fas fa-sign-in-alt mr5"></i>
Login
</button>
</div>
<div class="col-6 ml-auto">
<form class="form-inline mr-1" action='/search' method='POST'>
<div class="input-group input-group-sm mx-auto">
<input type="text" class="form-control" name='search_string' placeholder="Search" value=''>
<div class="input-group-append">
<button class="btn btn-outline-warning" type="submit"><i class="fas fa-search mr5"></i></button>
</div>
</div>
</form>
</div>
<div class="col-3 text-right">
<div class="dropdown">
<button class="btn btn-outline-warning btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
I am encountering an issue where the right-aligned menu items within the row are being spaced apart due to the `col` class. I want them to be displayed next to each other with a `mr-1` spacing when in desktop mode, but nicely spaced out in columns when switching to mobile mode. Despite trying different flex-row configurations, I have not been successful in achieving the desired layout. Being new to Bootstrap 4, I would appreciate any guidance on the best approach to resolve this challenge.
Ultimately, I envision my menus looking similar to the following images for LG and XS screen sizes respectively: [LG Image](https://i.sstatic.net/MG56B.png) and [XS Screen Image](https://i.sstatic.net/eAEoH.png). I am having trouble aligning `Menu 1` completely to the right-hand side to match up with the `Dropdown` option.
In comparison to Bootstrap 3, I find Bootstrap 4 more challenging to master. If achieving the desired layout is possible using only rows and cols without depending on the navbar structure, I would welcome any suggestions or insights.