[Resolved] Whitespace between elementor header and content

[Pontus]

Hello,

I have a whitespace between my elementor header and the content. It seems as if the elementor header has a height of 400 rather than 200. I’ve been in contact with them (sent link to site and screencast) but they are referring me to you.

I would like the header (that has the menu) to be directly connected to the purple subheader (that has the second menu).

Would appreciate any help!

Thank you.

Pontus

[Leo]

Hi there,

Have you checked with Elementor’s support for this?

I actually don’t see any GP’s element on the linked page.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pontus]

Hello again,

Yes, I have checked with their support and they refer me to contact you because the issue is not there when using WordPress’ standard theme. If you would be able to help me out, it would be much appreciated!

Thanks!

Pontus

[David]

Hi there,

the Elementor Header that you have created has two Sections in it – one of which is ‘hidden’ it is this that is creating the additional space you’re seeing.

Do you know why there is the need for this section section in the header? Could that be removed.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pontus]

Hi David,

Thank you for the fast support!

I do not know why it has two sections, it is not something I can see from the settings. I’m guessing it has to do with making the header sticky since I do not have the whitespace when I deactivate the sticky header setting in Elementor.

Thanks!

Pontus

[David]

So did you try switching to the TwentySeventeen theme to see if it removes the problem?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pontus]

Yes, when I switch to TwentySeventeen there is no whitespace.

[David]

Do you have any custom functions added to GP Hooks? If so can you temporarily disable them by Quick Editing and save as draft.

If not can you disable all the GP Premium modules to see if this resolves the issue, if it does then re-activate them one by one to see if one of them is conflicting.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pontus]

I did not have any custom functions in GP Hooks.

I have disabled all GP Premium models and the problem is still there.

If you want to login yourself, I can provide you with my credentials if you contact me through email?

Thanks

Pontus

[David]

You can send login details via the Account Issue form here:

https://generatepress.com/contact/

Please the add the URL for this topic to the form so we can track.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

Hi there,

so the issue is to do with JetPack lazy load images – it is adding a placeholder image in the hidden sticky header element which is giving is making the element taller.

I can only assume that the standard WP themes, being the same devs as Jetpack, use a class on there logo that Jetpack excludes from lazyloading.

They provide a function here to exclude images from lazyloading:

https://jetpack.com/2013/05/03/skip-a-image-with-photon/

You can add the PHP snippet provided to exclude your logo image filename.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pontus]

David, thank you so much for your incredible support! Much appreciated!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts