How to set the mouse hover effect of the menu bar

This topic has 13 replies, 2 voices, and was last updated 1 year, 3 months ago by Aizaz Imtiaz Awan.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
August 8, 2023 at 4:40 pm #487410

a1030394912
Participant

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.

August 9, 2023 at 10:00 am #487552

Aizaz Imtiaz Awan
Keymaster

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.

August 9, 2023 at 10:18 am #487559

a1030394912
Participant

how about the white background

August 9, 2023 at 1:18 pm #487619

Aizaz Imtiaz Awan
Keymaster

Hello,

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

Best Regards.

August 9, 2023 at 2:06 pm #487626

a1030394912
Participant

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

August 9, 2023 at 4:14 pm #487685
Aizaz Imtiaz Awan
Keymaster
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.
August 10, 2023 at 2:11 pm #487912

a1030394912
Participant

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

August 10, 2023 at 4:01 pm #487940

Aizaz Imtiaz Awan
Keymaster

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.

August 11, 2023 at 3:18 pm #488225

a1030394912
Participant

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

August 11, 2023 at 5:33 pm #488261

Aizaz Imtiaz Awan
Keymaster

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.

August 11, 2023 at 5:50 pm #488266

a1030394912
Participant

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

August 12, 2023 at 11:21 am #488356

Aizaz Imtiaz Awan
Keymaster

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.

August 12, 2023 at 12:01 pm #488370

a1030394912
Participant

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.

August 12, 2023 at 3:52 pm #488401
Aizaz Imtiaz Awan
Keymaster
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