Mobile menu toggle pushes page content down

Hi,

I think you misunderstood my issue a bit.

I’m not only trying to adjust the height or animations of the mobile menu the main problem is that the mobile navigation is currently affecting the page flow.

When the menu is toggled, .main-navigation is expanding in height and pushing the page content down. What I’m trying to achieve is an overlay / fixed-style mobile menu that does not impact layout height at all.

So removing or adjusting height: calc(100vh - 72px) and height: 100%only changes how it looks after it has already taken space in the layout but it doesn’t solve the underlying issue of the menu still being in-flow.

What I’m looking for is the recommended approach to make the mobile menu behave like an overlay (position fixed/absolute).

Thanks again.

I’ve made a screen recording so you check what happens when I add position: fixed; to #site-navigation.toggled

Thank you for clarifying.

However, the styling of the navigation menu itself looks quite different in the toggled state compared when position: fixed; is added to how it was before (check screen recording).

At the moment once the menu becomes fixed/toggled, the layout/spacing and overall visual styling no longer match.

I could add something like this, but that doesn’t really solve everything:

#site-navigation.toggled {
  margin-top: 0;
  position: fixed;
  background: rgba(255, 255, 255, 0.8);
  top: 72px;
  width: 100%;
  height: 100vh;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s ease;
}
.main-navigation.toggled .main-nav ul {
  padding-bottom: 20px;
}

What I’m seeing now is that when this state is active, the menu styling (spacing, alignment, and overall structure) differs significantly from the original navigation style, making it look inconsistent.

It seems like the fixed/toggled state is either overriding or changing how the base navigation styles are applied.

Could you check if the toggled state needs additional styling overrides so the menu retains the same visual structure as before, just in overlay/fixed mode?

Got it.

I had to set the .site-header to position: fixed to prevent it from affecting the mobile navigation layout and causing the push/shift issue.

.site-header {
    position: fixed;
    width: 100%;
}

This resolves the layout shift on mobile.

I also noticed the body content now sits underneath the header since it’s set to position: fixed.

Should I add the following to compensate for the header height on mobile?

body {
    padding-top: 72px;
}

72px is the height of the fixed header on mobile.

I tried that solution (see screen recording), but it doesn’t resolve the issue correctly.

Adding top: 72px to .site-header causes the header to go down and doesn’t prevent the content from being underneath the header or properly account for the fixed header height.

Could you please advise on the correct recommended approach for handling a fixed mobile header in GeneratePress without causing content overlap/shift?

Thanks!

No, that issue is already resolved by adding position: fixedto the .site-header.

However, doing so causes the page content to sit underneath the header. On mobile, the .site-header has a height of 72px, so I have currently added padding-top: 72px to the body to offset the content and bring it back into the correct position.

My question was whether this is the recommended approach in GeneratePress, or if there is a better and more reliable way to handle this situation. View screen recording 2 for reference.

Also, could you please remove the screenshot of my staging website from your previous reply? That environment is still under development and not intended for public viewing. Sharing or referencing it publicly may lead to confusion, as the content is not final and may contain incorrect or incomplete information. I would appreciate it if it could be taken down for privacy and staging confidentiality reasons.

If I switch to position: sticky, I run into the same issue I was trying to avoid when I opened this ticket. On mobile, the menu toggle still pushes the page content down, which affects the layout behaviour I’m trying to prevent.

That’s why I initially went with position: fixed and handled the offset manually. Is this the recommended approach in this case, or would you suggest a more robust solution within GeneratePress?