Border shows double

Shopify Discussion
,

Topic summary

A Shopify store owner encountered an issue where menu items displayed with unwanted spacing between dotted borders on mobile devices, creating a disconnected appearance instead of continuous borders.

Original Problem:

  • Menu items had individual borders with gaps between them
  • Issue only affected mobile view (max-width: 768px)
  • Store URL: interiorglows.com

Solution Provided:
Modify the CSS in the theme’s stylesheet (base.css, style.css, or theme.css) by:

  • Applying border-top to all menu drawer items
  • Adding border-bottom selectively to specific list items (5th, 8th, and the outdoor lighting link)
  • This creates continuous borders without gaps

Outcome:
The solution was successfully implemented and resolved the spacing issue. The thread is marked as resolved.

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

Hello, I’m trying to display my menu items with a border around them.

IMG_3834.jpeg
IMG_3834.jpeg1179×2556 209 KB

But there is a bit of space in between the borders but I want them to collide instead of the space in between FOR PHONE.

URL: https://interiorglows.com at the menu

Current code:

@media (max-width: 768px) {> .list-menu__item {> border: 1px dotted #374049;> > }> > }

1 Like
2

Hi @TrendBlend

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media (max-width: 768px) {
.menu-drawer__menu .list-menu__item {
border-top: 1px dotted #374049;

}
.menu-drawer__menu li:nth-child(5), .menu-drawer__menu li:nth-child(8), 
a#HeaderDrawer-lighting-lamps-outdoor-lighting{
    border-bottom: 1px dotted #374049;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

That works, thanks!