[Resolved] Site header/navigation help

[Alexander]

Hello Generatepress Team,

I am trying to achieve a shrinking sticky header that changes color.

• Regular navigation should be white background, black logo and nav links
• Shrunken sticky header black background, white logo, white nav links
• Mobile nav also sticky with black header and white logo.

When I change the background color for the navigation, which controls the background of the sticky header as well as mobile nav, the background of the regular navigation changes as well.
How would I go about replicating the color behavior of the site linked below (minus the redundant hamburgers of course)?

[Leo]

Hi there,

I think the easiest way to achieve this would be using the following steps:

– Create a merged header element:
https://docs.generatepress.com/article/transparent-header-and-navigation/

– Add the header offset to match your header height:
https://docs.generatepress.com/article/header-element-overview/#offset-site-header-height

– Use the custom navigation colors in the page hero set the color you want for the static (non-sticky) navigation (white or transparent):
https://docs.generatepress.com/article/header-element-overview/#navigation-colors

– The static site logo (black) can be uploaded in the customizer:
https://docs.generatepress.com/article/adding-header-logo/

– The sticky logo (white) can be uploaded as the sticky navigation logo:
https://docs.generatepress.com/article/sticky-navigation/#sticky-navigation-logo

– The sticky navigation color can be set in the customizer as the primary navigation color.

Let me know if this helps 🙂

[Alexander]

Thank you very much for the fast reply and detailed instructions!
It was super easy to do for the desktop menu and works brilliantly.
What I am now struggling with, is to get the mobile nav to be sticky (without shrink) with black background and white logo.
Currently it is switching just like the desktop nav and the background color settings for the off-canvas panel on mobile dont seem to be taking.

[Leo]

Can you link us to the GP site in question?

[Alexander]

Absolutely, here is a link. I also created an account for you but not sure how to send the credentials

http://plutoscene.lifeit.at/

[Leo]

Trying using merge on desktop only in the header element.

[Alexander]

Genius! That did the trick.
Now I am just struggling with the off-canvas menu.
Changing the background for Menu and Sub-Menu items no longer works.

Edit: Please disregard the issue with the canvas menu. Backgrounds not working was created by some custom css from a previous attempt at making the menu work.

Thank you very much for your outstanding support!
🙂

[Leo]

No problem 🙂

[Heinrich]

tks leo, saved my life today 🙂

[Author]

Posts