Navbar brand centered
<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;
}
}
Congrats! Save my life!,how can I change the order from menu 1 (left), brand (center), menu 2 (right) to brand (left), menu 1 (center), menu 2 (right)?,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!,Can I use drop-down menus on the left/right (or both) sides?,Off course, i fixed it… you can look at this example.. http://bootsnipp.com/maridl…,weird…,Please provide more than just a single word.,Why?,can you have the brand name stays the same even it response to smaller screen?,Yeah, sure, i fixed it… you can look at this example.. http://bootsnipp.com/maridl…,Nice :),Thank u!,The author is maridlcrmn

Loading...