Add horizontal lines to menu bar on mobile - Supply Theme

Store Design
1

Hey,

Currently on mobile on my website (https://store.profilemusic.net.au/) when you click into the menu bar, there are no horizontal lines between all the options (home, records etc).

There is too much white so we are wanting to add horizontal lines between each option. I’ve attached an example of what we are looking for. See the horizontal line between home & records, then records & genres, etc.

Is there a code we can add to make this happen? Cheers :slightly_smiling_face:

IMG_20210615_140309.jpg
IMG_20210615_140309.jpg1242×2208 95.7 KB

2

@ProfileMusic

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media screen and (max-width: 768px){
ul#accessibleNav > li {
    margin: 0 25px 0 30px;
    text-align: left !important;
    border-bottom: 1px solid #dcdcdc;
}
}

Hope this works.

Thanks!

3

hello @ProfileMusic

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 769px){
#accessibleNav  li {
    margin: 0 25px 0 30px;
    text-align: left !important;
    border-bottom: 1px solid #dcdcdc;
}
}
4

@Kinjaldavra @dmwwebartisan

Thank you so much. That worked perfectly. Cheers

5

Hey dude I am currently trying to figure out how to do that menu in the 3 lines, anyway you could help?