Archived topic
Primary menu item colors for sticky menu
5 replies · Started by Erol on April 3, 2022
Hi, I have found and added the following css for sticky menu item colors;
.main-navigation.navigation-stick .main-nav ul li a {
color: #000;
}
.main-navigation..navigation-stick .main-nav ul li[class*="current-menu-"] > a {
color: #97c920!important;
}But my menu items are html anchors with smooth scroll and the above code does not work with anchor links. Is there a way I can have hover and active menu items have different colors when using html anchors as menu items?
Many thanks for looking into this :)
Hi Erol,
Before we result to CSS, can you make sure all the colors related to the transparent header are set in the merged header element first?
https://docs.generatepress.com/article/transparent-header-and-navigation/
The video should be very helpful if you haven't watched it.
Let me know :)
Hi Leo,
Thank you for prompt response. Yes I did set the default colors in customizer and merged colors in the relevant element. I tried "use navigation as header" option too but all failed. I added one of the subpages on the menu bar and my color choices worked for that menu item. But all the html anchor links uses my "active menu item" color and this probably happens because when I am on the home page all of those linked sections are active.
I have tried to find an answer with Google search but no luck there either. I think I need some js script for this but I am not a coder and have no idea how to achieve this :(
kind regards
Hi Erol,
You may try adding a script like this through a Hook Element. Hook it to wp_footer:
<script>
const holder = document.querySelectorAll(".inside-navigation > .main-nav > .menu > .menu-item");
holder.forEach(item => {
item.addEventListener('click', event => {
holder.forEach(test => {
test.classList.remove('activehtml');
});
item.classList.add("activehtml");
})
})
</script>Then, add a CSS like this in Appearance > Customize > Additional CSS:
.main-navigation.navigation-stick .main-nav ul li a {
color: #ff0000;
}
.main-navigation.navigation-stick .main-nav ul li a:hover{
color: #00ff00;
}
.main-navigation.navigation-stick .main-nav ul li.activehtml a{
color: #0000ff;
}Kindly modify the colors to your preference.
Hope this helps! :)
Many thanks for wonderful support Fernando. It worked.
You’re welcome Erol! Glad that worked! Feel free to reach out anytime you’ll need assistance with anything else. :)
