Main Nav CSS help - Borders on certain devices only

[PureCountryWeav]

My client would like a border around the nav. The first image is what I've been working on to mimic the second image, but I can't seem to make it flow properly.

How can I achieve this using custom CSS in shopify?

Theme: Impulse

Thank you in advance! 

[namphan · Accepted solution]

Hi @PureCountryWeav,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media only screen and (min-width: 769px) {
    .header-layout {
        border: 1px solid #fff;
    }
    .header-layout[data-logo-align=center] .header-item--logo {
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;
    }
}

[PureCountryWeav]

Thank you very much! That worked well for the header, I'll try something similar for the nav.

[namphan]

Hi @PureCountryWeav,

Please check and let me know. I will check it 😊