bootstrap navbar-brand responsive ness issue

Question

I have the following js fiddle . It works perfectly fine, however the issue is that on mobile version/width the navbar becomes two lines (just try resizing the window smaller). How can I make the navbar height the same size on mobile and desktop version?

Here's the navbar code:

 <div class="navbar-header">
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                <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 nav-title-logo" href="{{ url_host }}{{ path('ShopiousMainBundle_homepage') }}">  </a>

           </div>

Answer 1

Try with this CSS

  .navbar {
    max-height: 50px; 
}

DEMO