Custom height Bootstrap s navbar

Question

I want a header with a height of 150px which contains a navbar  The navbar should be vertically centered in the header    HTML    lt header gt       lt div class  navbar navbar-static-top  gt           lt div class  navbar-inner  gt               lt div class  container  style  background yellow   gt                   lt a class  btn btn-navbar  data-toggle  collapse  data-target   nav-collapse  gt                       lt span class  icon-th-list  gt  lt  span gt                   lt  a gt                   lt a href     gt  lt img src  img logo png  class  logo    gt  lt  a gt                   lt nav class  nav-collapse collapse pull-right  style  line-height 150px  height 150px   gt                                 lt ul class  nav  style  display inline-block   gt                           lt li gt  lt a href    gt Portfolio lt  a gt  lt  li gt                           lt li gt  lt a href    gt Blog lt  a gt  lt  li gt                           lt li gt  lt a href    gt Contact lt  a gt  lt  li gt                       lt  ul gt                   lt  nav gt               lt  div gt           lt  div gt       lt  div gt   lt  header gt    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

User · Answer

I believe you are using Bootstrap 3  If so  please try this code  here is the bootply    lt header gt       lt div class  navbar navbar-static-top navbar-default  gt           lt div class  navbar-header  gt               lt a class  navbar-toggle  data-toggle  collapse  data-target   navbar-collapse  gt                   lt span class  glyphicon glyphicon-th-list  gt  lt  span gt               lt  a gt           lt  div gt           lt div class  container  style  background yellow   gt               lt a href     gt                   lt img src  img logo png  class  logo img-responsive  gt               lt  a gt                lt nav class  navbar-collapse collapse pull-right  style  line-height 150px  height 150px   gt                   lt ul class  nav navbar-nav  style  display inline-block   gt                       lt li gt  lt a href    gt Portfolio lt  a gt  lt  li gt                       lt li gt  lt a href    gt Blog lt  a gt  lt  li gt                       lt li gt  lt a href    gt Contact lt  a gt  lt  li gt                   lt  ul gt               lt  nav gt           lt  div gt       lt  div gt   lt  header gt

User · Answer

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    lt nav class  navbar navbar-default  gt       lt div class  navbar-header  gt           lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   bs-example-navbar-collapse-1  gt               lt span class  sr-only  gt Toggle navigation lt  span gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt           lt  button gt            lt a class  navbar-brand  href     gt  lt img src  img logo png    gt  lt  a gt       lt  div gt        lt div class  collapse navbar-collapse  gt           lt ul class  nav navbar-nav  gt               lt li gt  lt a href    gt Portfolio lt  a gt  lt  li gt               lt li gt  lt a href    gt Blog lt  a gt  lt  li gt               lt li gt  lt a href    gt Contact lt  a gt  lt  li gt           lt  ul gt       lt  div gt   lt  nav gt    Or check out the fiddle at  http   jsfiddle net TP5V8 1

User · Answer

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     lt nav class  navbar navbar-fixed-top navbar-inverse bg-primary navbar-toggleable-md py-md-3  gt       lt button class  navbar-toggler navbar-toggler-right  type  button  data-toggle  collapse  data-target   navbarNav  aria-expanded  false  aria-label  Toggle navigation  gt           lt span class  navbar-toggler-icon  gt  lt  span gt       lt  button gt       lt a class  navbar-brand  href     gt Brand lt  a gt       lt div class  navbar-collapse collapse  id  navbarNav  gt           lt ul class  navbar-nav  gt               lt li class  nav-item py-md-3  gt  lt a href     class  nav-link  gt Home lt  a gt  lt  li gt               lt li class  nav-item py-md-3  gt  lt a href     class  nav-link  gt Link lt  a gt  lt  li gt               lt li class  nav-item py-md-3  gt  lt a href     class  nav-link  gt Link lt  a gt  lt  li gt               lt li class  nav-item py-md-3  gt  lt a href     class  nav-link  gt More lt  a gt  lt  li gt               lt li class  nav-item py-md-3  gt  lt a href     class  nav-link  gt Options lt  a gt  lt  li gt           lt  ul gt       lt  div gt   lt  nav gt    Bootstrap 4 Navbar Height Demo

User · Answer

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

[html] Custom height Bootstrap's navbar

Examples related to html

Examples related to css

Examples related to twitter-bootstrap