How to make Website sticky header in website design colours

[BreweryTap]

Hello,

I'm trying to set the Sticky Header to have the same background colour as the website.

Unfortunately I can not seem to change the Sticky Header background colour and it does not pick up the default Site design or the Custom Background colour set on the header.

Please can you tell me how to change the colours of the sticky header on the website?

Or if not possible add this as a Feature Request...

Many thanks

[tranguyen]

Hey @BreweryTap, thanks for sharing this!

There are some limitations to customising the sticky header but you should definitely be able to use the site colour as the background colour for it.

To do so, head to your Square Online site overview > Website > Edit Site. From here, click into the header. It'll then give you this menu below. Click into Customise.

Within this, you'll be able to change the background colour. If you select Custom colour, it'll actually give you the site colour palette for you to choose from.

I hope this will help!

[BreweryTap]

Hi Tra,

Thanks for your suggestion.

I tried this and the Sticky Header colour has not changed.

I have screen shots, but have no permission to load the here.

If you try it again but select a darker colour for the header you should see what I see.

I'm using a header colour #Hex = #0F1B29  which is the same as the site main background colour

Thanks

[tranguyen]

Thanks for letting me know @BreweryTap! I wasn't able to replicate the issue fully on my end, so I want to make sure I'm not missing anything. Is the header colour you're looking to use also the main colour for the site design?

If so, you should definitely be able to select and change it. There are just some additional troubleshooting steps I'd like us to try before escalating this further as well:

• Make sure your browser is up to date.
• Clear the cache on your browser. Access the Help menu of your browser to locate step-by-step instructions.
• Switch to a supported browser, such as Google Chrome.

Let me know if that will help!

[BreweryTap]

Hi Tra,

 thanks for your reply.

yes the header colour is the main site colour.

I have no problem selecting it for the header and no problem applying it either.

I find that it is not applied to the sticky header. I only see this in the live site.

Please check www.craftbrewsuk.square.site

 Use chrome, cache clearing make no difference.

Version 90.0.4430.93 is up to date 

I tried using MS Edge and iOS safari and see the same result in all three.

thanks

[tranguyen · Accepted solution]

Thanks for bearing with me on this @BreweryTap! I think I got to the bottom of this.

With the sticky header, when you scroll, the header will turn the colour of the site background. In order to change the colour for the scrolling header, you'll need to update this from Website > Edit Site > Site Design > Advanced colour options.

[BreweryTap]

Hi Tra,

 thanks for this option. It does change the sticky header colour, which is great.

Is there a way to change or set the site background to be the same as one of the site colours? The main or accent colour or to even pick a custom colour so that it can be matched to the header?

 Thanks again

[SGM1]

@BreweryTapIs your site published?

I went to have a look and all I get is security SSL errors saying that the certificate is not valid or a page not available error.

[BreweryTap]

Hi @SGM1

Yes published

Cheers

[SGM1]

Site looks great and no errors when viewing now.

Who are you using for your pop up cookie approval?

[BreweryTap]

Thanks @SGM1 

We generated the cookie code for free in https://www.iubenda.com/en/cookie-solution