[Resolved] Different menu for Home and other pages

Home Forums Support Different menu for Home and other pages

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1197001
    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

    #1197023
    David
    Staff
    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

    #1197068
    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

    #1197139
    David
    Staff
    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;
    }
    #1197249
    TWMA Support

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

    #1197460
    David
    Staff
    Customer Support

    Try this:

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

    Thanks for the help… all working nicely now.

    #1197581
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.