Different current menu color per page

I was able to switch the on-hover color of a page menu, but I’m having issues getting that color to change on the menu when the user is on that page. It still reverts back to the standard page menu color.

Hello @Xyxzor,

Thanks for asking. :slight_smile:

Please add following CSS under X > Theme Options > CSS to change active menu color:

.x-navbar .desktop .x-nav > .current-menu-item > a {
    color: #000;
}

You can change color code as per your requirement.

If you would like to explore CSS, you can take a look at following resource:

https://www.w3schools.com/css

Thanks.

Hi there. That code displays no matter what page you’re on. I’m looking for the box-shadow line that appears when you are active on a page. I’d like to change it on one specific page. I have the color, and menu item number, just can’t figure out what specific piece will get that effect.

Hello @Xyxzor,

Thanks for updating the thread.

If you would like to change the current page box-shadow color for specific page, please add following CSS under X > Theme Options > CSS:

.page-id-3034 .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: inset 0 4px 0 0 #b99794;
}

Please change page id. You can take a look at following article to find out page id.

Thanks.

Exactly what I was looking for. Thanks!

One other quick question.

I’m also looking to change the on-hover color of a custom headline, it is setup as a link. Similar to the menu, I’m wanting to change one of the 3 to blue.

Hi,

To add a hover to your Custom Headline Element, add a unique class to your element

Then use that class to add a hover color.

Add the code below in Theme Options > CSS

.my-headline a:hover {
    color:blue;
}

You may change blue to any color you like.

Hope this helps

Followed the instructions, that didn’t appear to work.

Hi There,

Sorry, there is a typo on the screenshot, when you apply a CLASS on the element, please do not append it with a period.



You only append it with a period when you write it on CSS rule.

.my-headline a:hover {
    color:blue;
}

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.