[Resolved] Different menu for Home and other pages

Home Forums Support Different menu for Home and other pages

This topic contains 7 replies, has 2 voices, and was last updated by  David 2 months, 2 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #1197001

    TWMA Support


    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.



    David Customer Support

    Hi there,

    create a new Header Element:


    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


    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.



    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;

    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;

    TWMA Support

    Thanks for the help… all working nicely now.


    David Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.