[Support request] Semi-Transparent Main (Sticky) Navigation?

[Alan]

I really like the way this main navigation works on the following site:

https://www.colorhousegraphics.com/

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!

[David]

Hi there,

you can do this with GP Page Headers, here is the overview:

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

Quite a few related articles, but this is what you need to merge them with your site header:

https://docs.generatepress.com/article/merging-the-page-header-site-header/

For the sticky Navigation that can be enabled in the Customiser > Layout > Sticky Navigation

[Alan]

So the blue strip that contains the main navigation, what is that called in the settings?

[David]

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.

[Alan]

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.

[David]

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.

[Alan]

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.

[David]

Are you able to provide a link to the site?

[Alan]

No, I’m doing it on my computer (localhost).

[David]

Its really trick to diagnose without seeing it.
Just to run through – so you created the Page Header and assigned this to the page? And that is displaying correctly?

[Alan]

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.

[Tom]

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?

[Alan]

[Tom]

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?

[Alan]

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.

[Author]

Posts