Place logo at top header using Bootstrap - html

Question

How I can set logo like this one? (second one)
I already try but not working. My code
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand navbar-brand" href="#"><img src="img/logo.png" alt=""></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Buy
</li>
<li>
Rent
</li>
<li>
New Properties
</li>
<li>
Property Alert
</li>
<li>
E-Learning
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

Answer 1

DEMO: https://jsbin.com/holumi/1/
https://jsbin.com/holumi/1/edit?html,css,output
The size of your logo matters, adjust the MIN-WIDTH media queries to move the logo into place.
Add navbar-custom on the navbar.
Remove the brand and navbar-brand and add logo
Adjust other CSS as needed. The CSS BEFORE the min-width media query is for all viewport sizes, the stuff INSIDE the min-width media query is for that min-width and up.
The use of position:absolute puts the logo, at that min-width, out of the document flow, therefore padding is used to put the navbar-nav into position. Notice the values.
The small viewport CSS in this example uses the same logo for both large and small, if the logo goes on dark, you can use the responsive utility classes to hide one and show the other at the min-width or max-width, such as visible-xs on the logo that is to go on the dark background and hidden-xs on the the logo for all other sizes.
CSS
.navbar-custom {
background: navy
}
.navbar-custom .logo img {
padding: 15px;
max-width: 100%;
height: auto;
}
.navbar-custom .logo {
float: left;
padding-right: 40px;
width: 100%;
}
.navbar-custom .navbar-toggle {
position: absolute;
right: 15px;
top: 15px;
border: 0px;
width: 50px;
margin: 0;
}
.navbar-custom .icon-bar {
width: 100%;
margin: 5px 0;
height: 3px;
}
#media (min-width:768px) {
.navbar-custom.navbar {
height: 200px
}
.navbar-custom .container {
position: relative;
overflow: visible;
}
.navbar-custom .navbar-nav {
padding: 125px 0 0;
text-align: center;
width: 100%;
}
.navbar-custom .navbar-nav > li {
display: inline-block;
float: none;
}
.navbar-custom .logo {
position: absolute;
background: #fff;
left: 0;
right: 0;
z-index: 5000;
display: block;
float: none;
padding: 0;
}
.navbar-custom .logo:before,
.navbar-custom .logo:after {
position: absolute;
background: #fff;
content: '';
left: -2000px;
width: 2000px;
bottom: 0;
display: block;
height: 100%;
}
.navbar-custom .logo:after {
left: auto;
right: -2000px;
}
}
HTML
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top navbar-custom" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="#"><img src="http://placehold.it/100x75/000/FFFFFF&text=LOGO" alt=""></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Buy
</li>
<li>
Rent
</li>
<li>
New Properties
</li>
<li>
Property Alert
</li>
<li>
E-Learning
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

Answer 2

You could just remove the brand completely from the navbar and then add a div above that navbar with an img attribute which would be your logo

Answer 3

Create two navbars and make top position of second navbar to start below first nav bar.
<nav class="navbar navbar-inverse navbar-fixed-top my-logo" role="navigation">
.....
</nav>
<nav class="navbar navbar-inverse navbar-fixed-top my-menu" role="navigation">
Now create style for second navbar as
.my-menu {
top: 50px;
}