Adding spacing/lines to separate drawer menu items

Store Design
, ,
1

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
IMG_2249.jpeg1170×1339 40.2 KB

2

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

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

Solution_Expert_0-1713421396449.png
Solution_Expert_0-1713421396449.png516×823 16.8 KB

3

@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
Vinsinfo_0-1713425313759.png312×596 18.6 KB

  1. 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
Vinsinfo_1-1713425341483.png284×553 18.4 KB

Then the final output will be like,

Vinsinfo_2-1713425483526.png
Vinsinfo_2-1713425483526.png388×537 7.61 KB

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

4

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
Anshul_arora_0-1713428237559.png482×741 13.6 KB

I hope the code helps you.

Please share if you have any query.

Thank you.