Jump to content

How can I change the font color of the mobile navigation (but not the desktop font color)

Recommended Posts

Hello, I hope the below helps as it's a bit of a long answer and I'm guessing your working in Squarespace 7.1:

First have you make sure Desktop view is open on your screen. Now click "Edit" and then "Edit Site Header". Now click "Colors" and make sure "Transparency" is turned on. Now click "Done" and then "Save Changes".

Now click the Mobile icon so you're in Mobile view. Now click "Design" and then "Colors". Now click "Section Themes" and then press in the Header area without pressing a button etc so it's highlighted. On the left hand side you should now have the options for "HEADER", "Site Title" & "Navigation Links". Press the "Show All" button above these.

This will now display the "SITEWIDE" section you need below the "HEADER" section. In this section you can now change the "Section Background" color which will change the Mobile Navigation background color but not the Desktop Menu, this will remain transparent.

If you've selected theme colors you will be able to press the "Accent" Dropdown Menu above those settings and change the text colour using this which will also only change it for the Mobile Navigation Menu and not the Desktop Menu.

I hope this all helps!

Link to comment
  • 4 months later...
  • 5 months later...
18 hours ago, SouthernSunEvents said:

Looking to do this too. I need the "MENU" text white in the mobile/tablet versions on the following pages only:




Website password: sse2020

Add to Home, Services, Contact Us Page Header

  button.Mobile-bar-menu:after {color: white !important;}


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.