How can I add a shadow behind menu items

Ask the community
, ,
1

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:

Screenshot 2025-03-17 200036
Screenshot 2025-03-17 200036610×161 59.7 KB

What have you already tried:
I have tried to find the answer on the forums and the internet without succes.

2

Hi, @Levi_Visser !!

Is it like only the text of the hovered menu item glows?

1 Like
3

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.

4

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. :innocent:

5

Alright, thanks for the tip!
I’ll look into that :slight_smile: