Jump to content

Change complete header color on mobile scroll

Recommended Posts


I managed to change my header when scrolling down on desktop (backround + color + logo). I noticed however that on mobile, there is still a small rectangle on top that is not being displayed in the scroll down color (white). As you can see on the screenshot below, the top of my phone is still in green, whereas it should be in white as well.

Any ideas?

Website: Webtailor.be

PW: Webtailor2022




Link to comment
  • Replies 4
  • Views 235
  • Created
  • Last Reply

Top Posters In This Topic

Try adding to Settings > Advanced > Code Injection > Header. Change #333 to color what you want

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#333333">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#333333">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#333333">


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.