CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mazzy
Mazzy

Reputation: 14209

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

Upvotes: 2

Views: 8067

Answers (2)

sunwarr10r
sunwarr10r

Reputation: 4787

I use this solution:

<a class="navbar-brand" href="/main/">
   <img class="img-responsive" style="display:inline-block; height:30px; margin-top:-5px" src="logo.png" alt="logo" />
   LOGONAME
</a>

Upvotes: 0

Anonymous
Anonymous

Reputation: 10216

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

Upvotes: 4

Related Questions