Overview
Sometimes permanent visibility is good, but in other cases you might want a discrete header that moves out of the way when scrolling down. For both these cases, we have one solution, so checking out the Header’s transparent and sticky states is what wea re going to do in this video tutorial.
Note: if you want to be able to use these features you need to install and activate the Companion Plugin.
We’ll begin with the transparent header and the prerequisites for making it look good and seamlessly blend into the content below. In order to achieve the desired effect, transparent headers should only be enabled on pages with a large hero block since the content of the hero section will bleed through the header background. If you have important information immediately below the header, it might lose visibility and that’s the exact opposite of what we are trying to achieve.
This condition met, you can now enable the transparent header from the Customiser -> Header -> Headers tab. After switching on the transparent functionality, the header display conditions and visibility become available within the same panel. The display conditions are especially useful if you want to display the transparent header on pages that would benefit from having one.
Now for the Sticky Header functionality. Enabling it is done in the same way and in the same section of the Customiser and its settings are pretty straightforward. You can select which rows are stickied at all times. We have included a set of neat animations for when the header transits into the sticky state, just for that extra pizzazz 🙂
Another cool feature is the one that lets your rows shrink when entering the sticky state and you can access it while customising the rows themselves. And to bring a bit of synergy into the mix, we have added the same functionality to the logo. When all parts are moving in the same direction, it gives an increased sense of fluidity and that’s something we can all get behind.
Speaking of which, you should check out the other header elements as almost all of them have design options available for the header state. Play around with the settings and see which one works best for your awesome website!