Re: Adding spacing/lines to separate drawer menu items

Adding spacing/lines to separate drawer menu items

29 0 7

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?



(this is a mobile only inquiry, the menu is different on desktop)



Replies 3 (3)

Shopify Partner
21 3 6


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>

.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;




Was our feedback valuable? Hit LIKE!
Want to get in touch? Mail us at

Shopify Partner
351 124 118

@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.

1. Go to "Online Store" -> "Themes".
2. Click "Customize" button from the current theme.
3. Click "Header" section.


4. Paste below code in the "Custom CSS" field like in the below attached screenshot.


.menu-drawer__navigation > .menu-drawer__menu > li {
    border-bottom: 1px solid #D3D3D3 !important;
    padding: 15px 0px !important;




Then the final output will be like,


Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

447 125 91

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

.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 =>


I hope the code helps you.

Please share if you have any query.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here