Best IT Recipes

Twitter-Bootstrap-2 logo on top of the navigation bar

Can anyone suggest how I can place the logo at the top of the navigation bar? My markup:

<body> <a href="index.html"> <img src="images/57x57x300.jpg"></a> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container">

It does not work, because 57x57x300.jpg is displayed under the navigation bar.

+67
twitter-bootstrap twitter-bootstrap-2 navbar
Mar 27 '12 at 16:29
source share
5 answers

You should also add the "navbar-brand" class to the image a container, you must also include it in the .navbar-inner container, for example:

  <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="navbar-brand" href="index.html"> <img src="images/57x57x300.jpg"></a> </div> </div> </div>
+71
Mar 27 '12 at 16:50
source share

Replace the brand class in either the bootstrap.css file or the new CSS file as shown below -

 .brand { background: url(images/logo.png) no-repeat left center; height: 20px; width: 100px; }

and your html should look like this:

 <div class="container-fluid"> <a class="brand" href="index.html"></a> </div>
+55
Mar 29 '12 at 8:50
source share

You must remove the navbar-fixed-top class, otherwise the navbar will remain at the top of the page where you want the logo.



If you want to place the logo inside navbar:

Navbar height (set in @navbarHeight LESS variable) is 40px by default. Your logo must be inside, or you need to make navbar first.

Then use brand class:

 <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a href="/" class="brand"><img alt="" src="/logo.gif" /></a> </div> </div> </div>

If your logo is higher than 20px , you also need to fix the style sheets.

If you do it in LESS:

 .navbar .brand { @elementHeight: 32px; padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2); }

@elementHeight should be set to the height of your image.

Gap calculation is taken from Twitter Bootstrap LESS - https://github.com/twitter/bootstrap/blob/v2.0.4/less/navbar.less#L51-52

Alternatively, you can compute fill values ​​yourself and use pure CSS.

This works for Twitter Bootstrap version 2.0.x, should also work in version 2.1, but the calculation of add-ons has changed a bit: https://github.com/twitter/bootstrap/blob/v2.1.0/less/navbar.less#L50

+13
Sep 10
source share

I use this code for navbar in bootstrap 3.2.0, the image should be no more than 50 pixels in height, otherwise it will skip the standard bs navigation bar.

Please note that I intentionally do not use class = "navigation mark", as this adds an addition to the image

 <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="" href="/"><img src='img/anyWidthx50.png'/></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Active Link</a></li> <li><a href="#">More Links</a></li> </ul> </div><!-- /.navbar-collapse --> </div> </div>
+4
Sep 24 '14 at
source share

If you do not increase the height of the navigation bar.

  .navbar .brand { position: fixed; overflow: visible; padding-left: 0; padding-top: 0; }

see http://jsfiddle.net/petrfox/S84wP/

+3
May 28 '13 at 7:30
source share


More articles:


All Articles