CODEWITHSUNDEEP
htmlcsstwitter-bootstrapnavbar
HomeBrainBox
HomeBrainBox

Reputation: 59

Brand image sitting outside navbar

I would like to position my image inside the navbar and my name on the right of the image. Here's my code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">luckycharm-boy</a>
    </div>
  </div>
</nav>

Upvotes: 2

Views: 2137

Answers (5)

Gleb Kemarsky
Gleb Kemarsky

Reputation: 10398

I have a solution without flex. You just need to setup some attributes for .navbar-brand and .navbar-brand>img.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.navbar-brand {
 height: auto;
}
.navbar-brand>img {
  display: inline-block;
  padding-right: 10px;
}
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">luckycharm-boy</a>
    </div>
  </div>
</nav>

Upvotes: 1

claudios
claudios

Reputation: 6656

Easy fix would be using span. Check this out. DEMO here.

HTML:

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a class="navbar-logo" href="#">
            <span><img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px"/></span>
            luckycharm-boy
        </a>
    </div>
</nav>

CSS:

a.navbar-logo {
  color: #666666;
}

Upvotes: 0

DeveloperCoding
DeveloperCoding

Reputation: 629

An another way which I prefer is - create a whole "row" div in full nav bar without nav-header , then you can fully control the positioning of img and text location in various screen sizes for mobile as well as large screens. Then you can give various col (columns) sizes and write in that . I am saying this as it will help you to place it in any location

Upvotes: 0

Faisal Ashfaq
Faisal Ashfaq

Reputation: 2678

Why not use a media object here?

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <div class="media"> 
        <div class="media-left media-middle"> 
           <a href="#">
             <img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">
           </a>
        </div>
        <div class="media-body media-middle"> 
          <h4 class="media-heading">Luckycharm-boy</h4> 
        </div>
      </div>
    </div>
  </div>
</nav>

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122027

You can use Flexbox on .navbar-brand and reduce padding a little bit

.navbar-default .navbar-brand {
  display: flex;
  align-items: center;
  padding: 5px;
}
.navbar-brand img {
  height: 100%;
  margin-right: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"><img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">luckycharm-boy</a>
    </div>
  </div>
</nav>

Upvotes: 2

Related Questions