Hi I’m looking to add more white space in my mobile navigation
my site is https://luxurymrkt.com
Topic summary
A store owner seeks to increase white space in their mobile navigation menu for better visual spacing.
Two CSS solutions were provided:
-
First approach: Add
margin-bottom: 10px;to.mobile-nav .mobile-nav__linkin the theme.css file -
Second approach: Add padding rules to
.mobile-nav__linkand.mobile-nav__child-itemclasses:padding-top: 10px !important;padding-bottom: 10px !important;
Implementation steps:
- Navigate to Online Store → Theme → Edit code
- Locate the theme.css file under Assets
- Paste the chosen CSS code at the bottom of the file
Both solutions target mobile navigation links to create additional vertical spacing. The discussion remains open with no confirmation of which solution was implemented or whether the issue was resolved.
Hello @Luxurymrkt ,
You will be able to add more space to mobile nav by adding below code to theme.css file
.mobile-nav .mobile-nav__link {
font-size: 11px;
margin-bottom: 10px;
}
Hope this code helps you.
Regard
Morgan
Please contact me if you need more help
Here is my email address wattsmork@gmail.com
Hi @Luxurymrkt ,
This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:
.mobile-nav__link,
.mobile-nav__child-item {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
Hope my answer will help you.
Best regards,
Victor | PageFly
1 Like