Question:
I am wondering if it’s posible to add a glow effect to text within the menu component
Product:
Wix Studio
What are you trying to achieve:
What have you already tried:
I have tried to find the answer on the forums and the internet without succes.
Hi, @Levi_Visser !!
Is it like only the text of the hovered menu item glows?
1 Like
Yes, that’s exactly the idea.
I figured out how to get the effect via css (I am a C# programmer, so css feels like magic to me haha.
In the global css file i’ve put this:
.menu__item-label {
color: #5AC8FF;
text-shadow: 0px 0px 56.556px #0859CD, 0px 0px 6px rgba(8, 89, 205, 0.95), 0px 0px 8px #0859CD;
}
But now, all label items have the glow effect and I only want the current selected item to have the glow effect.
I have tried to implement the following in masterPage.js just to test something out:
$w('#menu1').onItemMouseIn((event) => {
console.log("OnMouseIn")
event.item.label = "test";
})
But that does not seem to change the label text.
The console log does get fired.
I have no clue if I am approaching this correctly or not.
I believe using global.css
is generally the right approach, but it seems that a bit of creativity will be needed to achieve your goal. When it comes to hover, CSS pseudo-classes like :hover
might be helpful. 
Alright, thanks for the tip!
I’ll look into that 