[Resolved] border under menu

[Jusung]

I made a border under menu and it is well showing on the front page.
However, in other page, the border under menu is gone.

Is there a way to make the border appear in other page?

[Fernando]

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.

[Jusung]

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..?

[Jusung]

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

[Jusung]

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

[David]

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

[Jusung]

Thank you!!

[David]

You’re welcome

[Author]

Posts