CODEWITHSUNDEEP
csstwitter-bootstrap
Nick
Nick

Reputation: 14283

Bootstrap Navbar with brand in the middle

I know that there are several questions with this topic, and i followed some examples as well to get to the point where I am now.

The problem is that it's not really working as i wish.

Let me explain it better:

Basically, all I want is a navbar with a centered Logo, but with menu entries aligned in the middle as well (so i think that navbar-left and navbar-right are not the best options, as the move the menu entries too far left and right).

At the moment, i managed to have everything centered (http://codepen.io/nickimola/pen/MyWKrM):

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <a class="navbar-brand" href="#"><img src="http://www.sdsi.pti.org.pl/var/ezwebin_site/storage/images/media/images/fujitsu-logo/7830-1-pol-PL/Fujitsu-logo_imagelarge.jpg" /></a>
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
</nav>

The thing that i don't understand now is how can i modify it so that the middle menu entry (the one containing the brand) changes width according to the width of the image.

I tried adding a width to the image like this (http://codepen.io/nickimola/pen/oxNbdB):

.navbar-brand img {
  display: inline;
  max-height: 100%;
  width:120px;
}

but obviously the result is not what i was expecting.

Apart from this size issue, everything else works as i wanted. I need some help as this is my very first use of bootstrap and I'm still not very familiar with how it works.

Thanks

EDIT

after some work, i managed to be almost at the point that i want: http://codepen.io/nickimola/pen/XdWdWK?editors=1100

I still need to being able to vertically align menu entries and logo and then it should be ready.

Upvotes: 0

Views: 790

Answers (2)

Stickers
Stickers

Reputation: 78796

I think you will need some Javascript for it. See the jQuery solution as follows.

http://codepen.io/anon/pen/ZWEWaB

$(window).on('resize', function() {
  if (window.innerWidth < 768) {
    if ($('#logo').length != 0) {
      $('.navbar-brand').unwrap('<li id="logo"></li>');
      $('.navbar-brand').insertAfter('.navbar-toggle');
    }
  } else {
    if ($('#logo').length == 0) {
      $('.navbar-brand').wrap('<li id="logo"></li>');
      $('#logo').insertAfter('.navbar-nav li:nth-child(2)');
    }
  }
}).resize();
.navbar .navbar-brand img {
  height: 100%;
  width: auto;
}
@media (min-width: 768px) {
  .navbar .navbar-nav {
    width: 100%;
    text-align: center;
  }
  .navbar .navbar-nav li {
    float: none;
    display: inline-block;
    vertical-align: middle;
  }
}
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#"><img src="https://i.imgur.com/9kJixwN.png"></a>
  </div>
  <div class="collapse navbar-collapse" id="navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</nav>

Upvotes: 1

jameson
jameson

Reputation: 201

The reason the logo isn't pushing the nav items out of the way is because you have it positioned absolutely, so it's not in the document flow. What you could do is use nth-child in the navigation items to give it some space. I've forked your codepen here: http://codepen.io/anon/pen/QNWyYP and added these styles:

ul.nav.navbar-nav > li:nth-child(2) {
    margin-right: 40px;
}
ul.nav.navbar-nav > li:nth-child(3) {
    margin-left: 40px;
}

Upvotes: 0

Related Questions