After some tweaking with the CSS code provided below, I successfully centered the navbar-nav content within my navbar. Below is the CSS code used:
/* @media (min-width:768px) { */ Note this comment
.navbar > .container {
text-align: center;
}
.navbar-header,.navbar-brand,.navbar .navbar-nav,.navbar .navbar-nav > li {
float: none;
display: inline-block;
}
.collapse.navbar-collapse {
float: none;
display: inline-block!important;
width: auto;
clear: none;
}
/* } */ Note this comment
Here's the HTML structure utilized:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link1</a>
</li>
<li><a href="#">Link2</a>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span>Link3 (Dropdown)</span><b class = "caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Sublink 1</a>
</li>
<li><a href="#">Sublink 2</a>
</li>
</ul>
</li>
<li><a href="#">Link 4</a>
</li>
</ul>
</div>
</div>
</div>
First issue:
When the navbar is collapsed, the 3-icon-bar button remains active and there is no way to hide the items in the navbar.
Second issue (linked to the first):
Clicking the button toggles between two states - one causing the Link-3 dropdown menu to overlap Link 4, creating an additional scroll bar for navigation which is undesired, and the other state where the dropdown menu covers the bottom of the navbar. The objective is to have everything hidden or ensure that hovering over Link 3 does not result in a scroll bar.
Third problem:
Upon clicking Link 3, it shifts out of alignment with Links 1 and 2 instead of remaining stable.
Final concern:
The footer navbar contents are also centered due to the commented-out section in the CSS. An explanation is required regarding this issue.
Note: These problems stem from commenting out '@media (min-width:768px)' in the CSS. Although uncommenting this part may seem like a solution, it distorts the formatting on mobile view and retains the scroll bar for dropdowns. There might be a simpler resolution by retaining the commented-out section and adding new CSS rules for collapsed navbars, but implementation has proven challenging. Your assistance is greatly appreciated!
I understand this is complex, so any help you can provide will be valuable. Feel free to request additional code for better comprehension of the situation.
Framework used: Bootstrap 3.2.0.