All things Shopify and commerce
Hello, I’m trying to display my menu items with a border around them.
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;}
}
Solved! Go to the solution
This is an accepted solution.
Hi @TrendBlend
Try this one.
@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!
This is an accepted solution.
Hi @TrendBlend
Try this one.
@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!
That works, thanks!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025