Invert colors on navigation bar

Hi there,

You can add this CSS to your site, and it will invert the menu colors as requested:

@media all and (min-width: 800px) {

  .menu-primary {
    background: black;
  }
  .menu-primary a, 
  .menu-primary a:link, 
  .menu-primary a:visited {
    color: white;
  }
  .toggle-dropdown {
    color: white;
  }
  .current-menu-item, 
  .current_page_item, 
  .current-menu-ancestor, 
  .current_page_ancestor {
    color: white;
    background: #222;
  }
}

Please copy & paste the code above into the “Additional CSS” section in the Customizer (Appearance > Customize), and it will take effect right away.

Options like this are also available in Unlimited Pro’s Custom Colors feature.

• This reply was modified 4 years, 8 months ago by Ben Sibley.

Thank you!

I just made the changes but notice, when on mobile, the arrows on the nav bar do not show up. Is there a way to fix that?

• This reply was modified 4 years, 8 months ago by bremarie86.

Sure thing!

Please add this CSS as well and the arrows should show up on mobile devices:

.toggle-dropdown {
  color: white;
}

Thank you so much!

You’re welcome:)