Search code examples
twitter-bootstraptwitter-bootstrap-3menunavbar

Vertically center bootstrap dropdown menu icon in collapse mode


enter image description here

I've changed bootstrap navbar height and all other components in my navbar to center vertically to the new nav-bar height. I'm having trouble finding the css for the menu icon when the urls collapsed in the mobile mode.

Do you know how I can change the padding, margin for this menu icon on Bootstrap 3 navbar?

Thanks


Solution

  • I used this CSS when I changed my navbar height from the default 50px to 70px.

    Looking at your screenshot, it looks like you just need to change the margin on the .navbar-toggle class from the default 8px to appropriate values for your new navbar height.

    Demo: http://www.bootply.com/8gnPRqrILj

    .navbar {
        min-height: 70px;
    }
    
    .navbar-brand {
        height: 70px;
        line-height: 40px;
    }
    
    .navbar-nav > li > a {
        line-height: 40px;
    }
    
    .navbar-toggle {
        margin-top: 18px;
        margin-bottom: 18px;
    }