Home › Forums › WoodMart support forum › Change Parent Menu Link Color When Child Dropdown is Opened
Change Parent Menu Link Color When Child Dropdown is Opened
- This topic has 5 replies, 2 voices, and was last updated 5 years, 1 month ago by Aizaz Imtiaz Awan.
-
AuthorPosts
-
November 6, 2019 at 7:30 pm #155276
webaitsParticipantHi,
How do you keep the color of the parent menu as same to hover state color when it’s child dropdown is expanded and the mouse is inside the child.
Example:
Visit the link https://www.craftesy.com in the desktop browser.
Hover the mouse on the Women Clothing menu then the Gowns.
The color of the link “CLOTHING” will be red while the mouse is inside the dropdown.Requirement:
I have created a Whatsapp Chat menu which displays a dropdown.
You can see that at the top right upon visiting the given website.
In the normal state, the “WHATSAPP CHAT” text has the color #128C7E.
If you hover the mouse on the text, the color will turn to #075e54 and a dropdown will appear.
If you move the mouse inside the dropdown, the text color will get back to #128C7E.
How do I keep the “WHATSAPP CHAT” text color to #075e54 while the dropdown is opened and the mouse is on it?Thanks
November 7, 2019 at 7:59 am #155337
Aizaz Imtiaz AwanKeymasterHello,
I got your point that you want the same behavior for your “WhatsApp Chat” as the default menu.
Actually that is the default theme functionality. With the theme options it is not possible to apply the same behavior on the third party dropdown like WhatsApp chat. So the text color remains #075e54 while the dropdown is opened
It requires customization and this is beyond our limitations and support policy.
Best Regards.
November 7, 2019 at 5:50 pm #155516
webaitsParticipantHi,
First of all, I would like to correct a mistake in your statement.
So the text color remains #075e54 while the dropdown is opened
The text remains #075e54 only when the mouse is on it. As the mouse moves inside the opened dropdown, the text turns back to #128C7E. I expect and want it to stay #075e54 when the mouse is inside the dropdown.
Further, the “Whatsapp Chat” isn’t a third-party feature. I’ve not used any plugin to accomplish the same. I have used the features provided by the theme to build it.
The “Whatsapp Chat” is a standard link created in the WordPress menu. I’ve added CSS rules to make it look like so.
The dropdown markup is created through HTML Blocks feature provided by the theme. Further, this HTML block is called by the menu as provided by “Custom fields (for theme)”. So as expressed by me, no third-party plugin is installed.
It’s similar to any mega menu added in the Woodmart demo, where the parent has hover CSS rules applied while the mouse is anywhere inside its child. Hope it has clarified your concern.
Just problem is that, I’m not able to detect any class to the parent or its ancestors while the mouse is inside the child or the dropdown is opened. Else, I would be able to add adequate CSS selector in the second rule given below.
.wapp-menu > a { box-shadow: none; border-radius: 30px; border: 2px solid #25d366; height: 46px !important; color: #128C7E !important; padding-left: 66px !important; padding-right: 16px !important; } .wapp-menu > a:hover, .wapp-menu > a:active { color: #075e54!important; }
Hope now you can help me.
Thank you
November 8, 2019 at 8:25 am #155636
Aizaz Imtiaz AwanKeymasterHello,
Please delete this custom CSS :
.wapp-menu > a:hover, .wapp-menu > a:active { color: #075e54 !important; }
Then please add the below given custom CSS code, I am sure your issue will be solved.
.whb-color-dark .navigation-style-default #menu-item-206.item-level-0:hover > a { color: #075e54 !important; }
Best Regards.
November 8, 2019 at 2:02 pm #155753
webaitsParticipantHi,
The CSS change suggested did fix the issue.
Thanks
November 8, 2019 at 2:05 pm #155756
Aizaz Imtiaz AwanKeymasterHello,
Iām so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.
We count ourselves lucky to have you as a customer.
Thanks for contacting us.
Have a great day.Topic Closed.
Best Regards. -
AuthorPosts
The topic ‘Change Parent Menu Link Color When Child Dropdown is Opened’ is closed to new replies.
- You must be logged in to create new topics. Login / Register