Hello,
I am using Vantage Premium (and am loving it thus far) and I’m not certain how to have the main menu buttons as well as the links beneath in the drop down underline when hovered over.
Is there code I have to place in the Custom CSS box?
I’m also curious if I can have a main menu item not be a link, for example, is it possible to have a main menu item read “News and blogs” but link to nothing so that the user would choose one of the links in the dropdown such as “Weekly news” “Letters from the Board of directors” etc?
Lastly, is there a way I can use an image as one of the menu items? I work with a nonprofit and a donate button would stand out more clearly than just text.
I apologize I can’t provide our site URL as we are still working on getting everything set up.
Looking forward to your feedback.
Hi Joel
Thanks for your support.
Head to Appearance > Menus and create a custom menu if you haven’t already. Assign the menu to the theme’s primary menu location.
To create a drop down menu just drag the page or link in question one level deeper under the parent menu item.
To create a menu parent that has no link, do this. Add a Link item, you’ll find the Link items under Pages when managing your menu. Add any url when adding the link. Once added you can remove the url. Use this as your drop down parent item where applicable.
It’s unfortunately not possible to replace menu items with images. You can add menu icons to pages in the menu. To do this go to the page in question (via Pages in the main WordPress menu) and locate the menu icon drop down menu in the right column.
To add menu icons to links in your menu, try the following plugin: https://wordpress.org/plugins/menu-icons/
Hi Andrew,
I’m using the premium version of Vantage and I’m particulary interested about the question Joel made, over showing an underlined menu item when hovered over. Could you please explain me how can I configure it?
Thank you in advance!
Hi Regina
You could try something like this under Appearance > Custom CSS:
/* Vantage Menu */ .main-navigation ul li:hover > a { text-decoration: underline; }Hi Andrew!
Thanks so much for your reply! While I was waiting for it, I accidentally found a solution that I was looking for. Instead using “text-decoration”, I used “border-bottom” property:
.main-navigation ul li:hover > a { border-bottom: 4px solid #CC0000; }I also adjusted the paddings and margins of the menu item, taking in account the measures of padding and margins defined in Vantage for this element:
.main-navigation ul li:hover > a { padding-right: 0px !important; padding-left: 0px !important; margin-right: 25px !important; margin-left: 25px !important; padding-bottom: 3px !important; margin-bottom: 7px!important; }Still, I tried your solution and it works fine. The reason I did not kept it is because there is no way to add tickness to the line and the other options for “text-decoration” still don’t work for most browsers.
Anyway, thank you, thank you! It was a coincidence to find your reply when I was about to report my findings… :)
Just one question came into my mind right now: taking in account that I have customized that under Appearance > Custom CSS, if I receive Vantage’s theme update, will the settings above still remain valid?
Super, glad to hear you made progress there. Everything under Appearance > Custom CSS is upgrade safe.