- This topic has 1 reply, 2 voices, and was last updated 3 years, 8 months ago by
.
- Posts
For the Ulta Theme I don’t see anything in Appearance>Customize that allow me to choose the menu hover and active colors so I am using CSS to change the default from #0896fe to #a70237, but not everything is working as expected. I have used the following CSS so far:
.main-navigation ul li:hover > a {
color: #a70237;
}
.main-navigation div > ul > li > a:hover {
border-bottom: 3px solid #a70237;
}
.main-navigation ul ul li:hover > a {
background: #a70237;
border-color: #a70237;
color: #fff;
}What I haven’t been able to figure out is 1) how to make the menu text be #a70237 when the page is active, 2) how to change the top border color of the dropdown menu to #a70237 when hovering over a primary menu item.
For #1 I have used the following along with the CSS above, and it doesn’t work.
.main-navigation ul ul .current-menu-item > a {
color: #a70237;
}What I want for the main navigation menu is for the hover color and bottom border to be #a70237, when I’m on a page the menu item for that page is #a70237, when I hover over a menu and there’s a sub menu that the top border of the drop down menu to be #a70237 and for the sub menu (when hovering over it) to have #a70237 as the background color. Could you help me with the CSS to accomplish all of that?
Hi, thanks for reaching out.
Ultra Premium adds a Theme Design section to the Customizer which offers settings to customize menu and menu hover colors. If you’d prefer to stick with the free version, I have provided Custom CSS for those changes here in the past. Here is a topic discussing the menu color changes using CSS: https://purothemes.com/support/topic/menu-text-colour/.
You must be logged in to reply to this topic.