I’m using Vantage Premium. Under theme settingsmasthead layout, if I select “Logo in Menu” for the Masthead Layout option, I have control of the colors for text, hover, background, etc, as well as type size and a lot of other great controls. However, I can’t select a background image for the header, or locate the menu where I want it or the company logo, or the spacing between the menu listings. If I select “default Layout” for the Masthead Layout” option and use a menu widget in the header area under “Customize”, I get to add a background image (desired) and control padding for the logo and the menu fits better in the header (as opposed to wrapping into 2 lines) and I can add the Social icons. What I can’t do, is control the text colors, the secondary menu colors, etc.
Is there a better solution to create a menu in the theme?
Hi Rmitche2
You’re right, there is no background option for the menu but we can use Custom CSS for this and the other controls you’re after. All the Custom CSS below should be copied to Appearance > Custom CSS. Edit as required.
Hope that helps.
Menu Background Image
/* Menu background image */ .main-navigation { background: url('http://mysiteurl.com/image.jpg'); background-repeat: repeat-x; }Replace my url with yours. Once your background image has been added to the Media Library, click on it and locate the url in the right column metabox.
Horizontal Menu Padding
/* Menu Padding Horizontal */ .main-navigation ul li a { padding-right: 25px !important; padding-left: 25px !important; }Icons in the menu
There unfortunately isn’t a widget area in the menu. You can however use a plugin like:
https://wordpress.org/plugins/menu-icons/ to add icons to menu link items.
Menu Item Drop Down Background Colors
/* Drop Down Menu Colors */ .main-navigation ul ul { background: #cccccc; } .main-navigation ul ul li:hover > a { background: #000000; }Hi Andrew,
Thanks for all the below tips for controlling the Header background. I successfully used them, along with one I built on top of the menu text padding class for the sub-nave text vertical spacing:
(.main-navigation ul ul li a {
padding-right: 15px !important;
padding-left: 15px !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
}
Regarding the icons, I should have been more clear. There is a “Vantage Social Media” widget that I was using along with the “Custom Menu” widget that showed up when I didn’t have theme control of the header. I’d like to add those social icons back into the header area but that isn’t an option.
Additionally, I’m being asked to add a weather icon to the header.
Can you help with these?
Thanks,
_Rick
Rick Mitchell
404.759.6417
The Partnership
______________________________________________________________________
CONFIDENTIALITY NOTICE
This message (including any attachments) contains proprietary information and may be confidential. If you are not the intended recipient (or authorized to receive for the intended recipient), you may not read, print, retain, use, copy, distribute or disclose to anyone the message or any information contained in the message. If you have received the message in error, please advise the sender by reply e-mail, and destroy all copies of the original message (including any attachments).
Hi Rick
Glad to hear you’re making progress. You’ve unfortunately hit a limitation of the theme setup and might need to consider continuing with custom development. The Logo in Menu layout traditionally doesn’t offer enough space to include the header widget area. As a result it’s not available in this layout. A weather icon would need to come from a Text widget using your own HTML/CSS or perhaps from a plugin that offers one. You could also look using the Menu Icons plugin to add icons to the menu:
https://wordpress.org/plugins/menu-icons/