Different menu for Home and other pages

[TWMA Support]

Hi

Please have a look at the following site > http://thecaskreserve.staging.wpengine.com/

You will notice that both the Home page and the general contact pages both have the same header with slide out menu. What I would like to achieve is that on the home page there is no menu background colour or emblem (top left), but only the page content and the hamburger slideout menu (sticky). On the general content pages I want the menu header bar with the emblem and colour strip with the hamburger slide out menu (also sticky).

I have tried looking at using the headers tool but it seems that the menu settings are site wide in the customiser. so spinning my wheels a bit.

Thanks
Jon

[David Customer Support]

Hi there,

create a new Header Element:

https://docs.generatepress.com/article/header-element-overview/

Within go straight to the Site Header tab and enable Merge with content. Then check the Navigation colors option where you can now set the background to be transparent etc.

Then on the Display Rules set which pages etc. you want it to apply to. For the Home page there is a specific display rule of Front Page

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[TWMA Support]

Thanks for the above, very helpful. The only thing I am struggling with now is…

– Remove the emblem on the top left of the home page
– Remove the background colour of the menu when you scroll the home page.

Thanks

[David Customer Support]

Try this CSS:

.sticky-enabled.home .main-navigation.is_stuck {
    background-color: transparent;
}
.home .navigation-branding {
    display: none;
}

.home .main-navigation:not(.slideout-navigation) .main-nav {
    margin-left: auto;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[TWMA Support]

Thats great thanks David. Now just need the hamburger menu to stay blue on scroll and I think I am done…

[David Customer Support]

Try this:

.home .main-navigation.sticky-navigation-transition .main-nav > ul > li.slideout-toggle > a {
    color: #1e73be;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[TWMA Support]

Thanks for the help… all working nicely now.

[David Customer Support]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts