Whilst it seems like a straightforward task, I have yet to discover a solution or encounter anyone facing the same issue. My objective is to place the brand on a separate line above the main navigation within the navbar structure. Despite my attempts to adjust clears for the navbar-brand and navbar-nav classes, repositioning the brand within the navbar, deleting it entirely and placing it outside the navbar in the HTML, or even substituting it with a simple h1 element (assuming the class is intended solely for use within the navbar)...
Every adjustment I make either has no visible impact or disrupts the alignment in some way. I've unintentionally altered the line-height of the navbar, causing the backgrounds of the nav links to not align properly, shifted the content within the navbar from side to side, among other things.
This is what I currently have:
Brand Menu Item | Menu Item | Menu Item | Menu Item | Menu Item
This is what I desire:
Brand
Menu Item | Menu Item | Menu Item | Menu Item | Menu Item
At present, my code closely resembles the initial setup:
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Title</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="top-nav-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Regarding CSS modifications, I have made minimal changes (adjusting the display property yielded no visible results):
.navbar-brand {
font-size: 40px;
display: block;
}
You may find this pen more enlightening.
It feels as though I am overlooking something glaringly obvious, but most related posts I've come across deal with the opposite issue - too many links breaking onto multiple lines instead of staying on one. Any assistance would be greatly appreciated. Thank you!