[Resolved] Logo and Sticky Menu

[Keith]

I am building a site and on the home page I want the site logo to NOT BE on the navigation at all, and the navigation centered. I’ve used CSS to hide the logo on the home page, but am not sure how to get the navigation to center ONLY on the home page. The other pages have the navigation as I want it.

[David]

Hi there,

try this CSS to remove the logo and center the nav for just the home page:

.home .site-logo {
    display: none;
}
.home .inside-header {
    display: flex;
    justify-content: center;
}

[Keith]

That worked awesome! Thank you. Is there a way to hide the logo and center the navigation for the sticky menu on the home page? I tried the below to hide the logo and it didn’t work.

.home .sticky-navigation-logo {
    display: none;
}

[David]

And this:

.home .main-navigation.navigation-stick .inside-navigation {
    justify-content: center;
}
.home .main-navigation.navigation-stick .navigation-branding {
    display: none;
}

You will need to increase the sticky navigation menu item height in the customizer.

[Author]

Posts