Menu/ Navigation Single Item Interaction Effect

[el3ctrofuzz]

Hi Guys,

I’m trying to add a transform effect to a navigation element.

I would like for the transform effect to only effect the item that the user if hovering with. Unfortunately, when using the theme editors ‘Effect > Interaction’ settings, the transform effect is applied to the entire navigation element.

Am I missing a way of implementing my this effect on single nav items within the builder, or is this a custom CSS job?

Is the latter, could you please help me with the css?

Thanks

[marc_a]

Hi @el3ctrofuzz,

Thanks for reaching out!

The Effect > Interaction in the Navigation Element will affect the entire element and doesn’t implement only on the single nav items. The feature you want will require some CSS customization. I will just give you the right CSS selector as a starting point because this is outside the scope of our theme support.

.x-masthead .x-menu li a:hover {
//transform CSS code
}

Please check these articles about the Transform CSS.

• https://www.w3schools.com/cssref/css3_pr_transform.asp
• https://www.w3schools.com/css/css3_2dtransforms.asp
• https://www.w3schools.com/cssref/css3_pr_transform-style.asp
• https://developer.mozilla.org/en-US/docs/Web/CSS/transform
• https://css-tricks.com/almanac/properties/t/transform/

Hope that helps and thank you for understanding.

[el3ctrofuzz]

Perfect, thank you! I can do the styling with those selectors

[marc_a]

Hi @el3ctrofuzz,

You’re welcome and it’s our pleasure to help you! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.