Hi,
I would like to achieve something that is probably done with CSS, but I´m a bit lost and i was wondering if you could give me some directions. I know it´s outside your scope.
The inline menu element displays the menu with one single colour (plus hover)
I would like to have a different colour for each menu button.
Is it easy to do?
Cheers
Thanks for writing to us.
First of all enable class for menus from Appreance -> Menus -> Screen options -> CSS Class-> Enable the checkbox.
Then add the custom CSS code in theme option’s CSS with respect to your custom class.
Here is documentation of color change using CSS.
Please note that writing custom CSS is outside the scope of our theme support. You need to learn CSS and learn how to use the browser’s element inspector.
Hope it helps you.
Thanks for understanding
Hi @prakash_s
Thank you for your reply.
I tried to follow your advice but unfortunately it didn´t work, because I´m not familiarised enough with how to get the right CSS code from Chrome inspector.
Guess I will have to give up on this one.
Cheers
Hey @PanInternational,
I’m assuming that you’ve already given classes to your menu items, here’s a very detailed instruction to highlight one menu item using the same method: Navigation Bar - highlight one menu item you can repeat these steps for others as well.
Please note that the code provided in the above thread serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.
Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:
Hope this helps!
Great and let us know how it goes. If you have any other concerns, feel free to reach us.
Thank you.
Hi,
I followed the steps from the recommended post but it didn´t work.
But the CSS guides were useful.
Even though I gave a different class to each menu item, the code I got from Chrome Inspector didn´t have the class name I gave.
I ended up with a code like this:
#menu-item-76 > a > div > div > span {
color: red; !important; }
Anyway, even with a different code I was able to change the color of each item.
Now, I am trying to change the hover color.
I followed the CSS links but all i see is too force the :hover state so I can get the CSS code.
But the force :hover is not working. It doesn´t change the state of the item.
Any tip?
To apply the hover effects, please see the below code for references.
#menu-item-47 > a:hover > div > div > span {
color: #ff0000;
}
And to change the color of the small line under on hover, please see the code below.
.e10-5.x-menu > li > .x-anchor .x-anchor-particle-primary {
color: #ff0000;
}
Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer you can avail One where we can answer questions outside of the features of our theme.
Hope that helps.
Thank you.
Hi @marc_a
Thank you… You´r a legend. 
Hover is done.
Regarding the line, what i meant is to change the line to the same color as the hover. Which means, each button should have a different line color.
Is it possible?
Yes, it is possible. You can change it by using the code below and just change the menu ID.
.e10-5.x-menu > li#menu-item-47 > .x-anchor .x-anchor-particle-primary {
color: #ff0000;
}
Hope that helps.
Thank you.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.