- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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
- Labels:
-
Square Online
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report Inappropriate Content
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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.
Community Engagement Program Manager, Square
Have a burning question to ask in our Question of the Week? Share it with us!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report Inappropriate Content
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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!
Community Engagement Program Manager, Square
Have a burning question to ask in our Question of the Week? Share it with us!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report Inappropriate Content
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report Inappropriate Content
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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!
Community Engagement Program Manager, Square
Have a burning question to ask in our Question of the Week? Share it with us!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report Inappropriate Content
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report Inappropriate Content
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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.
Community Engagement Program Manager, Square
Have a burning question to ask in our Question of the Week? Share it with us!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report Inappropriate Content
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report Inappropriate Content
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
@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.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report Inappropriate Content
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report Inappropriate Content
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Site looks great and no errors when viewing now.
Who are you using for your pop up cookie approval?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report Inappropriate Content
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Thanks @SGM1
We generated the cookie code for free in https://www.iubenda.com/en/cookie-solution
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report Inappropriate Content