Hello @gwozniak20
This is Divyang from Sticky Header team.
Our team has resolved the issue with custom CSS. Refer to this video: https://clips.posimyth.com/watch/6ee0e49731cee7ed154c
To fix this, please add the following CSS in your site.
.she-header .hfe-nav-menu .menu-item.current-menu-ancestor .hfe-has-submenu-container a.hfe-menu-item{
color: red !important;
}
You may change the color in the code as per your requirement.
I hope this works for you. If you have any concerns, please let us know.
Best Regards.
Yes, it worked great, thank you!
I was close the code but was leaving off the ancestor and has container part!
Thanks again. This is resolved.
Sorry, there is still another issue left that I missed.
When you scroll, is it possible to change the HOVER color (right now it is yellow, and again against a white background doesn’t look that great). I have code in, but it is ignoring it: I tried this:
/* LINK HOVER COLOR */
.she-header .hfe-nav-menu a:hover {
color: #5645b6 !important;
}
See screen here: https://prnt.sc/XbVMGAzFkl1V
Thanks.
Hello @gwozniak20
You can use the following CSS to add the hover color as well.
.she-header .hfe-nav-menu .menu-item.current-menu-ancestor .hfe-has-submenu-container a.hfe-menu-item:hover{
color: red !important;
}
I hope this helps. If you have any queries, please let us know.
Best Regards.
Thank you, unfortunately that did not work. It still hovers the yellow color on scroll.
Let me know if you have other suggestions.
Hope you are well too!
Hello @gwozniak20,
Thank you for your patience.
Please note that there is an existing CSS rule applied on your site with !important, which is preventing the custom CSS we provided from taking effect. Refer to this screenshot: https://prnt.sc/0jYsyLLyLXn5
The CSS in question is:
.she-header .menu-item:hover a.hfe-menu-item{
color: #5645b6 !important;
}
Have you added this CSS anywhere on your site (perhaps in the Customizer, theme settings, or a custom CSS plugin)?
Looking forward to your response so we can assist you further.
Best Regards.
Hi there,
I’m a little confused as the screenshot you took shows the yellow color (#f1f100) (needed for transparent state) which I am trying to over-ride with #5645b6 (purple) on the sticky header effect (scroll). (she)
I can’t find the exact CSS in question (in your reply), but I do have this CSS, it does not work.
https://prnt.sc/VdGRsdB0M2Ym (screenshot)
/* LINK HOVER COLOR */
.she-header .hfe-nav-menu a:hover {
color: #5645b6 !important;
}
Let me know.
Thanks so much for your help.
Gloria
Hello,
I have not heard from you in a while.
These are the two remaining issues with the menu. (I am finished with the website and want to take it live)
- On the pages that do not have a sub menu (Technology, Vehicles and Contact ), the “active” color stays yellow when I scroll, which I want it to turn the same color as the Services tab when you scroll one of those four drop down pages. (the code you have me first worked but only for the Services pages)
- The active and hover color on scroll remains yellow on all tabs except for if you are on one of the Services’ dropdown page.
https://prnt.sc/K2Ye-zBbfy9b
https://prnt.sc/uNSoQwbfChFB
Hope you can help.
Thank you!
Thank you!
@gwozniak20 Please do not offer to pay anyone on these forums.
also, @gwozniak20, Please don’t offer to send or post logon credentials on these forums: https://ww.wp.xz.cn/support/guidelines#the-bad-stuff
It is not OK to offer, enter, or send site credentials on these forums. Thanks for your cooperation.
Ok, I will not do that again.
Sorry about that.
Hello @gwozniak20
We are sorry for the inconvenience and delay.
We’ve reviewed your site again, and the issue appears to be caused by excessive custom CSS applied to the navigation menu. Some of this CSS is overriding the styles we’ve provided, which is preventing the hover effect (purple color) from appearing as expected.
Please refer to these images : 1. https://prnt.sc/6AHuGB2ZS2w0 | 2. https://prnt.sc/akChDZZ4yXpz
We recommend removing all custom CSS currently applied to the navigation menu and saving it separately for future reference. Once that’s done, please apply only the CSS we provided and test the site again.
If the issue persists after doing so, please let us know — we’ll be happy to assist you further.
Hope this helps you achieve the desired functionality!
Best regards.
