I want a header with a height of 150px which contains a navbar. The navbar should be vertically centered in the header.
HTML:
<header>
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container" style="background:yellow;">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-th-list"></span>
</a>
<a href="/"><img src="img/logo.png" class="logo" /></a>
<nav class="nav-collapse collapse pull-right" style="line-height:150px; height:150px;">
<ul class="nav" style="display:inline-block;">
<li><a href="">Portfolio</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
CSS:
header {
width: 100%;
line-height: 150px;
color:red;
height: 150px;
.navbar-inner {
border:0;
border-radius: 0;
background: blue;
padding:0;
margin:0;
height: inherit;
}
}
The nav/menu/vertical list is now in the top right of the header. How do I get it to center vertically? bootstrap.css is uncustomized.
This question is related to
html
css
twitter-bootstrap
your markup was a bit messed up. Here's the styles you need and proper html
CSS:
.navbar-brand,
.navbar-nav li a {
line-height: 150px;
height: 150px;
padding-top: 0;
}
HTML:
<nav class="navbar navbar-default">
<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="img/logo.png" /></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="">Portfolio</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</nav>
Or check out the fiddle at: http://jsfiddle.net/TP5V8/1/
You need also to set .min-height: 0px; please see bellow:
.navbar-inner {
min-height: 0px;
}
.navbar-brand,
.navbar-nav li a {
line-height: 150px;
height: 150px;
padding-top: 0;
}
If you set .min-height: 0px; then you can choose any height you want!
Good Luck!
For Bootstrap 4, there are now spacing utilities so it's easier to change the height via padding on the nav links. This can be responsively applied only at specific breakpoints (ie: py-md-3). For example, on larger (md) screens, this nav is 120px high, then shrinks to normal height for the mobile menu. No extra CSS is needed..
<nav class="navbar navbar-fixed-top navbar-inverse bg-primary navbar-toggleable-md py-md-3">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-collapse collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item py-md-3"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item py-md-3"><a href="#" class="nav-link">Link</a></li>
<li class="nav-item py-md-3"><a href="#" class="nav-link">Link</a></li>
<li class="nav-item py-md-3"><a href="#" class="nav-link">More</a></li>
<li class="nav-item py-md-3"><a href="#" class="nav-link">Options</a></li>
</ul>
</div>
</nav>
I believe you are using Bootstrap 3. If so, please try this code, here is the bootply
<header>
<div class="navbar navbar-static-top navbar-default">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-th-list"></span>
</a>
</div>
<div class="container" style="background:yellow;">
<a href="/">
<img src="img/logo.png" class="logo img-responsive">
</a>
<nav class="navbar-collapse collapse pull-right" style="line-height:150px; height:150px;">
<ul class="nav navbar-nav" style="display:inline-block;">
<li><a href="">Portfolio</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
Source: Stackoverflow.com