Header builder and inline menu

[Incognito]

1. How do I assign a hover color specifically to a specific item in the menu. To be able to use different colors based on item. Either hover underline or just hover color? Can I have that and all child items in the specific parent item. Looking for something like: https://www.mozilla.org/en-US/firefox/ both for inline menu and off-canvas menu.

I know how to solve it with just a attribute but it’s much better to built it with the native builder from the theme and use best practice with your guys help.

2. How do I add an underline on active items not hover.

thanks in advance!

[rad]

Hi @Incognito,

Thanks for reaching out.

1. That’s only possible with custom CSS, examples

For X theme, please add this CSS to global custom CSS.

.x-navbar #menu-item-1840 a:hover {
color: blue;
}

This changes the menu item with the ID of menu-item-1840. To find the ID of each of your menu item, you’ll have to use the browser developer tool (inspector) https://developers.google.com/web/tools/chrome-devtools/inspect-styles/. Then you can find it similar to this

removed

Then for Pro theme’s custom header, it’s almost similar except, you may add it to Menu’s Element CSS. Like this,

$el #menu-item-151 a:hover {
color: blue;
}

removed

removed

2. You mean underline with specific colors too? That’s only possible with custom CSS, example,

The process is the same as step #1, except this is for underline with different class selector.

X theme

.x-navbar #menu-item-1840.current-menu-item {
box-shadow: inset 0px -4px 0px blue;
}

Pro theme

$el #menu-item-151.current-menu-item {
box-shadow: inset 0px -4px 0px blue;
}

These may not work on one-page navigation as the active status are controlled differently.

Thanks!

[Incognito]

Hi this ticket is only regards the new domain and project forgot to specify if but though it wasn’t necessary. And please see secure note!

And I will have a look at the answers tomorrow thanks.

[ruenel]

Hello There,

To resolve your issue, you can make use of this code:

#menu-item-151:hover .x-anchor .x-anchor-text-primary,
#menu-item-151:hover > .x-anchor .x-anchor-particle-primary{
    color: green;
}


#menu-item-152:hover .x-anchor .x-anchor-text-primary,
#menu-item-152:hover > .x-anchor .x-anchor-particle-primary{
    color: red;
}

#menu-item-153:hover .x-anchor .x-anchor-text-primary,
#menu-item-153:hover > .x-anchor .x-anchor-particle-primary{
    color: yellow;
}

Feel free to change the color that will match with your site.

[Incognito]

Can you please read the secure note and remove what is said there thanks!

I will look into your other answers later on thanks.

[rad]

I removed the screenshot, thanks!

[Incognito]

Please don’t remove put them in a secure note in the future. thanks!

[jade]

Hi there,

Unfortunately, the screenshots that were previously posted were already deleted and the staff that posted do not have a copy of the images as they were directly posted from a photo editor.

However, you can still refer to the solutions that were posted as well.

Thank you.

[Incognito]

Yes the last one should be it. I will add and play with it tomorrow or in the weekend when I got some time over for continuing designing. Many thanks so far!

[friech]

You’re more than welcome, glad we could help

Cheers!