Add horizontal lines to menu bar on mobile - Supply Theme

[ProfileMusic]

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 🙂

[dmwwebartisan · Accepted solution]

@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!

[dmwwebartisan · Accepted solution]

@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!

[Kinjaldavra · Accepted solution]

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;
}
}

[ProfileMusic]

@Kinjaldavra @dmwwebartisan 

Thank you so much. That worked perfectly. Cheers

[Yeik]

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