brand logo center in navbar bootstrap 3

Question

Is it possible in bootstrap 3 to center brand name in the middle of the menu item? For example there is four menu item, i want two items on the left side, and two on the right side and brand name in the middle of these two menu links. Thnaks in advance for the help.

This is exactly what you're looking for: http://stackoverflow.com/a/34149840/3123861 — Bryan Willis, Dec 08 '15 at 07:31

A. A. Trabucco Campos · Answer 1 · 2014-01-11T14:53:33.737

0

Step 1 Wrap a <div class="pull-left"> around the two icons you want on the left

Step 2 move this div before the <a class="navbar-brand"

Step 3 Wrap a <div class="pull-right"> around the two icons you want on the right. Make sure this div follows the navbar-brand

This method can help you, however it is best if you post the relevant code here.

Hope this helps!

edited Jan 11 '14 at 14:53

answered Jan 11 '14 at 14:48

A. A. Trabucco Campos

361
3
4

It would be better if you gave the html code instead of writing step. – Anirudha Gupta Jan 11 '14 at 15:18
Fair point Anirudha. However, not having his code sample, I don't know how his looks like. The steps are a catch-all – A. A. Trabucco Campos Jan 11 '14 at 15:19
thanks for the comment, i want a menu like this but in bootstrap 3.[codepen](http://codepen.io/wolfcry911/pen/HyLdg) – Sajjad Ahmad Jan 12 '14 at 08:02

score 0 · Answer 2 · answered Jan 12 '14 at 10:29

0

You can use the nav-justified class...

<div class="navbar">
  <ul class="nav nav-justified">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Brand</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div>

Demo: http://bootply.com/105175

answered Jan 12 '14 at 10:29

Carol Skelly

351,302
90
710
624

This has some bugs in safari 8. If I'm not mistaken I believe it is going to be dropped in Bootstrap 4. – Bryan Willis Dec 08 '15 at 07:30
Yes, the plan is to drop it in BS4: http://v4-alpha.getbootstrap.com/migration/#whats-removed – Carol Skelly Dec 08 '15 at 13:54

score 0 · Answer 3 · answered Aug 18 '14 at 18:22

Do it like my code. Get the anchor tag with navbar-brand out of the navbar-headerand place it after the closing div. like in the code below. navbar code

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" 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>
    </button>    
  </div>
  <a class="navbar-brand" href="#">Brand</a>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Left</a></li>
        <li><a href="#about">Left</a></li>
    </ul>
  </div>
</nav>

Place this code into your css file

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    mar
}

Here is the link to the working example http://www.bootply.com/98314

score 0 · Answer 4 · answered Dec 14 '14 at 02:18

0

You can use a much simpler approach too, just setting a percentage:

.navbar-brand {
  position: absolute;
  left: 50%;
}

Side Note: I haven't tested with IE. Usually I don't like percentages, but... it works!

answered Dec 14 '14 at 02:18

flapjack

704
1
8
13

This puts it dead in the middle of the right edge. You would have to compensate by subtracting the size of the element, divide it by two etc. Too complicated. – Joshua Dance Feb 19 '15 at 20:23
You could also use this method by using css transform. http://stackoverflow.com/a/34150526/3123861 – Bryan Willis Dec 08 '15 at 07:48

brand logo center in navbar bootstrap 3

4 Answers4

Demo: http://bootply.com/105175