Archived topic
Padding Under Nav Menu
5 replies · Started by Kris on October 1, 2021
I've created a centered logo with nav menu underneath.
My problem is the nav menu is running into the content (both on the homepage and other layouts) because of a lack of padding underneath the nav menu.
I've realized my problem lies in the container type selection but I'm still having problems syncing the homepage and other layouts to have nice spacing.
The homepage nav menu runs into the hero and the blog and other pages runs into the h1s.
How can I remediate this across the site?
Thank you very much.
Hi there,
breaking down the issue:
In Appearance > Elements there is the Header Merge element. This is used to create the overlay header effect for the site.
By changing the layout so the logo is above the navigation means the site header now occupies more height and this has to be accommodated for in the Content of the page. ie. Add more Top padding to the first container blocks on the site.
For the home page, you would edit the page, select the Container Block > Spacing and increase the top padding.
For the rest of the site that is using the Page Header and Post Header elements you would need to edit those elements and again increase the padding of the Container Block.
The padding is used as a buffer to stop the nav/site header from overlapping the content.
Note in the GB Container Block spacing, you will need to edit the Desktop, Tablet and Mobile top padding. Its going to need a lot - to ensure the overlap doesn't occur - around 280px.
The alternative would be to disable the Header Merge element ( Quick Edit > Change Status to Draft ) and then set the Header and Navigation background colors in the Customizer.
Thank you very much - this is already very helpful.
I'm able to select the content block for the homepage but how do I select the H1 on the other pages (e.g., about page, blog page) so that I can put the padding above that and not just the first page block?
Also, how do I apply this to all individual blog posts?
Thanks, David.
You will need to edit the Page Header Element and the Post Header Element in Appearance Elements, select the parent container block and make the same padding changes.
As a note - when logged in and viewing a page, in the Admin Bar you'll see an Elements option, hover over that to see the Elements on the page, and you can click the relevant one to take you direct to its editing screen.
Thank you very much.
Very helpful.
Glad to be of help
