Brand image sitting outside navbar - html

Question

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>

Answer 1

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>

Answer 2

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>

Answer 3

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>

Answer 4

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

Answer 5

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