Archived topic
Styling the sticky bar?
3 replies · Started by Perrin on December 9, 2018
Hey there :)
I'd like to replicate nav and sticky bars here: https://kinsta.com/blog/wordpress-5-0/
there is one main nav bar that is one color, but the sticky bar shrinks and turns white, etc.
Is there an option to style the sticky nav?
Thanks!
Hi there,
the easiest way is to use the Header Element
https://docs.generatepress.com/article/header-element-overview/
1. In the Customizer > Colors > Primary Navigation - set the colors you want for the Sticky Nav.
2. Dashboard > Appearance > Elements > Add New Header
3. Go to the Site Header Tab. Select Merged
4. Set the Offset Site Header to 77px (the height of your nav).
5. Then select the Navigation Colors and change the colors for the Primary Nav.
6. Display Rules - Set for the Entire Site.
Hey David,
Thanks for the reply. However, and I might be crazy, but I don't see anything options for the sticky nav in the primary nav color menu. I just see options for the primary nav and sub-nav.
Any ideas?
The Sticky Nav gets the colors from the Primary Navigation colors. But the changes you make using the Header Element only apply to the navigation when it is static.
So set the Primary Nav colors - this will be used for Static and Sticky.
Then change the colors in the header element and they will only effect the static nav.
