[Resolved] Top of page too high up under primary navigation?

[Ema]

Hello, this is a problem which has been bugging me for a while. I use GP with Elementor. I have a custom header created with Elementor, but it cuts off the top of the page. I could play around with margins, but just feel there must a simple solution I’m missing/getting?

Thank you in advance! 🙂

Ema

[David]

Hi there,

any particular page where i can see the issue ?

[Ema]

Hi David,

Thanks for getting back to me.

if you check the https://*****live-dates/ page, looks good on desktop, but on mobile view, it jumps up too high underneath the nav. I’ve tried adding some margin but isn’t fixing. Looks fine also when I’m editing on mobile view mockup onscreen. But on a real mobile device there is still the issue.

Ema

[David]

Aah – the Header and Page are all built in Elementor so its really one for their support …. but the issue is your Mobile Header is set to Fixed – so the page below it can now slide behind it.

Easiest fix is to edit the page in Elementor, switch to Mobile View, select the Top Section and give it some Top Margin – the Mobile header is 85px tall so 85px of top margin should work.

[Ema]

Hi David. Yes, this is what I was thinking. I couldn’t work out if I needed to add some margin to the content area page of GP (edit page). I’ll try the margin once more.

Best wishes

Ema 🙂

[David]

You can do that as an alternative option with this CSS:

@media (max-width: 768px) {
    #page {
        margin-top: 85px;
    }
}

I just wasn’t sure if all pages were displaying the issue.
Glad to see you got it resolved 🙂

[Ema]

Hi David…ahhh, this is perfect! Thank you so much for your time.

Awesome

Stay safe and well

Ema

[David]

You’re welcome – you too.

[Author]

Posts