[Resolved] Content Merged After Transparent Header Attempt

[Jack Howarth-Green]

Hi there,

First time posting & using GeneratePress so feel free to perma ban me if this has already been answered before.

I was following the guide here trying to get a transparent nav effect. However, the content on the homepage and nav bar now overlap. This makes sense to me, however I feel as though I’m doing it wrong, and it isn’t looking right so I must be missing something. Image Here: https://imgur.com/hh6BxoS

What I did to achieve this:
1. Created a new header element
2. Applied settings as per the guide above
3. Set the new element to be visible on the homepage only

What I want:
For the nav bar not to overlap with the content from the Gutenberg editor and to look more like the image in the tutorial linked above.

What I have tried:
1. Adding padding in the Page Hero tab for the new element
2. Adding a Gutenberg spacer block.

Any and all help would be appreciated!

[David]

Hi there,

as you have no content in the header element the simplest fix is to edit your home page, and increase the Top Padding of the first Container block.

If you use a header element with content then you can add more top padding or adjust the Offset Site Header Height property in the Header element.

[Jack Howarth-Green]

Hi David,

Oh, that was easier than I thought, first time using Glutenberg though so I’ll blame it on that haha.

Thanks, resolved.

[David]

Haha 🙂 – glad to hear it worked

[Author]

Posts