- This topic has 7 replies, 2 voices, and was last updated 2 weeks, 4 days ago by Leo.
September 4, 2020 at 12:21 pm #1431139Alexander
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)?September 4, 2020 at 12:49 pm #1431158LeoStaffCustomer Support
I think the easiest way to achieve this would be using the following steps:
– Create a merged header element:
– Add the header offset to match your 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):
– The static site logo (black) can be uploaded in the customizer:
– The sticky logo (white) can be uploaded as the sticky navigation logo:
– The sticky navigation color can be set in the customizer as the primary navigation color.
Let me know if this helps 🙂September 4, 2020 at 1:32 pm #1431212Alexander
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.September 4, 2020 at 1:34 pm #1431214LeoStaffCustomer SupportSeptember 4, 2020 at 1:49 pm #1431227Alexander
Absolutely, here is a link. I also created an account for you but not sure how to send the credentialsSeptember 4, 2020 at 1:51 pm #1431229LeoStaffCustomer SupportSeptember 4, 2020 at 2:06 pm #1431248Alexander
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!
🙂September 5, 2020 at 1:09 pm #1432299
- You must be logged in to reply to this topic.