Support » Theme: Unlimited » Invert colors on navigation bar

  • Resolved bremarie86

    (@bremarie86)


    How would I invert the colors of the navigation bar so that the text is white and the nav bar background is dark?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Ben Sibley

    (@bensibley)

    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 2 months, 1 week 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 2 months, 1 week ago by bremarie86.
    Theme Author Ben Sibley

    (@bensibley)

    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!

    Theme Author Ben Sibley

    (@bensibley)

    You’re welcome:)

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.