Wix Sticky Header One Minute Tutorial for 2020
Watch how we create a Sticky Header by using 3 strips; 2 for the Header and 1 transparent to be positioned on every page of the website to call for the switch between the two strips in your Header.
To get the code or to read the step by step instructions please visit: https://www.dkm.agency/post/wix-sticky-header-tutorial-one-minute-2020
—–
Other helpful guides to header design::
1. Click the header.
2. Click Change Header Design.
3. Select a preset design or click Customize Design.
4. Use the options to customize the header design:
– Fill Color & Opacity: Select the header’s colors and opacity.
– Border: Design your header’s borders.
– Corners: Round your header’s corners.
– Shadow: Design a shadow for your header.
– Spacing: Customize the header spacing.
—–
Changing the header scroll setting::
1. Click the header.
2. Click the Settings icon
3. Select a scroll setting:
– Scrolls with site: Your header is always at the top of the site and moves up and down with the page.
– Freezes: Your header remains on top of the page. This allows your site visitors to easily access your site menu without scrolling back to the top. We recommend keeping the height of your header small so it doesn’t cover any element or content when visitors scroll through your site.
– Disappears: When you visitors scroll through your site, the header disappears. For the header to reappear, your visitors need to start scrolling up.
– Fades out: The header slowly fades out when your visitors scroll through the site and reappears when they start scrolling back to the top.
_____
IMPORTANT NOTE regarding the freeze scroll effect:
If your header has too much content and is too big on mobile, the freeze scroll effect is disabled on the live mobile site. This is because when set to frozen, the header would cover the entire viewport of the mobile device and the rest of the site content would not be visible at all.
