Geek Answers Handbook

How can I center a brand image with other elements in Bootstrap 3.2 navbar?

First of all, this is what I am trying to accomplish:

Example http://www.n2media.com/img/header-example.jpg

I hope this will look when on the big screen, but then return to the standard Bootstrap navigation bars when on a mobile device:

Example2 http://www.n2media.com/img/header-example-mobile.jpg

I was able to enlarge the logo following this example.

I also found many ways to keep simple links focused. I used this:

.navbar.center .navbar-inner {
    text-align: center;
}

.navbar.center .navbar-inner .nav {
    display:inline-block;
    float: none;
}

However, I was not able to get the element navbar-brandin the center between all the simple links. Even if I do, I'm not sure how I can exclude it from crumbling elements for small screens.

+4
2

Bootstrap Responsive Utilities , / , this.

, Bootstrap Navst, , div, display: inline-block. div, , , , .

CSS

#nav-wrapper {
    float: left;
    position: relative;
    left: 50%;
}
.navbar-nav {
    position: relative;
    left: -50%;
}
@media (max-width: 769px){
    .navbar-inverse .navbar-brand img {
        height: 100%;
    }
    .navbar-inverse .navbar-brand {
        padding: 0;
    }
    #nav-wrapper {
        float: none;
        position: static;
    }
   .navbar-nav {
       position: static;
   }
}
+1

, , "" Bootstrap, <li> , .hidden-xs .visible-xs, . , Bootply , DEMO, ( )

<div class="navbar-header">
  <a class="navbar-brand visible-xs" href="#"><img src="logo.jpg" /></a>
  <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </a>
</div>
<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li class="hidden-xs"><a href="#"><img src="logo.jpg" /></a></li>
  </ul>
+1

More articles:


All Articles