[Resolved] Transparent Header with Content Underneath Broken Somehow

[Scott]

I am using GeneratePress and Elementor 1.5x to allow the content to show transparently under the header. Unfortunately, except for the first page that I did, all of the others failed. I have tried to create a new page but it fails the same way.

Here is a screencast that shows what I want and what issues I see: http://somup.com/cbiiVwVjkF

[Tom]

Hi there,

Can you try setting the container type in the Page Header settings to full width?

[Scott]

Hi Tom,

I tried that, but it changed nothing. What is unusual is that the entire header shifts to the right leaving the gap shown on the left in the video, and creating an overhang on the right that. My header has three sections in it. Each section displays mobile only, tablet only, and desktop only. The mobile and tablet work just fine. And I have two pages, my front page and one subsequent page that work in all three. I just can’t create a new page or edit any of my previous ones.

Love the theme, by the way.

[Scott]

So I temporarily ditched the custom header and went back to the default GP header, but the problem remained the same. It appears that the header wants to be boxed on the left, but extend full-width (100% of viewport width) to the right, overhanging all other content and creating a horizontal scroll situation.

I have found a Global work-around, however. By disabling the “Merge with site header” feature and implementing the GP Hooks and CSS here: https://generatepress.com/forums/topic/how-can-i-create-a-fixed-header-and-top-menu-in-the-generate-press-theme/#post-31579 I am able to cause the sticky-header/transparent-header that I was going for. The one problem is that I can’t turn it off selectively, which would be preferable.

The real concern for me, though, is why does it fail only on the full-size page and not on mobile or tablet?

[Tom]

Is there any way you can link me to one of the problem pages so I can see it live and check out the code?

[Scott]

I have temporarily disabled maintenance mode. Here is a link to an offending page: https://drwithrowdmd.com/test. Let me know when you are done so I can put it back in maintenance. If you want to look at the back end send me an email at sb dot tom at rcta dot co and I will give you access.

[Tom]

There’s a new feature in GPP 1.4 (currently in alpha) where the Page Header add-on was re-built: https://vimeo.com/223381628

This allows you to set the Inner container type to full width as well.

You can update to the alpha version like this: https://docs.generatepress.com/article/beta-testing/

[Scott]

If I weren’t already at customer review, I would implement 1.4a today. That looks quite good. Anxious to see it released.

[Tom]

Ah, gotcha.

Try this CSS then:

.inside-page-header-container.grid-container {
    max-width: 100%;
}

[Scott]

Works like a champ. Thanks for your help.

[Tom]

You’re welcome 🙂

[Author]

Posts