Mobile Submenu Hover Color and Social Share Styling issues
-
I am having two styling issues on my Woodmart website and would appreciate some guidance:
1. Mobile Submenu Color on Click On the mobile header, when I tap/click on a submenu item, the hover/active state color turns black. This makes the text disappear on my background. How can I change the color for the active/hover state specifically for the mobile navigation menu?
2. Social Share Styling in Posts I can manage to style my “Social Profiles” (links to my pages), but I can’t find how to change the design of the “Social Share” icons (the ones inside the blog posts). I want to change their style (colors/shape) to match my brand. Where are these specific settings located?
Hello,
01. Try to add this code in Theme Settings > Custom CSS > Custom CSS for mobile.
/* Mobile submenu hover + active color */
.wd-nav.wd-layout-drilldown > li [class*="sub-menu"] > :is(.menu-item,.wd-drilldown-back) > a:hover,
.wd-nav.wd-layout-drilldown > li [class*="sub-menu"] > :is(.menu-item,.wd-drilldown-back) > a:active,
.wd-nav.wd-layout-drilldown > li [class*="sub-menu"] > .menu-item.current-menu-item > a {
color: #ffffff !important;
}
02. Try to add this code in Theme Settings > Custom CSS > Custom CSS. Change the color code as per your requirements.
.single-post .wd-social-icons {
--wd-social-bg: #000000 !important;
--wd-social-bg-hover: #000000;
--wd-social-color: rgb(203,161,53);
--wd-social-color-hover: #fff;
}
.single-post .wd-social-icons a {
border-radius: 30%;
}
Best Regards,
.
