Mazzy Mazzy - 11 days ago 7
HTML Question

Putting text inside navbar-brand along with image

Here I have a navbar fixed at the top in which I have placed an image and a text. I don't understand why the title doesn't go into the gray rectangle in the way to is aligned to the image. Any help is very appreciate

http://jsfiddle.net/tw10gx2d/

here is the css

.navbar-default {
height: 70px;
background-color: #333;
border: 0;
}

.navbar .logo {
width: 50px;
}

.navbar-brand {
margin-top: 10px;
padding: 0;
width: 370px;
background-color: #ddd;
}

Answer

JSFiddle - DEMO

You could use margin:0; and display: inline-block; to h1 tag and display: inline-block; to .navbar-brand

HTML:

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container"> <a href='#' class='navbar-brand'>
        <img src="http://colorlib.com/wp/wp-content/uploads/2014/02/Olympic-logo.png" class="logo">
            <h1 class="heading">Title</h1>
      </a>
    </div>
</nav>

CSS:

.navbar-default {
    height: 70px;
    background-color: #333;
    border: 0;
}
.navbar .logo {
    width: 50px;
}
.heading {
    margin:0;
    display: inline-block;
}
.navbar-brand {
    margin-top: 10px;
    padding: 0;
    width: 370px;
    background-color: #ddd;
    display: inline-block;
}