Repository navigation
Navigation overlays: Social Icons block gap is being zeroed out (margin-top: 0;) #76936
Description
Description
When adding the Social Icons block in a Navigation Overlay template part, the blockGap is being zeroed out on the front end. This is likely caused by the following CSS, which is targeting the Navigation UL, and inadvertently also hitting the ul.wp-block-social-links:
.wp-block-navigation ul {
margin-bottom: 0;
margin-left: 0;
margin-top: 0;
padding-left: 0;
}
Step-by-step reproduction instructions
- Go to Header template part, edit Navigation, create Navigation Overlay part.
- Add content to the Navigation Overlay, including Social Icons block.
- Save changes. Go to front end, simulate mobile view, trigger responsive menu icon.
- View front end Social Icons with zero blockGap being applied.
Screenshots, screen recording, code snippet
Site editor view:
Front end view:
Environment info
WordPress 7.0 RC2, TT5 theme active, Gutenberg not active.
Please confirm that you have searched existing issues in the repo.
- Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
- Yes
Please confirm which theme type you used for testing.
- Block
- Classic
- Hybrid (e.g. classic with theme.json)
- Not sure
Activity
adithya-naik commentedon Apr 2, 2026
I am working on this.
adithya-naik commentedon Apr 2, 2026
But I am not facing the issue
bgardner commentedon Apr 2, 2026
@adithya-naik Is that content inside the Navigation Overlay template part?
adithya-naik commentedon Apr 2, 2026
NO @bgardner , Actually Iam unable to reproduce it exactly as yours
adithya-naik commentedon Apr 2, 2026
you said : "Go to Header template part, create Navigation Overlay part."
But see,Iam unable to find Header and I dont know how to make it Navigation Overlay
bgardner commentedon Apr 2, 2026
@adithya-naik My apologies, I just updated the OP. You need to create a Navigation Overlay through editing the Navigaitom block. There's a setting in the sidebar where this can be created. See screen below:
dpmehta commentedon Apr 7, 2026
@bgardner I am not able to find option which you mentioned that is "OVERLAY TEMPLATE", i have shared screenshot below can you please share more details or what am i missing ?
karthikeya-io commentedon Apr 7, 2026
To use custom overlays for navigation, you should be on WP 7.0 or have Gutenberg active. Maybe you are on WP 6.9 without Gutenberg. You can create a custom overlay template from the navigation block sidebar settings.
You can also test the overlays here: Playground
I can reproduce this issue. It happens due to the following CSS applied to all ul elements inside the navigation:
gutenberg/packages/block-library/src/navigation/style.scss
Lines 16 to 25 in d4f3ec5
Maybe we can fix this by applying margin: 0 to the navigation ul element like this, but it prevents it from applying to inner ul elements. Looking for other opinions on this.
bgardner commentedon Apr 7, 2026
Any chance you can submit a PR for that @karthikeya-io?