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

paulalexandru paulalexandru · Accepted Answer · 2014-05-16T19:17:43

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

Bootstrap full responsive navbar with logo or brand name text

6 Answers