undefined Posted June 7 Posted June 7 Hello! I'm a "code scavenger" and I was able to style the menu to my linking. One issue: My main menu links change color on hover ONLY for the link without a drop-down menu. The links with a dropdown just show the dropdown, but remain the same color. Have not been able to figure out how to get ALL links to change. Here's all the code I am using right now, I wonder if there is a conflict here I'm unable to see? PS: Site is barebones, just starting on this. Many thanks! /* HEADER LINKS */ .header-nav-item a:hover { color:#434D4C !important; } .header-nav-item a:active { color:#000004 !important; } .header-nav-item a:active { color:#000004 !important; background-image: none !important; } /*DROPDOWN STYLES */ .header-nav-folder-content {border-bottom:4px solid #C7DDDD} .header-nav-folder-content {border-top:4px solid #C7DDDD} /* NAV FOLDER STYLES removes clickable main dropdown link and underline*/ .header-nav-folder-title { pointer-events: none; } .header-nav-item--active a { background-image: none !important; color:#4A7474 !important; } .header-nav-folder-content { min-width: 90px !important; }
Lesum Posted June 7 Posted June 7 @undefined Try removing the following from your code .header-nav-folder-title { pointer-events: none; } If it still doesn't work, please share the URL of your site. If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee?
undefined Posted June 9 Author Posted June 9 Hey Lesum, thanks so much! Yes — it does the job of bringing back the color overlay but now of course it is returning that top-tier menu option to being a link, which it is not. Is there a way to do both: not have it be a clickable pointer event, but change the color once the dropdown is activated? https://owl-sepia-z53p.squarespace.com/ Thank you!
Solution Lesum Posted June 10 Solution Posted June 10 @undefined Try adding this code: .header-nav-folder-title { cursor: context-menu !important; } And remove the previous block of code I mentioned earlier. If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee?
undefined Posted June 10 Author Posted June 10 Amazing, totally works and I love the context-menu cursor! THANK YOU!
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment