Adding spacing/lines to separate drawer menu items

teemania
Excursionist
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?

 

Website: https://teemania.co/

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

 

IMG_2249.jpeg

Replies 3 (3)

Solution_Expert
Shopify Partner
21 3 6

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>

 

Solution_Expert_0-1713421396449.png

 

Was our feedback valuable? Hit LIKE!
Want to get in touch? Mail us at hisolutionexpert@gmail.com

Vinsinfo
Shopify Partner
324 117 115

@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.
Vinsinfo_0-1713425313759.png

 

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

 

Vinsinfo_1-1713425341483.png

 

 
Then the final output will be like,
Vinsinfo_2-1713425483526.png

 

 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com 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

Anshul_arora
Navigator
429 122 87

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

Anshul_arora_0-1713428237559.png


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