How to add some text between logo and menu items with bootstrap? - html

Question

I try a couple of ways but not very successful. Below is part of the code.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo.svg">Demo</a>
</div>
<div class="collapse navbar-collapse" id="my-navbar">
<ul class="nav navbar-nav navbar-right">
Basically, I have logo on the left side and a couple of menu items to the right. There is some space between logo and menu where I want to insert some text. The text should be aligned along the same horizontal line with logo and menu. So far, I haven't found a satisfactory way of doing it.

Answer 1

You didn't mention the location of some text on small screens. I assume you want the text to be on the top of #my-navbar.
My approach is to create another .navbar-collapse to contain the text, and change the navbar-toggler to target .navbar-collapse.
HTML Structure (Bootstrap 4.1)
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Demo</a>
<button class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<div class="navbar-text">
Navbar text
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
...
</ul>
</div>
</div>
</nav>
On small screens, this structure already align everything up perfectly because bootstrap sets flex-basis: 100%; on .navbar-collapse except you need to set display:flex; on .navbar-header so that the branding is on the left and the toggler is on the right:
.navbar-header {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
flex-grow: 1;
}
On large screens, since bootstrap sets justify-content:space-between; already on the .container-fluid, the .navbar-header, first .navbar-collapse that contains the text and the second .navbar-collapse that contains the menu are already in the correct position. The only thing you need to do is to align the text to center, and the menu to the right.
You can create your own css class and style that on your own. Or you might just use bootstrap utility class justify-content-center and justify-content-end:
<div class="collapse navbar-collapse justify-content-center">
<div class="navbar-text">
Navbar text
</div>
</div>
<div class="collapse navbar-collapse justify-content-end">
<ul class="navbar-nav">
<li class="nav-item active"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
...
</ul>
</div>
fiddle: https://jsfiddle.net/aq9Laaew/175839/