I recently launched a website at
It's a single-page WordPress site with a smooth scrolling menu navigation feature.
The issue arises when the content gets covered by the menu upon scrolling to a specific section.
You can view an example of this problem in the following screenshot:
https://i.sstatic.net/7WyZb.png
The menu overlaps with the top content, which is not ideal.
What I want is for it to look like this:
https://i.sstatic.net/gWJKR.png
Any attempts to fix this using CSS properties like margin-top
end up breaking the overall design by creating unwanted blank spaces at the top. How should I go about resolving this issue?