Change colors of menu on phones

on phones the menu is not showing background is white, and fonts are white
I’m trying to change the colors off the menu (airi) i added to start with to additional css:

div.btn-menu {
    color: green!important;
}

no changes

Hello there,

Try this CSS code:

    @media (max-width: 1199px) {
      .menuStyle3 .mobile-menu-toggle_lines,
      .menuStyle3 .mobile-menu-toggle_lines:before, 
      .menuStyle3 .mobile-menu-toggle_lines:after {
        background-color: #ff0000;
      }
    }

Regards,
Kharis

hm i added this to css but ni difference.

srange think is . the menu won’t show in the header, i know it is there so i know where to click.
but it opens with white background and white fonts. The one choosen becomes red.

Hello there,

Share the link to your site here, please. So I can check and provide you with the exact code to use.

Regards,
Kharis

mooie.stb-webdesign.nl

thnx sofar

Hello there,

I found dark color applied. It makes it invisible as the header bar is dark too. Probably blue will work for you? Try this code:

    @media (max-width: 1199px) {
      .menuStyle1 .mobile-menu-toggle_lines,
      .menuStyle1 .mobile-menu-toggle_lines:before, 
      .menuStyle1 .mobile-menu-toggle_lines:after {
        background-color: #007bff;
      }
    }

Regards,
Kharis

Hello

This works just fine for me. Thank you very much

regards
willem

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

How do change the hover color and the font color of menu?

Hello there,

From dashboard, visit Appearance > Customize > Colors > Header; and choose a color for “Top level menu items”.

For hover color, add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .menuStyle1 .main-navigation a:hover, 
    .menuStyle1 .fa-search:hover {
      color: #ff0000;
    }

Regards,
Kharis

Thank you. Is there a way to have different color fonts for the top level menu items that appear on the top of the the page and the font color that appears when you open the hamburger menu?

Also, how do I change the background of the menu that opens up when you expand the hamburger menu?

Hello there,

Try this CSS code:

    /** 
     * Desktop menu 
     * =========================== */
    .main-navigation a {
      color: #fff000 !important;
    }  
    .main-navigation ul li a:hover, .main-navigation ul li.current_page_item > a, .main-navigation ul li.current-menu-item > a, .main-navigation ul li.current_page_ancestor > a, .main-navigation ul li.current-menu-ancestor > a {
      color: #ff0000 !important;
    }  

    /** 
     * Mobile menu 
     * =========================== */
    @media only screen and (max-width: 1199px) {
      .main-navigation {
        background-color: #ccc !important;
      }
      .main-navigation a {
        color: #ff0000 !important;
      }  
      .main-navigation ul li a:hover, .main-navigation ul li.current_page_item > a, .main-navigation ul li.current-menu-item > a, .main-navigation ul li.current_page_ancestor > a, .main-navigation ul li.current-menu-ancestor > a {
        color: #fff000 !important;
      }  
    }

Regards,
Kharis