Archived topic
Different menu for Home and other pages
7 replies · Started by TWMA Support on March 17, 2020
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
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
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
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;
}Thats great thanks David. Now just need the hamburger menu to stay blue on scroll and I think I am done...
Try this:
.home .main-navigation.sticky-navigation-transition .main-nav > ul > li.slideout-toggle > a {
color: #1e73be;
}Thanks for the help... all working nicely now.
You're welcome
