CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
vikingsfan19
vikingsfan19

Reputation: 531

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

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

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

I'm hoping to have this look when on a large screen but then fall back to the default Bootstrap navbar when on mobile:

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

I was able to get the logo enlarge by following this example.

I've also found plenty of ways to get the simple links to be centered. The one I was using was this:

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

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

However I haven't been able to get the navbar-brand element to center between all of the simple links. Even if I do, I'm not sure how I can exclude it from the collapsing elements for small screens.

Upvotes: 4

Views: 1199

Answers (2)

The Spirit of Gordon Bombay
The Spirit of Gordon Bombay

Reputation: 317

If you're happy to use Bootstrap's Responsive Utilities and just stick the logo in two places, you could show/hide the logo depending on screen size like this.

In order to horizontally center Bootstrap's nav list items, which are floated by default, you could either wrap the entire list in a relatively positioned div, or remove the floats and apply display: inline-block. In the example I've given, I've used the relatively positioned div and then cleared it at the same media breakpoint as when the mobile menu appears because I think it's a bit simpler.

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;
   }
}

Upvotes: 1

Shawn Taylor
Shawn Taylor

Reputation: 15730

Simplest solution may be to duplicate your logo, once in Bootstrap's stock 'Brand' location, and once within the <li> elements of your navbar, then use .hidden-xs and .visible-xs classes to either show or hide it depending on device. Bootply seems to be down so can't show a working DEMO, but this should do it (or get close)

<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>

Upvotes: 1

Related Questions