Hi there, I am trying to reduce the line height / margin / padding, between menu / navigation / link items on the mobile menu. I’ve tried lots of different code variations but I can’t get anything to work.
Thanks
Topic summary
A user seeks to reduce spacing between menu items in the Fabric theme’s mobile navigation. The issue involves multiple menu levels requiring different CSS adjustments.
Initial Solution:
- CSS code provided targets
.menu-drawer__menu-itemand.menu-drawer__list-itemwithmin-height: 34px !importantin a media query for screens under 749px - Code should be added to
base.cssfile via Shopify admin - Additional CSS removes border around close button using
--button-border-width: none !important
Complications:
- First and second level menu items successfully adjusted to 34px spacing
- Third level submenu items (e.g., Crystals > AW’25 > individual products) initially didn’t respond to the same CSS
- Attempted solution using
#link-shopselector didn’t work for third level items
Current Status:
- User reports third level links remain unchanged despite helper claiming adjustments were made
- The helper indicates third level items share CSS with other menu levels, so changes affect all items uniformly
- User desires approximately 18px spacing for third level items specifically
- Discussion appears ongoing with disagreement about whether changes have taken effect
1 Like
@hausofmossandmoon can you please share this page link?
Regards,
Suyash
To build shopify pages use pagefly
pw: moss
@hausofmossandmoon
please add this css to the very end of your base.css file and check
shopify admin->online store->themes->edit theme code->assets->base.css
@media screen and (max-width:749px){
.menu-drawer__close-button{margin-right: 10px;}
.menu-drawer__menu>.menu-drawer__list-item{min-height: 34px;}
menu-drawer__menu .menu-drawer__menu-item{min-height: 34px;}
}
close button placement worked, but the spacing of menu items didnt. thank you
try adding !important so it becomes
@media screen and (max-width:749px){
.menu-drawer__close-button{margin-right: 10px;}
.menu-drawer__menu .menu-drawer__list-item{min-height: 34px !important;}
.menu-drawer__menu .menu-drawer__menu-item{min-height: 34px !important;}
}
1 Like
thank you that worked, i forgot about important!
it didn’t however translate over to the ‘shop’ page though - only ‘crystals’ and ‘connect’ worked.
is there a way to remove the border around the ‘close’ button entirely, i tried to no avail!
all the menu options have same settings, but shop items do not have borders and hence look different
to remove border around close button, please add this
.menu-drawer__close-button {--button-border-width: none !important;}
1 Like
thank you that worked!
sorry im looking for the code for the ‘sub menu’ / third level links to also have 34px
@hausofmossandmoon which menu item have 3rd level sub menu?
@hausofmossandmoon all these have 34 height only
can i reduce the height of those ones ?, i want them them to be closer together. thank you
@hausofmossandmoon if you want for links of only shop menu then please try this
@media screen and (max-width:749px){
#link-shop .menu-drawer__menu .menu-drawer__list-item{min-height: 34px !important;}
#link-shop .menu-drawer__menu .menu-drawer__menu-item{min-height: 34px !important;}
}
hey, that didn’t work. i need to reduce the space between these menu links, thank you. i believe they are third level, perhaps sub menu ?
- Crystals > 2. AW’25 / season of the witch > 3. kundalini citrine etc..
Are you saying it’s impossible to reduce the spacing between third level items?
I don’t want third level items to be 35px gap, I would like to reduce the spacing between them using css that I can edit. Perhaps around 18px gap.
It is not impossible, but it shares same css as others and hence it also has height 35px, if we change it then it will. change for all