Vertically Aligning Menu Items for Bootstrap WordPress theme

Sparkling
1

Hi Aigars,

Thanks for all the answers you’ve provided on the forum, I’ve implemented a bunch of them and my site is really coming along.

However, after uploading a custom logo that was slightly larger than the suggested height at 125px instead of 76, the menu items are stuck in the same position relative to the top of the navbar. Is there a way to center them vertically so that they line up with the middle of the logo?

Here is a screenshot of the site’s header: http://imgur.com/mhBfBYs

I tried playing around with the padding solution here:
https://colorlibsupport.com/t/menu-text-not-centered-vertically/

but that didn’t work.

Any ideas? I’d really appreciate your advice :slight_smile:

Thanks!

Oh, and here is the custom css i’ve implemented, for your reference:

.post-inner-content, 
.well {
    border: 0;
}

#secondary .widget a {
    color: #00D;
}
#secondary .widget {
    color: #000;
}

#secondary .widget h3 {
    color: #000;
}

#secondary .widget a:hover {
    color: #FF4B33;
}

#main-nav a {
height: 90px;
line-height: 90px;
}
2

In your case you have to change menu item size and you can do it by using code like this:

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

Unfortunately, due to specifics of this code it won’t work via Custom CSS field that you can find in Theme Options. But you can add this inside Child Theme style.css or inside Custom CSS stylesheet that plugins such as Jetpack offers.

Let me know if this helps.

3

This worked perfectly Aigars, thanks! I’ve implemented the child theme as well - thank you for suggesting that.

Cheers!