[Support request] header overlap Offset Site Header Height not working

[Marc]

Hi, I’m just doing a basic set-up, trying GP premium for the first time. Using header element to set up the site header for the full site. the header looks right, but when I enter a number in the Offset Site Header Height to prevent the page content appearing under the header – nothing happens.

Not finding anything in the forums. The site is behind a ‘coming soon ‘ plugin – so not sure if you can see what’s going on, but all I did was install GP premium on a site I had started with GP free version and then tried to add the site menu.

[Tom]

Hi there,

Any chance you can send us temporary login details so we can see the site?: https://generatepress.com/contact

If so, be sure to mention this topic.

Thanks! 🙂

[Marc]

I sent a temporary login link (no password needed) that I created with the ‘temporary login’ plugin to wordpress@generatepress.com. Is that what you requested. If I need to do something different let me know. thx. BTW, I have only elementor and the Coming Soon Page & Maintenance Mode by SeedProd plugin (and not the ‘temporary login’ plugin) but the probl;em did not go away when activating them.

[Marc]

*when deactivating them (plugins)

[Tom]

Ah, you’re not using a Page Hero, which is where the offset is applied to.

What’s the main benefit you’re going for when it comes to using the merged header without a Page Hero?

[Marc]

I guess I didn’t understand what the page hero was or how it works. I now get what it does, but not sure if it applies to what I’m trying to do.

I am trying to get a sticky header which will stay in place as the content scrolls up and underneath it, I want the background image to be visible behind the header and nav, and behind other images and text. I want an image or slider, text copy and a call to action button all to be visible on the home page without scroll.

I have the site set up with a static page that is set in the wordpress settings in dashboard. I got GP premium to have more control of the header than I had with the free version. I did not get that the site header has to be in conjunction with the page hero settings.

I watched the video at docs.generatepress.com/article/header-element-overview/ which I thought said you can apply the site header tab settings to the full site without the page hero. In the tutorial, it shows applying the page hero to a posts page which is not what I’m trying to do.

I am trying to get a sticky header which will stay in place as the content scrolls up and underneath it, which I thought the merge function was for. If I choose ‘no merge’ the header and nav scroll out of view as the page is scrolled. If I put a div in the page hero it knocks my home page content off screen. I don’t really want to get into writing html to design the basic site, but I’m not even sure what I would put into page hero for a home page layout, content-wise or code.

I’m looking through the documentation and not seeing where there is an example of how to do what I want. I might just be missing where that info is. Maybe generate press is not intended for a static, scrolling website? see https://joannerandmusic.com/ which I built in Divi. I had to bust ass to get it to load fast enough, so I’m hoping GP can do this kind of thing without all the bloated code. thanks for your time.

I’m not clear how I design the site applying page hero – I want to build it in elementor.

[David]

Hi there,

so a few steps to achieve this:

1. Set up your navigation as a header:
https://docs.generatepress.com/article/navigation-as-a-header/
When setting up the colors of your navigation choose the colors you want for when the Navigation is sticky.

2. Make the Nav Sticky:
https://docs.generatepress.com/article/sticky-navigation/

3. Create a new Header Element
3.1 In the Hero Content add a HTML comment e.g <!-- merged header -->
3.2 Leave all other settings on this tab as default.
3.3 On Site Header tab set this to Merge with Content.
3.4 Check the Navigation Colors box. And then edit your colors to make them transparent.

When using the Elements Modules e.g Headers or Layouts you need to set the Display Rules tab. You can assign these to the Entire Site or specific pages / posts etc. These must be set for them to work.

[Marc]

Hey David and Tom, thanks for the hand holding – sorry to make such a clumsy entry in to the GP world. I got turned around in the documentation between info on the ‘customization’ on your website tab and info on the pro modules tab, but I’m not sure where on the website I would have found the <!– merged header –> trick.

I also didn’t get that I needed to turn on all the modules to see all the options in customizer. Is there any reason not to turn on ones I’m not using? for example there is no blog page on the site I’m building. I’m worried about page load times.

I think I have a grasp of how to use GP now. Good news, it’ll be a breeze to set up the next site.

[Tom]

The merged header trick isn’t super obvious – we’ll try to make it more obvious in the documentation.

If you’re not using a module, it’s best to deactivate it. For example, the blog module will load additional CSS for your blog. If you’re not using a blog, you don’t need that CSS. Keeping the ones you need deactivated also means there’s less PHP executing in the background.

Let us know if you need more info – we’re happy to help! 🙂

[Cristian]

Hey sorry for reviving this topic. I had the same problem, as the original poster. I followed all the steps provided by David but for some reason, now when I change the “Offset Site Header Height”, the background is not transparent it picks the original color from the Customize/Colors/Body/Background color.

In the Site Header element, the Header Background under Offset Site Header Height is transparent. So far the only way I got it to work was to leave the Offset Site Header Height as default and in Elementor to add a spacer element where the header is.

[Leo]

Any chance you can open a new topic for your question and link us to the page in question?

Thanks 🙂

[Author]

Posts