border under menu

Hi Jusung,

Yes, there's a way. In this code you have in Appearance > Customize > Additional CSS:

@media(min-width: 769px) {
    .main-navigation:not(.slideout-navigation) {
        padding-top: 30px;
    }

    .home .main-navigation:not(.slideout-navigation) .inside-navigation {
        border-bottom: 1px solid #848484;       
        padding-bottom: 10px;
    }
}

remove the .home.

This should make the border appear on all pages as opposed to just the Front Page.

On the front page, the border would be white. On other page, the border color would be black.
So, I need 2 code for the border I think..?

Maybe this works?
@media(min-width: 769px) {
.main-navigation:not(.slideout-navigation) {
padding-top: 30px;
}

.home .main-navigation:not(.slideout-navigation) .inside-navigation {
border-bottom: 1px solid #f4f2f3;
padding-bottom: 10px;
}

.main-navigation:not(.slideout-navigation) .inside-navigation {
border-bottom: 1px solid #000407;
padding-bottom: 10px;
}
}

that code seems working but the thing is that, on other page, the padding-bottom:10px is not applied..

Hi there,

try this CSS:

@media(min-width: 769px) {
    #site-navigation {
        padding-top: 30px;
    }
    #site-navigation .inside-navigation {
        border-bottom: 1px solid #000407;
        padding-bottom: 10px;
    }
    .home #site-navigation .inside-navigation {
        border-bottom: 1px solid #f4f2f3;
    }
}

Thank you!!

You're welcome