Navbar is getting Overlapped on the hero section in smaller devices

[r7projects-shayan]

Issue Summary

The navbar is getting overlapped with the hero section in smaller devices. This is obstructing the hero section image from being visible which is lowering the user experience in mobiles.

Steps to Reproduce

1. Right click on browser after visiting Ghost official website
2. Click on inspect element
3. Lower the screen size to that of mobile devices
4. Click on the hamburger menu on the top right corner

Navbar should not overlap with the hero section in any device and both must be visible at the same time, even if the hamburger is expanded.

Ghost Version

5.x or 5.94.1

Node.js Version

v20.10.0

How did you install Ghost?

npm install ghost-cli -g My operating system is Windows 11. I also have WSL and Node js installed.

Database type

MySQL 5.7

Browser & OS version

Google Chrome, Version 129.0.6668.103 (Official Build) (64-bit)

Relevant log / error output

No response

Code of Conduct

• I agree to be friendly and polite to people in this repository

[Shahab-16]

I would love to fix this bug. Please assign this to me.

[r7projects-shayan]

I would love to fix this bug. Please assign this to me.

I'm already working on this issue. Thanks

[cathysarisky]

The Ghost website isn't open source, afaik. There's no way to put in a PR to fix it.

I recommend closing the issue, which isn't a Ghost CMS issue, but a Ghost website issue.

[dvdwinden]

Before I do – @r7projects-shayan, could you elaborate on the issue? You're saying the navbar is getting overlapped, but I think you mean the navbar overlaps the content? In which case: that's intentional, and does not break the experience on mobile.