"Navbar brand centered"
Bootstrap 3.2.0 Snippet by maridlcrmn

<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><a href="#">Link</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
@media screen and (min-width:768px){ .navbar-brand-centered { position: absolute; left: 50%; display: block; width: 160px; text-align: center; background-color: #eee; } .navbar>.container .navbar-brand-centered, .navbar>.container-fluid .navbar-brand-centered { margin-left: -80px; } }

Related: See More


Questions / Comments:

Congrats! Save my life!

Bruno Granato () - 9 years ago - Reply 0


how can I change the order from menu 1 (left), brand (center), menu 2 (right) to brand (left), menu 1 (center), menu 2 (right)?

sebastijan () - 9 years ago - Reply 0


Hi! I've tried to put an image instead of "BRAND" text and unfortunately it appears uncentered... I've tried to change margins, display but nothing works really. WOuld you have any workaround? Thank you!

patefilo () - 9 years ago - Reply 0


Can I use drop-down menus on the left/right (or both) sides?

abi () - 10 years ago - Reply 0


Off course, i fixed it... you can look at this example.. http://bootsnipp.com/maridl...

Maria del Carmen () - 10 years ago - Reply 0


weird...

Leandro Ruel () - 10 years ago - Reply 0


Please provide more than just a single word.

angelxmoreno () - 9 years ago - Reply 0


Why?

Maria del Carmen () - 10 years ago - Reply 0


can you have the brand name stays the same even it response to smaller screen?

ralphie () - 10 years ago - Reply 0


Yeah, sure, i fixed it... you can look at this example.. http://bootsnipp.com/maridl...

Maria del Carmen () - 10 years ago - Reply 0


Nice :)

Rgbskills () - 10 years ago - Reply 0


Thank u!

Maria del Carmen () - 10 years ago - Reply 0