How to center vertically the main menu

Hey, do you mind posting a link?

Hannah

Sure!

Here is the link: https://www.biblicalmedia.com/

Thanks!

Add this to your custom css box in theme options > advanced settings:

@media (max-width: 992px) {
#nav-main ul.sf-menu {
  margin-top: -10px;
}
}

Hannah

Hi Hannah,

Thank you for the code, however, I don’t think that solved my problem.

If I am viewing the website in my desktop browser at fullscreen, the logo and the main menu items are aligned vertically. However, if I start to resize & shrink my browser width, it starts to look like this:

https://www.dropbox.com/s/06696hejh7gjxbi/alignment.jpg?dl=0

*You can see that at a certain point, the logo is slightly higher than the menu, and they become out of alignment.

Currently, in my ‘Main Settings’ of the Theme Options, I have entered the following spacing options:

-logo top spacing – 10
-logo bottom spacing – 10
-primary menu top spacing – 34
-primary menu bottom spacing – 0

Any other suggestions? Thanks!

Hey so there is a couple different ways to this this. I think this css would be the easiest, leave your settings as they are and add this in your custom css box:

@media (max-width: 1200px) {
.kad-header-right #nav-main {
  margin-top: 24px;
}
}

Kadence Themes

Solved! Thanks!

BTW, I was originally using a top-selling theme from Themeforest that looked very similar to ‘Virtue’. But, then after purchasing, I realize just how slow and poorly coded the Themeforest theme was.

I went with your ‘Virtue’ theme because it enabled me to achieve virtually the same look, but with a much faster load time. Your GTMetrix and Pingdom scores are far better! So great job – Thanks for making a beautiful and fast theme!