Sticky and Transparent Header
Create sticky headers that keep navigation accessible while scrolling, and transparent headers with navbar colors that automatically adapt to any background.
In YOOtheme Pro, you can make the navbar stick to the top of the viewport when scrolling. Or hide it while scrolling down and show it again only when scrolling up, keeping the navigation accessible without taking up space.
You can also make the header transparent across all pages with just one click, even when it is sticky. Alternatively, enable a transparent header only for individual hero sections, for example when using an image or video background on the home page. If the header is sticky, the default navbar appears once you scroll past the hero section and becomes transparent again when the hero section comes back into view.
The transparent header automatically adjusts its text color depending on the background. Optionally, you can color the left and right parts of the navbar separately for more design flexibility. When switching between YOOtheme Pro styles, the text colors update automatically, so the navigation always looks great. For image and video backgrounds, you can define the navbar text color manually to ensure perfect contrast.
When used with dropdowns, the navbar remains transparent while the menu opens as usual. With dropbars, the transparency is removed to create a seamless look. For individual transparent navbars, opening the dropbar switches to the default navbar, while always-transparent navbars take their color from the dropbar.
And of course, the entire header layout and behavior can be customized separately for mobile devices.
