[knowmatesParticipant]

Hi there,

I created a website with the Renew Stack and want to add a litte animation to the navbar menu items. My intention is to get an underline from center effect when hovering a menu item.

The current state is I have created that effect but the line appears above the menu items and not below them.

May you tell me what I did wrong?

Maybe you can also add the option that the line stays below an active menu item.

Best regards

[knowmatesParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.x-navbar .desktop .x-nav > li > a::before {
   display:none;
}

.x-navbar .desktop .x-nav > li > a:hover > span, 
.x-navbar .desktop .x-nav > li.x-active > a > span, 
.x-navbar .desktop .x-nav > li.current-menu-item > a > span {
    border-bottom: 2px solid #ffc200;
}

Hope that helps.

[knowmatesParticipant]

Hi there,

your css code just leads to a static line below the menu items but I wanted to retain the effect that the bar pops up from the center when hovering a menu item.

Do you have another idea?

Best regards

[Paul RModerator]

In that case, you can just add this in custom css.

.x-navbar .desktop .x-nav > li > a::before {
   bottom:-100%;
}

Hope that helps

[knowmatesParticipant]

Hi there,

that is what I was looking for. Thank you very much! I tried so many different css settings but in the end it is only one css command.

Best regrads

[ThaiModerator]

You’re most welcome 🙂

If you need anything else please let us know.

[Author]

Posts