How to set the mouse hover effect of the menu bar

1. The initial effect is a white transparent background

2. Put the mouse on it and it becomes black on a white background

Attachments:

You must be logged in to view attached files.

Hello,

Go to Theme Settings > Typography > Advanced > choose main navigation linke elemenst from drop downw and set the menu color and hover color.
Screenshot for clarrificaion:
https://ibb.co/zfnT57p

Best Regards.

how about the white background

Hello,

Go to WoodMart > Header builder > edit current Header > Configure Header Setting > disable the option to make it overlap.

Best Regards.

But The effect I want is that the hover effect only has a white background when there is overlap.
There is no white background when the mouse is not hovering

Hello,

Go to Woodmart > Header builder > Configure main menu settings > in the style tab select the menu style background.

Then Try to add following custom css in Theme Settings > Custom CSS > Global Custom CSS:

.wd-nav.wd-style-bg>li>a:before {
    background-color: red !important;
}

Change the color as per your need.

Best Regards.

Did not understand my needs, I want is the hover effect
please look at the effect of the image I uploaded

Hello,

Could you please elaborate your concern more with some useful Screenshots or some page url. So that we can better understand and assist you accordingly.

Best Regards.

hello, for example, the main menu hover effect of http://www.swatch.com

Hello,

Go to Woodmart > Header builder > Configure main menu settings > in the style tab select the menu style underline.

Then Go to Theme Settings > Typography > Advanced > choose main navigation link elements from drop down and set the menu color white and hover color black.
https://ibb.co/FsF3Ldn

Best Regards.

Thank you
Yes, I know here. but how to make a transparent background hover to a white background

Hello,

Go to WoodMart > Header builder > edit current Header > Configure Header Setting > disable the option to make it overlap.

Then configure the header row and set the background color from the style tab.
https://ibb.co/xGfyqdT

Best Regards.

I am very confused, I can’t achieve the desired effect according to your practice, please take a look at the screenshot video I gave you below.

Hello,

Now i have added the following custom css code in theme setting > Custom CSS.

span.nav-link-text:hover {
	color: black !important;
}
.whb-general-header:hover {
	background-color: red !important;
}

Change the color as per your need.

Now the menu is showing the same one that you sent me the link “swatch.com” site.

Best Regards.

[Author]

Posts