[ Vertically align list items in bootstrap navbar with a set height ]

I have a navbar in bootstrap but the list items are stuck to the top when a height is set. Is there a more fluid way of centering them vertically without using margin-top.

BOOTPLY http://www.bootply.com/Ua9pFtsUDv

Answer 1

I would suggest padding the links, like so:

@media (min-width: 768px){

    .navbar-nav>li>a {
      padding-top: 60px;
      padding-bottom: 60px;
    }

}

That allows the different states to take up the height of the nav bar.

See it in this bootply

Answer 2

I just used margin-top:. Not sure if it's the most eloquent, but it works.

 .nav,.navbar-toggle {
     margin-top:40px;   
 }

Answer 3

You can add flex to your navbar:

.navbar {
    height:140px;
    background-color:#0f254f;
    display: flex;
    align-items: center;
}

be aware of browser differences though.

Answer 4

Vertically aligning navigation links is almost a universal problem when using Bootstrap. a workaround is :

.navbar-nav>li>a {
 line-height: line height that you need;
}