I started creating my site and everything was going well – I have a Hero element in place on my front page, the header is merged with the content and the header color is set to transparent. So far so good.
I opted to use the Mobile Header option, with the site title setting rather than a logo. On desktop the header appeared transparent with the hero image beneath it. On mobile, the header appeared black with white text and a white menu icon.
All of a sudden, however, the mobile header is now transparent (main header and sticky header), as is the menu box when I open it. The desktop header remains transparent like it’s supposed to be, but when I activate the desktop version of the sticky header, the stick header (not the main header) is transparent like the mobile version.
I can change the header color in the Appearance > Elements editor, and it changes successfully on desktop to whatever color I choose. But that does nothing about the desktop sticky header or the mobile headers, which remain oddly transparent.
Can you help? The strange thing here is that everything was fine, and I’m not aware of having made any changes to cause the issue. It just kind of “happened” 🙂
so perviously the mobile header was not transparent and merged with the header element? If so can you check the Site Header > Merge with Site Header settings in the Header Element and make sure only merge with Desktop is selected.