Underline in the menue should in the backround

Hi @ganzheitlich

Could you share the example hover effect you are trying to achieve and share the URL of your website where you want to apply this?

You can get some ideas from here to know how you can add/change the hover effect in the menu:

https://siteorigin.com/thread/how-to-change-main-navigation-text-and-hover-colors-for-separate-items/

It may differ on your site so it’s important to know the URL. And if you are trying to achieve any specific design on hover then you will need to have some CSS knowledge to do it. Sharing the design and URL would be helpful so we can take a look.

Thanks

the design is very easy, but i can′t load images here and the site is not online

@ganzheitlich You can upload the image to any image hosting site like https://imgur.com/ and share the URL here.

If you can’t share the URL, then, in this case, you can assign a custom CSS class name to the menu item you want to design. This article can walk you through the process: https://www.lockedownseo.com/add-css-classes-to-menu-items-in-wordpress

If you add the CSS class name menu-link to any item then you can write CSS like this I shared below to WordPress Dashboard > Appearance > Customize > Additional CSS field.

/* Change menu item background color on hover */

.home-link.menu-item:hover {
    background: #ad6868 !important;
}

/* Change the text color of the menu item on hover */

.home-link.menu-item a:hover {
    color: #000000 !important;
}

You can change the color codes from the above codes as you want.

Hope this helps! ??

thank you for your help.

i try it with the code, but nothing change. here is the image link.https://imgur.com/a/Qgi0ZyL in 1 image you find how i need it and the other images is the actually situation. i actived the css class in the menu, but nothing works.

• This reply was modified 2 years ago by ganzheitlich.

Hi @ganzheitlich,

It would be great to investigate if you could share the website URL or a page URL where I can see the issue. You can set a password to the page if you don’t want to make it publicly accessible and share that link so I can take a closer look.

Thanks

Hello fozlarabbi, thank you here is the link:

https://wonderful-golick.79-174-2-100.plesk.page/

Thank you best regards Daniela

Hi @ganzheitlich

Could you delete the old codes I shared and delete the background color from the menu items on hover and use these codes below and see how it goes?

@media (min-width:1025px){
.elementor-nav-menu li a:before {
 position: absolute;
 z-index: -1;
 left: 0;
 right: 0;
 top: 60% !important;
 content: "";
 position: absolute;
 z-index: 0;
 left: 0;
 right: 100%;
 bottom: 0%;
 background: #15bf86; /*** COLOR OF THE LINE ***/
 height: 15px; /*** THICKNESS OF THE LINE ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
.elementor-nav-menu li a:hover {
 opacity: 1 !important;
}
}

It will work like this: https://prnt.sc/GY1AeeL3mnsy

Please note that this will work on desktop only since mobile/tablet doesn’t have any hover action.

Thanks

Dear fozlarabbi, so many thanks at first i put it only to the Child themes nothing happens and than i put it to the perent themes, too and i have this spezial menu. Thank you so much. Best regard Daniela

Glad that it worked. Have a nice day. ??