[Resolved] Main Navigation Menu Colors

  • Author
  • #14806


    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?


    Andrew Misplon

    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/.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

Scroll to top