How to Add Dividing Lines for mobile menu items?

Store Design
, ,

Topic summary

A user seeks help adding dividing lines between menu items in mobile view only for their Sense theme store.

Solution provided:

  • Navigate to Online Store > Themes > Edit Code
  • Locate base.css or theme.css file
  • Insert CSS code targeting mobile breakpoint (max-width: 480px)
  • Apply border-bottom property to menu item elements

Outcome:
The original poster confirmed the solution worked after adapting the suggested CSS code. The discussion appears resolved with a working implementation for mobile menu dividers.

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

Hello everyone! I’m trying to customize my mobile view only and need to add Dividing Lines between menu items. Does anyone know how to do that? I’m using Sense theme.

2

Hi @kolomiets_t Do the following steps to resolve this issue.

  1. Go to Online Store > Themes > Edit Code (Gear Box)
  2. Find base.css or theme.css
  3. Add below code at the end of the file.
@media only screen and (max-width: 480px){
.js .menu-drawer__menu li{
border-bottom: 1px solid #ccc;
}
}

Hope, it will fix the problem.

3

Hello, thanks! I played around with your suggestion and it worked:

@media only screen and (max-width: 480px) {
.list-menu__item {
border-bottom: 1px solid #ccc;
}
}

1 Like