Change mobile menu colour

Changing size and colors is possible with some simple custom CSS. I can give you some snippets to copy/paste if you let me know exactly how you would like it to stand out more.

Just to make sure there is no confusion: we are talking about the mobile version of the menu which appears just below the logo and says “Menu” in a large white dropdown box on an almost black background and opens the mobile device’s “rolodex” when you tap it, is that right?

Yes it is the drop down menu on the mobile layout. I’ve actually just figured out how to change the text colour. Although I wouldn’t mind knowing how to change the size and maybe the colour of the drop down bar to a darker colour.

add the code in style.css

@media only screen and (min-width:320px) and (max-width: 640px) {
div{
background-color:#d67e21;
}
}

I just tried that but it changes the background of the whole website to an orange colour rather than just changing the drop down menu. Or is style css different than custom css?

Hi again, here’s some code you can add in custom CSS (using a plugin as recommended in your other thread):

#navbar select {
    color: #000000;
    background: #666666;
    border-color: #666666;
    font-size: 14px;
}

You can of course change the colors and font-size value as desired in this code (the default font-size was 12px).

No media query is necessary here since the mobile menu is already only displayed on mobile devices.

@sauravhny12: Thanks for stepping in, I understand you mean to help and this is greatly appreciated, let’s please stick to good practices however:
One should never add or edit code in style.css – or any other native theme file – unless using a child theme.
Also the media query doesn’t make much sense since the theme has a mobile layout triggered for max-width: 767px (and why the min-width ?), and why would you change the background color for all div tags when the question was about the mobile menu – which is a select dropdown in this theme ?

Works perfect. Thank you for the help