36

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.

KyleMit
  • 30,350
  • 66
  • 462
  • 664
yoeriboven
  • 3,541
  • 3
  • 25
  • 40

4 Answers4

116

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/

KyleMit
  • 30,350
  • 66
  • 462
  • 664
Matt Lambert
  • 3,655
  • 2
  • 24
  • 17
  • Thanks! This works, but with this code a new problem arises: when i shrink my window the navbar turns into a button. Unfortunately nothing happens when I push the button. Any idea on that? – yoeriboven Nov 08 '13 at 16:40
  • yeah that's just the collapseable bootstrap nav just remove the button tag an enclosed code if you don't want that effect – Matt Lambert Nov 09 '13 at 00:50
  • I did want the effect. It was just that when I tapped the button, nothing happend. Somehow got it fixed. – yoeriboven Nov 09 '13 at 12:19
  • You don't need `padding-top:0`. Just make your line-height value half. – Penguin Jan 06 '16 at 16:48
  • This will also make any dropdown menus in the navbar this tall. You can fix that by changing the second selector to `.navbar-nav > li > a` – j08691 Jun 28 '17 at 14:16
12

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!

Valerxx22
  • 774
  • 1
  • 11
  • 32
5

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>

Bootstrap 4 Navbar Height Demo

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
4

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>
yoeriboven
  • 3,541
  • 3
  • 25
  • 40
Able Alias
  • 3,824
  • 11
  • 58
  • 87