- This topic has 18 replies, 3 voices, and was last updated 3 years, 2 months ago by Alan.
July 28, 2018 at 6:28 am #634608Alan
I really like the way this main navigation works on the following site:
You see how the main navigation at the top is overlaying the main header graphic (it’s semi-transparent, and it is placed 30 or so pixels below the top of the page, so as to reveal part of the image there). I like how, when you start to scroll down, the main navigation strip reduces to a smaller size and then sticks to the top of the page.
Is it possible to replicate this with GeneratePress Premium, or do I need an additional plugin?
If it’s possible, are you able to give me some basic steps on how to do it, or if there’s already a video or other tutorial, could you link it for me?
Thanks in advance!GeneratePress 2.1.3GP Premium 1.6.2July 28, 2018 at 6:35 am #634613DavidStaffCustomer Support
you can do this with GP Page Headers, here is the overview:
Quite a few related articles, but this is what you need to merge them with your site header:
For the sticky Navigation that can be enabled in the Customiser > Layout > Sticky NavigationJuly 28, 2018 at 6:41 am #634616Alan
So the blue strip that contains the main navigation, what is that called in the settings?July 28, 2018 at 6:54 am #634621DavidStaffCustomer Support
OK – so thats the Primary Navigation. Follow these steps:
1. Customiser > Layout > Primary Navigation – Set the nav to full width. and inner content to contained. Position Below Header and add your Navigation Logo.
2. Customiser > Colors > Primary Navigation – Set background color which you can set to transparent.
3. Customiser > Layout > Sticky Navigation – enable this and select a transition if you want.
Then create your page header and use the documentation above to set it to merged.July 28, 2018 at 7:40 am #634675Alan
Thank you, David.
One more thing. Look again at the sample page I am trying to mimic. Do you see how at first, when the primary navigation is large, it is semi-transparent? Then when you scroll down, the background of the primary navigation becomes solid, so that as you scroll down the page, the items on the page don’t bleed through. I’m not able to achieve that. The primary navigation stays semi-transparent after it’s been reduced in size and stuck to the top.
Is there a way to make the background of the “stuck” menu solid?
ALSO: The logo ONLY appears when the menu goes sticky. In other words, before you start scrolling, no logo is visible. How do I fix this? Thanks, and sorry for all the questions.July 28, 2018 at 8:14 am #634762DavidStaffCustomer Support
OK, so in the Colors > Navigation make your color solid, this will be used for both normal and sticky. Then in the Page Header Advanced you can change the nav colors to transparent. Which will only apply to the unstuck version.
If you add a logo to your navigation another option appears below it where you can set it to sticky and static.July 30, 2018 at 4:27 am #635872Alan
OK that doesn’t work. I went to:
Customize>Colors>Primary Navigation and set the background color to #daf7d4
Then I went to my Home Page Hero page header.
Merge with site header is on.
Custom Navigation Colors is on and Navigation Background color is set to #daf7d4 at 80 opacity (or so, the slider doesn’t really tell me the percentage).
When all that is saved and published, the navigation background is solid both in its stuck and unstuck states.
Another thing, which may require a new topic, is that my header image does not take up the full width of the browser, nor does it go all the way to the top of the browser. This in spite of all settings I know of being set to “full width.” It seems that there is a setting somewhere I’m missing, but I can’t find it.July 30, 2018 at 5:57 am #635932DavidStaffCustomer SupportJuly 30, 2018 at 6:00 am #635934Alan
No, I’m doing it on my computer (localhost).July 30, 2018 at 6:51 am #635966DavidStaffCustomer SupportJuly 30, 2018 at 6:55 am #635972Alan
Yes, that is correct. Except, as I said, the image in the header doesn’t go full width. Nor can I get the sticky menu semi-transparent, separately from the non-sticky menu, even though I believe I have followed your directions very carefully.July 30, 2018 at 9:47 am #636243TomLead DeveloperLead Developer
Any chance you can share a screenshot of your “Advanced” Page Header settings, and the front end of the page with the Page Header added?July 30, 2018 at 10:36 am #636280Alan
July 30, 2018 at 8:29 pm #636591TomLead DeveloperLead Developer
Hmm, was hoping that would give me a hint. Sorry!
Unfortunately I think we’d actually need to see the site in this case. Any chance you can import it to a live server temporarily?July 31, 2018 at 4:42 am #636837Alan
You know what, I think I’ll just lay GeneratePress aside for now and explore other themes that are hopefully easier to work with. Honestly I wasn’t expecting something this simple to be this hard. Thanks for the help, and I may come back and try again before my 30 day trial period is over.
- You must be logged in to reply to this topic.