How To Make Spacing Lines Shorter In Menu Drawer

Store Design
, , , , ,

Topic summary

A user wants to shorten the horizontal lines (dividers) between menu drawer items on their Shopify store, making them narrower on both sides rather than spanning the full width.

Solution Provided:
A support representative from BSSCommerce provided CSS code to add to the “theme.css” or “base.css” file:

  • Set .menu-drawer__navigation .menu-drawer__menu li width to 80% (adjustable to 85%, 90% for longer lines)
  • Center-align the items

Follow-up Request:
The user asked how to left-align the menu text with the shortened lines instead of centering.

Additional CSS:
The representative provided an additional rule: .menu-drawer__navigation .menu-drawer__menu li a with padding-left: 0 !important; to achieve left alignment.

The support representative shared a screenshot showing the expected result and requested the user mark replies as resolution if the solution works. The final response consolidated all CSS code into one complete snippet for implementation.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Thanks in advance!

I am looking to make the lines in between my menu drawer items shorter (on both sides of the drawer). Example shown below.

How my site looks:

IMG_0803.jpeg
IMG_0803.jpeg1179Ă—800 23.3 KB

How I would like my site to look:

IMG_0804.jpeg
IMG_0804.jpeg1100Ă—1070 43.1 KB

https://decemberschild.com
password: dc

2

@MMast You can add this CSS code at the bottom of “theme.css” or “base.css” file:

.menu-drawer__navigation .menu-drawer__menu {
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;    
}
.menu-drawer__navigation .menu-drawer__menu li {
    width: 80%;
}

If you want those lines to be a little longer, just increase the percentage, 85%, 90%.

If it works, please mark my reply as resolution.

1 Like
3

Is there a way to make the menu items align with the left side of the lines?

Example:

Screenshot 2024-06-24 235729.png
Screenshot 2024-06-24 235729.png218Ă—235 3.45 KB

4

Yes, @MMast . Add this line right after the code I just gave you above:

.menu-drawer__navigation .menu-drawer__menu li a {
    padding-left: 0 !important;
}

Here, result:

BSSCommerceTA_0-1719288591551.png
BSSCommerceTA_0-1719288591551.png378Ă—821 9.44 KB

If it works, please mark my 2 replies as resolutions.

1 Like
5

@MMast , add all this CSS code at the bottom of “theme.css” or “base.css” file:

.menu-drawer__navigation .menu-drawer__menu {
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;    
}
.menu-drawer__navigation .menu-drawer__menu li {
    width: 80%;
}

.menu-drawer__navigation .menu-drawer__menu li a {
    padding-left: 0 !important;
}
1 Like