This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Header Menu Text Vertical Alignment

Resolved 9 replies premiumthemetheme-vantage
SiteOriginSuperFan
10 years ago · Last reply by Andrew Misplon 10 years ago

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!

URL: http://westman.ca/15034v3/

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

9
  1. Andrew Misplon Staff 10 years, 7 months ago

    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 :)

  2. SiteOriginSuperFan 10 years, 7 months ago

    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?

  3. Andrew Misplon Staff 10 years, 7 months ago

    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.

  4. SiteOriginSuperFan Private 10 years, 7 months ago

    This is a private message.

  5. Andrew Misplon Staff 10 years, 7 months ago

    Glad to hear that helped :) Let us know if anything else comes up.

    All the best.

  6. SiteOriginSuperFan 10 years, 7 months ago

    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.

  7. Andrew Misplon Staff 10 years, 7 months ago

    I’m seeing all the same/old padding values etc. Have you cleared WP Super Cache?

  8. SiteOriginSuperFan 10 years, 7 months ago

    Thanks Andrew. I’ve just done it. Testing. Looking better …

  9. Andrew Misplon Staff 10 years, 7 months ago

    Super, glad to hear it.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread