Mobile Menu Colors

Hi There Guys

I hope you are all well :slight_smile:

Please may I ask for some help with our mobile menu colours. We want the main menu background to be #4d4d4d with text #ffffff and then the sub-menu backgrounds to #D2D3D5 and the text #4dd4d4d.


If you could kindly assist us that would be greatly appreciated.

Our link is: wendyvrooyenphotography.co.za, the site is currently on password mode and the password is: WENDYVPHOTOGRAPHYNEW

Best,
Mel

Hi Mel,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {

      .mainnav.toggled, 
      #mainnav-mobi {
        background-color: #4d4d4d;
      }
      
      .mainnav.toggled ul.sub-menu, 
      #mainnav-mobi ul.sub-menu {
        background-color: #D2D3D5;
      }

      .mainnav.toggled ul.sub-menu li a, 
      #mainnav-mobi ul.sub-menu li a {
        color: #4dd44d;
      }
      
    }

Regards,
Kharis
aThemes Support

Hi Kharis,

Thank you so much :slight_smile:

Just one last thing, I promise :slight_smile:

Is there any way to make the drop-down text color on the lighter grey to #4d4d4d?

I want to keep the white text on the main navigations but on the drop-down lighter grey background the white does not stick out so nice. :slight_smile:

Thank you so much

Best,
Mel

Hi Mel,

Try adding this CSS code:

    .mainnav.toggled ul ul.sub-menu > li > a, 
    #mainnav-mobi ul ul.sub-menu > li > a {
      color: #4d4d4d;
    }

Regards,
Kharis
aThemes Support