Header & Front Page look great in template, but not in preview or view mode

Hi @sailjumper,

If I understood correctly, when you add this custom CSS, it doesn’t apply on the editor or on the preview page. Is that correct?

Can you confirm how you added the CSS?

If you go to the Style options, then select the three-dot (kebab) icon and go to the Additional CSS, it would also apply to the editor:

Full Size: https://d.pr/i/JDvBQ0

Hi Felipe, Thanks for your help.

Yes, I went to the global Styles, then selected the kebab and then Additional CSS (see image below). From inside the Template Editor it looks like this with the logo overlapping the image below:

But if I then hit preview or go to the Home page (or any page) the overlap goes away.

As you can see, I don’t have a lot of other code for it to compete with, just the fact that it’s a sticky header so the background color of the header is white.

I just started creating this site, so there’s really nothing much going on. There’s this header that I made sticky with an overlapping logo. The header background is white so when I scroll you can still see the menu. The navigation bar shows what page your on, there’s this test image of the earth and then there are a few empty pages so I could create the nave menu. That’s it I think.

Any ideas?

Hi @sailjumper,

I tested from my end, and it worked anyway, so there might also be some other CSS playing a part here. Do you remember adding any other CSS?

Full Size: https://d.pr/i/zDQaGw

Full Size: https://d.pr/i/atnb0n

Anyway, his way of adding the logo is not ideal/recommended anyway, as it was not developed to work in this way.

If you could share why you want to add it like that instead of adding directly to the header, I might be able to provide alternatives. ??

Thanks again Felipe,

I can confirm that there’s no other CSS. This was a fresh install.

That’s so weird, but how it worked for you exactly how I was expecting.

Anyway, I’m going to go with a sidebar menu layout instead. The idea is to keep the logo in view at all times without being, well, obnoxious about it ?? So the logo is in the sticky header but I don’t want the entire header to be as big as the logo.

Just an FYI: I had a similar problem yesterday when I was creating padding around columns. The content looked correct in the editor but not when previewed or going to the page. I’ve found that if I exit the editor, go back to the dashboard, then go back into the page or template then the issue clears up. Strange and a little disconcerting given I’m new to this lovely block theme concept.

Thanks for helping. If I ever figure out what the issue was, I’ll pop the solution in here somewhere.

• This reply was modified 1 year, 3 months ago by sailjumper.

Thank you for clarifying that, @sailjumper!

It could also be related to specific element/block that you are changing with CSS.

If you can’t figure it out, feel free to share which element specifically you added to the class, so we can try to compare. Good luck!