I have been struggling to ensure that my navbar items are spaced responsively to the end, or at least close to it. I've been using media queries and padding adjustments to achieve this, but no matter how much I increase the padding or adjust the sizes, some of my navbar buttons still drop down to the next line, which is not what I want.
Below is the code for my navbar along with the related CSS. The website I'm working on can be found at . I've been trying to fix this issue from all angles but haven't had any luck yet. Any assistance would be greatly appreciated.
<nav class="navbar transparent navbar-static-top" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><a href="#about">ABOUT</a></li>
<li><a href="#contact">CONTACT</a></li>
<li><a href="#services">SERVICES</a></li>
</ul>
</div>
</nav>
CSS:
@media only screen and (min-width: 3200px) {
.navbar-nav > li {
padding: 3.5%;
}
}
...other media queries...
@media only screen and (max-width: 1354px) {
.navbar-nav > li {
padding: 9px;
}
}
Further HTML and CSS details related to the Bootstrap nav spacing issue can be accessed by expanding the hidden snippet above.