I would like to do a full responsive navbar with specified height in Twitter Bootstrap 3.1.1, where the brand could consists of image (logo) or text.
html:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<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="navbar-brand" href="#">
<img src="http://placehold.it/150x50&text=Logo" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
css:
body {
margin-top: 125px;
}
.navbar-fixed-top .nav {
padding: 15px 0;
}
The problem is that after the browser's window size is decreased and menu is collapsed, navbar returns to its original height and logo image is as below:
The other problem is that changing <img src="http://placehold.it/150x50&text=Logo" alt="">
into <h3>AppName</h3>
makes that AppName is not in the middle:
Currently it is centered by setting padding values, but I do not know how to make it independent from it.
Does anyone could help me solve this problem?
Regards
EDIT:
Here are prepared images of effect that I want to achieve:
not collapsed navbar with logo image:
collapsed navbar (the same height of navbar, the same size of image, but different width od navbar):
not collapsed navbar with brand name text:
collapsed navbar (everything is the same except width of navbar caused by changing browser's window width):
This question is related to
twitter-bootstrap
twitter-bootstrap-3
responsive-design
navbar
Just set the height and width where you are adding that logo. I tried and its working fine
Best approach to add a brand logo inside a navbar-inner
class and a container. About the <h3>
issue <h3>
has a certain padding given to it in bootstrap as @creimers told. And if you are using a bigger image, increase the height of navbar too or the logo will float outside.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-inner"> <!--changes made here-->
<div class="container">
<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="navbar-brand" href="#">
<img src="http://placehold.it/150x50&text=Logo" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
The placeholder image you're including has a height of 50px
. It is wrapped in an anchor (.navbar-brand)
with a padding-top
of 15px
and a height of 50px
. That's why the placeholder logo flows out of the bar. Try including a smaller image or play with the anchor's padding by assigning a class
or an id
to it wich you can reference in your css
.
EDIT
Or remove the static height: 50px
from .navbar-brand
. Your navbar will then take the height of its highest child.
h3
in bootstrap by default has a padding-top
of 20px
. Again, it is wrapped with that padding-top: 15px
anchor. That's why it's not vertically centered like you want it. You could give the h3
a class
or and id
that resets the margin-top. And the same you could do with the padding
of the anchor
.
Here's something to play with: http://jsbin.com/jelec/1/edit?html,output
I set .navbar-brand { min-height: inherit }
which solved the issue for me (thanks @creimers for inspiration).
I checked and it worked for me.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin-top:100px;"><!--style with margin-top according to your need-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Source: Stackoverflow.com