Shopify themes, liquid, logos, and UX
Hello! While viewing my website on mobile devices, I have a drawer menu with many different menu items. I was wondering how I could add spacing and lines in between the drawer menu items to make the menu look more organized and appealing?
Website: https://teemania.co/
(this is a mobile only inquiry, the menu is different on desktop)
Hello,
This is Sam from Solution Expert.
Here is the solution:
Go to Themes > Edit code > Theme.liquid > at the bottom place this code before </body>
<style>
.menu-drawer__menu li:not(.menu-drawer__menu li:last-child) {
border-bottom: 1px solid #c5bbbb !important;
padding-bottom: 20px !important;
margin-top: 10px !important;
}
</style>
@teemania Please follow the below steps to add spacing and lines in between the drawer menu items. Let me know whether it is helpful for you.
.menu-drawer__navigation > .menu-drawer__menu > li {
border-bottom: 1px solid #D3D3D3 !important;
padding: 15px 0px !important;
}
Hello @teemania ,
I understand you are looking to differentiate menu items of your mobile menu by providing proper padding & spacing lines.
You can implement this at your end by ending small CSS code.
Please copy & paste below mentioned at the bottom of base.css file and save .
1. Go To Online Store -> Themes -> Click three dots -> Edit Code and open base.css file
2. Add the add at bottom of the file https://prnt.sc/srD6L9FB2Eoi
.menu-drawer__menu li {
padding: 10px !important;
border-bottom: 1px solid grey !important;
}
[Please feel free to change the padding px size and border' color or px size]
Output => https://prnt.sc/UF6CIT0rDnEs
I hope the code helps you.
Please share if you have any query.
Thank you.
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025