Header builder and inline menu

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!

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

  1. 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!

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.

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.

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

I will look into your other answers later on thanks.

I removed the screenshot, thanks!

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

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.

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! :slight_smile:

You’re more than welcome, glad we could help :slightly_smiling_face:

Cheers!

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