Twitter-Bootstrap-2 logo image on top of navbar

twitter-bootstrap navbar twitter-bootstrap-2
Gattoo picture Gattoo · Mar 27, 2012 · Viewed 150.9k times · Source

Can someone suggest how I can place a logo image on the top of the navbar? 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 is not working as the 57x57x300.jpg is shown below the navbar.

Answer

Andres Ilich picture Andres Ilich · Mar 27, 2012

You have to also add the "navbar-brand" class to your image a container, also you have to include it inside the .navbar-inner container, like so:

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

Related questions

Change navbar color in Twitter Bootstrap

How would I go about modifying the CSS to change the color of the navbar in Twitter Bootstrap?

Read More
Bootstrap NavBar with left, center or right aligned items

In Bootstrap, what is the most platform-friendly way to create a navigation bar that has Logo A on the left, menu items in the center, and Logo B on the right? Here is what I've tried so far, and it …

Read More
Bootstrap 3 Navbar with Logo

I want to use the Bootstrap 3 default navbar with an image logo instead of text branding. What's the proper way of doing this without causing any issues with different screen sizes? I assume this a common requirement, but I haven't …

Read More