I am trying to implement a Bootstrap 3 navbar so that the brand logo to always remain in the middle. This is the code:
It makes a nice looking navbar:
However, I would like the logo (green) remain in the middle persistently. I am adding this style to the tag with "brand" class:
<a class="brand" style="margin: 0; float: none; text-align:center" href="#">
<img src="/Content/themes/next/images/logo.png" />
</a>
It partially solves the problem: the logo is in the middle but it pushes the rest of the navbar elements down:
This is an undesirable effect that I would like to eliminate. Could you suggest a solution? Maybe it's a wrong approach to centering a logo from the start ?
Try this:
.navbar {
position: relative;
}
.brand {
position: absolute;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
Centering your logo by 50% and minus half of your logo width so that it won't have problem when zooming in and out.
See fiddle