"Responsive Navbar brand centered"
Bootstrap 3.2.0 Snippet by maridlcrmn

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="navbar-brand navbar-brand-centered">Brand</div> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-brand-centered"> <ul class="nav navbar-nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
.navbar-brand-centered { position: absolute; left: 50%; display: block; width: 160px; text-align: center; background-color: transparent; } .navbar>.container .navbar-brand-centered, .navbar>.container-fluid .navbar-brand-centered { margin-left: -80px; }

Related: See More

Light Bootstrap Dashboard Pro Angular
Bootstrap 4 navbar with centered logo
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Bootstrap 4 Navbar with Icon Top

Questions / Comments:

Good work.
My requirement is bit different.
Please provide your solution
1) left side its LOGO (not collapsible)
2) centre its UserName (not collapsible)
3) right side blah blah... etc links (collapsible)
Above is my requirement.

And also I tried below code Its overlapping center text "Brand". Do we can make it responsive?

<nav class="navbar navbar-default" role="navigation">
<div class="container">

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
Toggle navigation



</button>
<div class="navbar-brand navbar-brand-centered">Brand</div>
</div>

<div class="collapse navbar-collapse" id="navbar-brand-centered">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li>Link</li>
<li>Link</li><li>Link</li><li>Link</li><li>Link</li><li>Link</li><li>Link</li><li>Link</li><li>Link</li><li>Link</li><li>Link</li>
</ul>
</div>
</div>
</nav>

Thnaks in advance

panug () - 7 years ago - Reply 0

I can't get this to work? Do I have to load different bootstrap theme css files or something? thanks

mike () - 9 years ago - Reply 0

What exactly is the problem? All you need for this snippet to work is get Bootstrap CSS from getbootstrap.com or bootstrapcdn.com and the CSS from this snippet.

maxsurguy () - 9 years ago - Reply 0

hi it seems whichever bootstrap template / theme i put this into the brand stays left. ?

currently using the basic "modern business" unstyled template.

ie this one : http://startbootstrap.com/t...

mike () - 9 years ago - Reply 0

Ok, so you put that theme's CSS, Bootstrap CSS and this snippet's CSS together and what do you see?

maxsurguy () - 9 years ago - Reply 0

ok so i've got the brand in the center now but now the slider is knocked out? completley disapears?

mike () - 9 years ago - Reply 0

Nice snippet ! Do you know how to change the code so that it has "cerulean" theme? The blue is lovely.

Jess Phorphun () - 9 years ago - Reply 0