Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
I have a Vantage Premium site with the logo in the menu bar and I am trying to keep the main header menu text aligned vertically with that logo within the header.
I have the in my custom CSS after reading some other support posts:
body.responsive header#masthead.masthead-logo-in-menu .logo {
margin-left: 10px !important;
}
header#masthead.masthead-logo-in-menu .logo {
padding: 8px 0px !important;
}
.main-navigation ul li a, .main-navigation ul li a {
padding-top: 43px !important;
The problem is that the items in the submenus share that big padding and submenus are visually too long.
Is there a combination of settings under Appearance > Customize > Theme Design > Menu, plus custom CSS adjustments that would allow this, please?
Thank you so much!
Hi SiteOriginSuperFan
Thanks for reaching out. Please, try the following at Appearance > Custom CSS to set padding for drop down menu items only:
/* Drop down menu item padding, top and bottom */ .main-navigation ul ul a { padding-top: 20px; padding-bottom: 20px; }Adjust the values as required. Let us know how that goes :)
Hi Andrew,
Thanks for your reply. I’m not sure that it worked out. I have this in my Custom CSS right now:
body.responsive header#masthead.masthead-logo-in-menu .logo { margin-left: 10px !important; } header#masthead.masthead-logo-in-menu .logo { padding: 8px 0px !important; } .main-navigation ul li a, .main-navigation ul li a { padding-top: 43px !important; /* Drop down menu item padding, top and bottom */ .main-navigation ul ul a { padding-top: 12px; padding-bottom: 12px; }But I’m getting an awkward result. Still looks like I have the 43px top padding from the main menu. Any thoughts?
The menu items need to be padding equally top and bottom. Please, try removing:
.main-navigation ul li a, .main-navigation ul li a { padding-top: 43px !important;Also, it looks like you might have missed a closing curly brace there.
Next, go to Appearance > Customize > Theme Design > Menu and set menu padding to 12px and not 0 as it is now.
Next, add the following to Appearance > Custom CSS:
.menu { padding-top: 30px; }Adjust as required.
This is a private message.
Glad to hear that helped :) Let us know if anything else comes up.
All the best.
Hi Andrew,
I thought it was resolved – but perhaps not. It’s behaving OK in Safari on the Mac I’m using but I’m wondering if that’s my cache. It is looking like it did previously in (Mac) Firefox and (Mac + PC) Chrome on separate machines and fully refreshed browsers. Transparency and tidy submenus seem to have vanished.
I’m seeing all the same/old padding values etc. Have you cleared WP Super Cache?
Thanks Andrew. I’ve just done it. Testing. Looking better …
Super, glad to hear it.