Adding spacing/lines to separate drawer menu items

[teemania]

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)

 

[Solution_Expert]

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>

[Vinsinfo]

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

[Anshul_arora]

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.