Archived topic

How can I create a hover glow effect in primary navigation??

6 replies · Started by Peter on January 29, 2022

Viewing posts 1–7 of 7

January 29, 2022 at 10:58 pm #2098704

Hello everyone,

I am running WP 5.9, GP and GB Pro. I would like to create a glow effect for hover instead of the box around the menu item getting darker or lighter. I was able to do it in another builder and I would love to have that effect on my current theme. BTW, I am also using the Gp's Marketer template.

Thank you in advance.

Best regards,

Peter

January 30, 2022 at 6:36 am #2098930

Hi there,

do you have a link to a site where i can see an example of the Glow effect ?

January 30, 2022 at 8:47 am #2099184

Hello David,

Thwack you so much for responding on a weekend! Totally unexpected and totally appropriated.

Moneylab.co has the effect that I am trying to replicate. When you hover over a word on the main top navigation the word appears to glow.

Thank you,

Peter

January 30, 2022 at 11:55 am #2099317

Try this CSS:

.main-navigation .main-nav ul li a:hover {
    text-shadow: 0 0 10px #fff !important;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

January 30, 2022 at 1:11 pm #2099357

Hello Leo,

Thank you for that code. You nailed it! I still have one more question. I need to get rid of the box that also happens when I hover. If you like the site I am working on is publisherlab.co you can see the top nav.

Again, thank you both for the amazing support!

Best regards,

Peter

January 30, 2022 at 1:17 pm #2099362

Leo and David,

I went back to the site and I realized that if I make the hover color the same as the background, I will get the desired result and I won't have to add more CSS.

Thanks,

Peter

January 30, 2022 at 1:21 pm #2099366

Glad to hear :)

This archived topic is closed to new replies.

Start building better websites today.