Bootstrap full responsive navbar with logo or brand name text

Question

I would like to do a full responsive navbar with specified height in Twitter Bootstrap 3.1.1, where the brand could consists of image (logo) or text.

html:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-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="http://placehold.it/150x50&text=Logo" alt="">
            </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

css:

body {
    margin-top: 125px;
}

.navbar-fixed-top .nav {
    padding: 15px 0;
}

The problem is that after the browser's window size is decreased and menu is collapsed, navbar returns to its original height and logo image is as below:

before collapsing

after collapsing

The other problem is that changing <img src="http://placehold.it/150x50&text=Logo" alt=""> into <h3>AppName</h3> makes that AppName is not in the middle:

after collapsing

Currently it is centered by setting padding values, but I do not know how to make it independent from it.

Does anyone could help me solve this problem?

Regards

EDIT:

Here are prepared images of effect that I want to achieve:

not collapsed navbar with logo image:

before collapsing

collapsed navbar (the same height of navbar, the same size of image, but different width od navbar):

collapsed navbar

not collapsed navbar with brand name text:

not collapsed

collapsed navbar (everything is the same except width of navbar caused by changing browser's window width):

collapsed

It's quite amazing that the bootstrap team hasn't provided facilities to handle this very common case in the majority of web sites, yet have tons of facilities for less common layouts. I have yet to find a good tutorial or plain documentation on how to do this. — ATL_DEV, Jul 14 '14 at 15:49

paulalexandru · Accepted Answer · 2014-05-17T17:40:27.403

30

If you want to achieve this (you can resize the window to see how it will look for mobile version), all you have to do is to have 2 logo images (1 for desktop and one for mobile) and display them depending of the enviroment using visible-xs and hidden-xs classes.

So i used something like this:

<img class="hidden-xs" src="http://placehold.it/150x50&text=Logo" alt="">
<img class="visible-xs" src="http://placehold.it/120x40&text=Logo" alt="">

And ofcourse, i styled the mobile logo using:

@media (max-width: 767px) { 
    .navbar-brand {
        padding: 0;        
    }

    .navbar-brand img {
        margin-top: 5px;
        margin-left: 5px;
    }
}

You can see all the code here. In case you need a text on mobile version insted of the logo, it's not a big deal. Just replace the logo with a <h1 class="visible-xs">AppName</h3> and change the style inside the media query like this:

@media (max-width: 767px) { 
    .navbar-brand {
        padding: 0;        
    }

    .navbar-brand h1{
        //here add your style depending of the position you want the text to be placed
    }
}

EDIT:

You need this conditions to make it work:

.navbar-toggle {
   margin: 23px 0; 
}

.navbar-nav, .navbar-nav li, .navbar-nav li a {
  height: 80px;
  line-height: 80px;
}

.navbar-nav li a {
  padding-top: 0;
  padding-bottom:0;
}

edited May 17 '14 at 17:40

answered May 16 '14 at 19:17

paulalexandru

9,218
7
66
94

1

It is interesting solution, but it is different than I expected. I have edited my post, so that you could clearly see what I want to achieve. I would like to create universal navbar where instead of logo, the brand name text could be placed by only changing tag to
tag. And ofc I could set static height of navbar (collapsed nav and not collapsed nav have the same height), or make it dynamically set by the font size/logo height (always vertically in the middle).
– Hladeo May 17 '14 at 15:16
Your colapsed nav have a bigger height than the non colapse nav, and the size of the images are diferent to, why dp you say that they are the same? For example your image have 50px height like as the nav menu, this means it will be fit without any other space between them. Your question is not clear yet. – paulalexandru May 17 '14 at 16:16
No! They are the same! It must have been scaled... please compare: http://i.stack.imgur.com/jv66U.png and http://i.stack.imgur.com/G16iL.png (http://i.stack.imgur.com/O0CFm.png and http://i.stack.imgur.com/OzWnp.png) – Hladeo May 17 '14 at 16:21
sorry, could not edit. navbar height is 80px and logo height is 50px in this case – Hladeo May 17 '14 at 16:28
Something like this you want ? http://jsfiddle.net/paulalexandru/z2pH4/1/embedded/result/ , if yes, all you need to do is to set the h3 height like the height of the navbar and then use line-height the same, and it will be verticaly aligned perfectly. – paulalexandru May 17 '14 at 16:32
http://jsbin.com/liyogale/1/edit - based on your work, I made this, and the only problem is to center vertically menu items and collapsing button. And I think it will be all what I need :) – Hladeo May 17 '14 at 17:03
.navbar-toggle { margin: 23px 0; } This is to center the colapse button – paulalexandru May 17 '14 at 17:35
.navbar-nav, .navbar-nav li, .navbar-nav li a { height: 80px; line-height: 80px; } .navbar-nav li a { padding-top: 0; padding-bottom:0; } and this is to middle align the menu items. I also updated the answer. – paulalexandru May 17 '14 at 17:38
I thought it will be possible to avoid setting static margin in navbar-toggle... but ok. I accept this answer. Thank you for your effort :) +1 – Hladeo May 17 '14 at 17:53
Oh. One more thing that I have not noticed... Drawback of your solution is that after the menu is collapsed, if it is opened by clicking on button, than height of each line is also 80px... do you know how to fix that? – Hladeo May 18 '14 at 09:57
Mabey when you download bootstrap from here http://getbootstrap.com/customize/#navbar, you should generate it after changing the navbar from 50px (default) to 80px, and after that you wont get any other problems. – paulalexandru May 18 '14 at 11:07
Awesome. Solved my issue after having looked through 5 or 6 other potentials. This has been the first that has worked to solve my issues. Thanks a bunch. – CSS Sep 26 '15 at 22:46

score 2 · Answer 2 · answered May 16 '14 at 17:55

Best approach to add a brand logo inside a navbar-inner class and a container. About the <h3> issue <h3> has a certain padding given to it in bootstrap as @creimers told. And if you are using a bigger image, increase the height of navbar too or the logo will float outside.

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-inner"> <!--changes made here-->
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-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="http://placehold.it/150x50&text=Logo" alt="">
            </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>
</nav>

This will not work. I don't understand why there are upvotes for this. It is misleading. — Mukus, May 02 '16 at 00:00
This really is not an answer, `navbar-brand > img` will not appropriately resize according to browser/device resolution — zanderwar, May 03 '16 at 05:54

creimers · Answer 3 · 2014-05-16T19:07:54.363

0

The placeholder image you're including has a height of 50px. It is wrapped in an anchor (.navbar-brand) with a padding-top of 15px and a height of 50px. That's why the placeholder logo flows out of the bar. Try including a smaller image or play with the anchor's padding by assigning a class or an id to it wich you can reference in your css.

EDIT Or remove the static height: 50px from .navbar-brand. Your navbar will then take the height of its highest child.

h3 in bootstrap by default has a padding-top of 20px. Again, it is wrapped with that padding-top: 15px anchor. That's why it's not vertically centered like you want it. You could give the h3 a class or and id that resets the margin-top. And the same you could do with the padding of the anchor.

Here's something to play with: http://jsbin.com/jelec/1/edit?html,output

edited May 16 '14 at 19:07

answered May 16 '14 at 17:48

creimers

4,975
4
33
55

How could I change navbar height? I think that the easiest solution for my problems is setting `padding-top` and `padding-bottom` to 0, setting static height value of `navbar` and just center vertically placed image or text, or make to dynamically set height depending on height of text or image. But I do not know how to do that. – Hladeo May 16 '14 at 18:59
So, on mobile version you want a smaller image or a text? – paulalexandru May 16 '14 at 19:02
If you change the height of `.navbar-brand`, which is currently set to `50px`, your whole navbar will take the hight of its largest child. You could set a `min-height` or set no `height` at all. – creimers May 16 '14 at 19:04

score 0 · Answer 4 · answered Jan 29 '17 at 05:15

I checked and it worked for me.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin-top:100px;"><!--style with margin-top according to your need-->
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

score 0 · Answer 5 · answered Dec 21 '17 at 10:42

0

Just set the height and width where you are adding that logo. I tried and its working fine

answered Dec 21 '17 at 10:42

Pooja Khatri

550
5
11

score -1 · Answer 6 · edited Mar 21 '16 at 00:10

-1

I set .navbar-brand { min-height: inherit } which solved the issue for me (thanks @creimers for inspiration).

edited Mar 21 '16 at 00:10

Nathan Tuggy

2,237
27
30
38

answered Mar 20 '16 at 23:28

Cory Twibell

1

Bootstrap full responsive navbar with logo or brand name text

6 Answers6

tag. And ofc I could set static height of navbar (collapsed nav and not collapsed nav have the same height), or make it dynamically set by the font size/logo height (always vertically in the middle).