Header overlapping post content

  • Resolved lauradeacon

    (@lauradeacon)


    5 months, 2 weeks ago

    Hi Tyler,

    I’ve created a load of new posts for the website I’m editing and in the mobile view of a single post, the post title goes right into the header section and they overlap each other. I’ve looked it up and some say to adapt the Additional CSS but I’ve no idea what I’m doing! Would you know exactly what I need to change in the code there or is there something else I need to do? I couldn’t find an option for sticky header which is what some say to do.

    The link above is just one example – there’s loads just like it.

    Thanks so much!

    Laura

    • This topic was modified 5 months, 2 weeks ago by lauradeacon.

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Tyler Moore

    (@conutant)

    5 months, 2 weeks ago

    Hi Laura,

    This is a common issue when using Astra’s Transparent Header on mobile devices. The header is set to position: absolute;, which causes your post title to slide underneath it — especially on single post pages.

    It’s not related to the Super Blank plugin, but it’s an easy fix.

    Here’s what to do:

    1. Go to Appearance → Customize → Additional CSS
    2. Paste in the following code:
    /* Fix mobile transparent header overlap for single posts */
@media (max-width: 921px) {
    .ast-theme-transparent-header.single-post .site-content {
        padding-top: 100px !important; /* Adjust this value until the overlap stops! */
    }
}

    You can adjust the 100px value up or down until the title no longer overlaps with the header.

    Hope that sorts it out! 👍

    Thread Starter lauradeacon

    (@lauradeacon)

    5 months, 2 weeks ago

    Wow that worked perfectly, thanks so much!

    Much appreciated!

Viewing 2 replies - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.