Hello–
I have read a lot of threads about this, and it seems to me that going to the Customizer, selecting “menu” and then messing with the “Current Page Background” and “Current Page Text” colors will allow me to have an individual menu item carry a different color when the page is activated.
In short, when a customer selects the “How Do I?” menu item, I want them to be directed to that page, and the “How Do I?” menu item will then be highlighted so that the customer knows where they are.
I also know that there is custom CSS for this, but I read that Vantage Premium users can simply use the customizer. Unfortunately, this isn’t working for me. What am I missing?
Thanks!
“Current Page Background” for menu items on active pages doesn’t work
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Glynch
Sorry to hear about the hassle. It appears as though the required “current” class names aren’t printing out to the menu so there is nothing for the current menu styling to target. Please can you confirm that this menu is a custom menu saved at Appearance > Menus and that it is assigned to the theme’s primary menu location. If it is then please try temporarily de-activating all non-SiteOrigin plugins and re-test the problem. Let us know how it goes. Thanks.
Hi Andrew–
Thanks very much for your reply. As far as I can tell, everything looks good. The menu is currently saved at Appearance > Menus and it is assigned to the theme’s primary menu location. I do have some custom CSS that pertains to the menu; could this be causing problems? I have:
/* Vantage set menu font family and font size */
.main-navigation a {
font-family: “Didact Gothic”;
font-size: 17px; font-weight: 500;
}
/* Menu Padding Horizontal */
.main-navigation ul li a {
padding-right: 32px !important;
padding-left: 32px !important;
}
/* Vantage Sub Menu Width */
.main-navigation ul ul a {
width: auto !important;
}
.main-navigation ul ul li {
min-width: 150px;
white-space: nowrap;
width: 100%;
}
Thanks!
Wait! I did it. I had some sort of menu widget that must have been interfering with the vantage customizer.
Okay, that’s awesome. But there is another minor issue at hand:
If I navigate to “About” on my site, the “About” menu item now has a wonderful highlight to let me know that I’m in that section of the site.
As I begin to navigate within that neighborhood, the menu highlight switches to whatever page I’m on. So, for example, I want to navigate to “About” > “Contact Us” (which is in the “About” neighborhood) the highlight will jump to the submenu item of “Contact Us,” and “About” will no longer carry that highlight.
Is there any way to keep the highlight on “About” while I navigate through that neighborhood? If you look at the site now, you’ll see what I mean.
We’re getting there – thanks again for your help!
Try adding the following to Appearance > Custom CSS. Swap out the background and color values as required:
/* Menu */ .current_page_parent > a { background-color: #000000 } .current_page_parent > a [class^="icon-"], .current_page_parent > a [class^="icon-"] { color: #ffffff }Thanks! That worked.
Awesome :) Glad to hear that helped.
All the best.