Header overlapping website content

Resolved phintokyoplaza
(@phintokyoplaza)

11 months ago

The website header is overlapping the page content for all website pages. Tried researching for other solutions but my issue is still not resolved. Tried different ccs codes, bottom border sizes, header sizes, etc… Website Header includes the primary header and the above header. The website Im building is not currently active. Im using an Astra template + woocommerce.

I need help to resolve this issue. The header should be above all page content, otherwise the content is lost behind the header, including the title and product filters.

The page content is lost behind the website header. Cannot see the title of product filters. Also for the product pages, cannot see the images properly because the header is not above the page content but overlapping the content.

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

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

Jaydeep Das
(@jdeep)

11 months ago
Hi @phintokyoplaza
It is happening because the header has been positioned using absolute or sticky without accounting for the margin of the site content properly. One simple fix is to position the header relatively using:
```
.site-header {
    position: relative;
    z-index: 10; /* Optional: ensure it stays above background layers */
}
```
Moderator threadi
(@threadi)

11 months ago

If the above tip is not enough, I would recommend that you contact the support forum for the Astra theme you are using: https://wordpress.org/support/theme/astra/

Thread Starter phintokyoplaza
(@phintokyoplaza)

11 months ago

Thank you for reaching back, unfortunately it didnt resolve with the code, but i did contact support team from astra, still waiting for a response from them.
OsakaWebbie
(@osakawebbie)

9 months ago
@phintokyoplaza Did you get a solution/answer from the Astra team? I seem to be having the same problem with a new site I’m beginning to design with Astra. Here’s a screenshot. It only happens when using “Transparent Header”, but I do want that style.

View post on imgur.com
- This reply was modified 9 months ago by OsakaWebbie. Reason: image was missing the first time
Thread Starter phintokyoplaza
(@phintokyoplaza)

9 months ago

@osakawebbie HI, yes i found a solution. I tried different plugins which were not helpful to the point that my wordpress interface wasnt even opening. I had contacted hostinger who advised there was a faulty plugin that was causing the header issue. I later found a notification inside wordpress telling me exactly the name of the plugin. I then had to go inside the hostinger interface > websites > tools > file manager > access files (the rest of the steps were described by hostinger), and i had to deactivate/delete the plugin from the file manager. There will be all the plugin names and i clicked on the faulty one and deleted it. Then i could finally go inside wordpress and the issue was also gone.
OsakaWebbie
(@osakawebbie)

9 months ago
@phintokyoplaza Hmm, then I guess I’m having a different problem, because currently this site only has three plugins: WPForms Lite, WP Mail SMTP, and Nginx Helper. None of those have anything to do with appearance or layout, and unsurprisingly, deactivating them had no effect on the overlap issue.

Are you using Transparent Header? (Customizer -> Header -> Transparent Header -> “Enable on Complete Website” switch) The overlap appears to be an intentional aspect of that feature – the CSS for the header element changes from “position: relative” to “position: absolute”, which allows the element below it (div#content) to flow under it. But I don’t understand how to logically arrange things for that to look good. div#primary has a top margin of 4em or 64 pixels, so if my header content (logo, title, and tagline) was shorter than that, it might be okay, but it’s not. I guess I’ll need to start my own post thread to ask the community.
- This reply was modified 9 months ago by OsakaWebbie.