Home › Forums › WoodMart support forum › How to set the mouse hover effect of the menu bar
How to set the mouse hover effect of the menu bar
- This topic has 13 replies, 2 voices, and was last updated 1 year, 2 months ago by Aizaz Imtiaz Awan.
-
AuthorPosts
-
August 8, 2023 at 4:40 pm #487410
a1030394912Participant1. 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 AwanKeymasterHello,
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/zfnT57pBest Regards.
August 9, 2023 at 10:18 am #487559
a1030394912Participanthow about the white background
August 9, 2023 at 1:18 pm #487619
Aizaz Imtiaz AwanKeymasterHello,
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
a1030394912ParticipantBut 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 hoveringAugust 9, 2023 at 4:14 pm #487685
Aizaz Imtiaz AwanKeymasterHello,
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
a1030394912ParticipantDid not understand my needs, I want is the hover effect
please look at the effect of the image I uploadedAugust 10, 2023 at 4:01 pm #487940
Aizaz Imtiaz AwanKeymasterHello,
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
a1030394912Participanthello, for example, the main menu hover effect of http://www.swatch.com
August 11, 2023 at 5:33 pm #488261
Aizaz Imtiaz AwanKeymasterHello,
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/FsF3LdnBest Regards.
August 11, 2023 at 5:50 pm #488266
a1030394912ParticipantThank you
Yes, I know here. but how to make a transparent background hover to a white backgroundAugust 12, 2023 at 11:21 am #488356
Aizaz Imtiaz AwanKeymasterHello,
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/xGfyqdTBest Regards.
August 12, 2023 at 12:01 pm #488370
a1030394912ParticipantI 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 AwanKeymasterHello,
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.
-
AuthorPosts
Tagged: hover effect
- You must be logged in to create new topics. Login / Register