Custom code to change mobile menu colors? (text + background)

Site URL: http://www.steveworkedonit.com

Hi there. Hoping someone might be able to provide an answer on this one. 

I've been trying to change the background color/font color for my mobile menu drop down (mobile shows blue background/ white text0. Trying to have it match the desktop version (white background w/ blue text). I tried messing with some custom CSS / site styles based on previous posts, but have had no luck. Can anyone shed some light on this? Thanks!

Site was made using Squarespace 7.0

Add to Design > Custom CSS

@media only screen and (max-width:800px) {
div#mobileNav {
    background-color: white;
}
div#mobileNav * {
    color: #1259a1 !important;
}}

Hi Tuanphan

I have a few pages on my site that have a different colored background from others.

Is it possible to style the Mobile Menu background specifically for only those pages?

Main website: https://www.chromainteriors.co.nz

Pages with different coloured background:

https://www.chromainteriors.co.nz/services-2
https://www.chromainteriors.co.nz/about-2

Many thanks

Frances

You can edit page > Add a Code Block at bottom of page > Paste this code. You can adjust color to what you want.

<style>
  @media only screen and (max-width:800px) {
div#mobileNav {
    background-color: white;
}
div#mobileNav * {
    color: #1259a1 !important;
}}
</style>

Thanks @tuanphan, that worked great.

Is there a way we can change the background behind "MENU"?

Many thanks

On 5/20/2024 at 6:05 AM, Keenan1 said:

Thanks @tuanphan, that worked great.

Is there a way we can change the background behind "MENU"?

 

Many thanks

Use this code to Custom CSS box

div#mobileMenuLink {
    background-color: #f1f2f3 !important;
}

Thank you! That worked great.