• Resolved sailjumper

    (@sailjumper)


    I have modified the header template so that it’s a sticky header with the logo overlapping the content beneath it.

    This looks perfect when I look at any template, but when I go to Preview it or View any page the overlapping effect is gone. It’s still sticky, but the overlap isn’t working.

    .logo_overlap {
    margin-bottom: -100px;
    }

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Felipe Santos

    (@foosantos)

    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:

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

    Thread Starter sailjumper

    (@sailjumper)

    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?

    Moderator Felipe Santos

    (@foosantos)

    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?

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

    https://d.pr/i/atnb0n
    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. 🙂

    Thread Starter sailjumper

    (@sailjumper)

    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 10 months, 1 week ago by sailjumper.
    Moderator Felipe Santos

    (@foosantos)

    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!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Header & Front Page look great in template, but not in preview or view mode’ is closed to new replies.