Archived topic
Background color issue on mobile
5 replies · Started by Dave on August 5, 2021
Hi there, I am stuck trying to get the header and navigation backgrounds correct.
What I'm trying to do is have the header and primary navigation transparent and merged with the hero images on all of my key pages. I looked at this support forum thread, which led me to the primary navigation background color in the customizer, but that's not getting the effect I'm going for.
On the single item blog posts the header and primary navigation has a solid color background and is working exactly as I want. The primary navigation (but not the header) on the pages has the background color and is not transparent.
The private info has my staging site so you can look at what I have right now. Can you point me in the right direction here?
Thanks!
Hi Dave,
Not sure I fully understand your question.
On the single item blog posts the header and primary navigation has a solid color background and is working exactly as I want.
Are you trying to achieve this for all the other pages?
https://www.screencast.com/t/R7bEe4cOhKp
Can you explain a bit more?
Let me know :)
Sorry I wasn't clear! The screenshot you took is of a single item blog post. On that template, the header is behaving exactly as I expected and wanted.
On pages with the big hero image and the header merged with that image, the header and primary navigation background should be transparent. That's where I'm having trouble and I'm lost in the various options. I hope that's clear.
Hi there,
you would have added a Header Element ( in Appearance > Elements ) to create the merged header. If you edit that, and go to the Site Header options, you can enable the Navigation Colors, and change its background color to transparent.
Make sure to clear any caches after making those changes.
Super! That's the set of options I was missing. Works perfectly, thanks!
Glad to be of help
