Below is the code snippet for a fixed navbar example from Bootstrap 4.1, but I'm using Bootstrap 4.5 and JQuery 3.5.1 which were installed via NuGet:
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<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">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
I am trying to style the navbar items differently when collapsed (vertical display) compared to when expanded horizontally. Additionally, there seems to be an issue with resizing the navbar while keeping the styling consistent.
When toggling between collapsed and expanded views of the navbar, the padding and margins set for various elements are affecting the smoothness of the transition animations.
If you have any insights or suggestions on how to improve this behavior, I would greatly appreciate your input.
Update:
Apologies for missing some key details earlier. I followed instructions from a tutorial to create a shrinking effect on scroll for my navbar, but noticed that the logo transition was not as smooth as expected. To fix this, I added the following CSS transitions:
.navbar-brand { transition: all, 0.5s ease; }
.shrink .navbar-brand { transition: all, 0.5s ease; }
.navbar-brand img { transition: all, 0.5s ease; }
.shrink .navbar-brand img { transition: all, 0.5s ease; }
I also implemented a SASS Mixin to handle smoother transitions across different browsers, similar to the approach outlined in this article.
Your suggestion regarding media queries was spot on. However, the initial implementation on the navbar-brand element wasn't ideal, so I made some adjustments based on your recommendation to achieve the desired results:
@media screen and (max-width: 991.88px) {
.navbar-nav .nav-link {
padding-left: 15px
}
.navbar-nav .nav-item {
border-bottom: 1px solid #555;
}
.shrink .navbar-nav {
margin-top: 10px;
}
.shrink .navbar-nav .nav-link {
margin: 8px 0;
padding-bottom: 11px;
}
Thank you for your assistance and patience. Once allowed by the platform, I will mark your response as the solution. Your help has been invaluable!