Michael
Michael

Reputation: 3739

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

Upvotes: 1

Views: 491

Answers (1)

ChaoticNadirs
ChaoticNadirs

Reputation: 2290

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;
}

Upvotes: 2

Related Questions