I want to make my header menu have less empty padding, and I couldn’t find a working solution for top center position.
I want to cut off the parts in red, to make my menu slimmer.
https://r20561-af.myshopify.com/
Password: theaba
Topic summary
A user seeks to reduce excessive vertical padding in their top-center positioned header menu to create a slimmer appearance.
Problem: The header contains unwanted empty space above and below the menu items.
Solutions Provided:
Two respondents offered CSS-based fixes:
- Solution 1: Add CSS to
base.csssettingpadding: 0px !important;on the header element to completely remove padding - Solution 2: Similar approach but uses
padding: 0 32px !important;to maintain horizontal padding while removing vertical spacing
Implementation: Both solutions require editing the theme code by navigating to Online Store → Themes → Actions → Edit Code → base.css and adding the provided CSS snippet at the end of the file.
Both respondents included screenshots demonstrating the visual results of their proposed fixes. The discussion appears resolved with working solutions provided.
Hello @Sicilia2025
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.
.header.header--top-center.header--mobile-center.page-width.header--has-menu.header--has-account {
padding: 0px !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Hi Sicilia2025
- You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
header.header.header--top-center.header--mobile-center.page-width.header--has-menu.header--has-account {
padding: 0 32px !important;
}
Result:
Best,
Esther
1 Like