Good evening everyone,
I am currently working on a website project for a client who has provided me with specific requirements for the Navbar design. While it seemed straightforward at first, I have spent several hours trying to perfect the layout. I am using Visual Studio 2019 Community for development, Razor for web pages, and Bootstrap 4 for the base CSS. The design is focused on mobile-first approach and the layout is mostly correct, but I need some assistance. I have two questions in total, and I can create another thread for the second question if needed.
My issue lies with a basic out-of-the-box Bootstrap NavBar where one of the elements is causing a problem.
<nav class="navbar navbar-expand-sm navbar-dark">
<a class="navbar-brand" href="/"><img src="~/Images/Logo.png" /></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 p-3" id="navbarSupportedContent">
<div class="row">
<div class="col-6 border-right">
<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="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Car Sales</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
<div class="col-6">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">MOT</a>
</li>
<li class="nav-item pb-3">
<a class="nav-link" href="#">Services</a>
</li>
<partial name="_LoginPartial" />
</ul>
</div>
</div>
</div>
<div class="mx-auto">
<a class="nav-link" href="#">Book an Appointment</a>
</div>
</nav>
I have made some custom CSS modifications to override Bootstrap styles.
nav {
padding-bottom: 15px!important;
}
.navbar {
...
}
.navbar-brand img {
max-height: 105px;
}
The desired mobile layout can be viewed here. However, when the screen size exceeds 456px, the "Book an Appointment" link shifts to the right of the hamburger button. My question is, how can I keep it aligned under the Logo and hamburger button until reaching 576px where the layout changes?
If the device transitions to tablet or desktop view, the Navbar should adapt accordingly. While I have a solution in mind, I am open to suggestions for a more efficient approach. The desktop layout can be seen here, along with the corresponding code.
<nav class="navbar navbar-expand-sm navbar-dark">
...
My second question is regarding the best method to make the Navbar responsive and display two distinct layouts based on the device screen size. I plan to hide the desktop code on mobile using .d-sm-none .d-md-block classes and reveal it for desktop users. Any suggestions or questions are welcome!
EDIT: Complete Nav Code with Update from Nisharg
<nav class="navbar navbar-expand-sm navbar-dark">
...