Seamless Page Tabs
Description
Each icon on this fixed nav element links to a new page which loads seamlessly.
This is valuable for analytics or conversion tracking while keeping the experience seamless.
Responsive menu adapts to bottom of screen on mobile for ease of use as well.
Enjoy!
____________
To customize the menu -
1- Open the symbol and change the icon image and label
2- Change individual page names to match menu labels
3- Change accent color swatches
4- Build out page content
To add a new page -
1- Copy the "icon wrap" element in the menu to create a new page link
2- Edit the icon image and label
3- Be sure "Menu transition" interaction is active on the icon wrap link
4- Create a new page and add a page load animation
4.1- When page starts loading should be set to - "Page Loader" interaction
4.2- When page finishes loading should be set to - "Page Open" interaction
Leave a comment if you have any questions and check custom code section for Javascript snippet.
Feeling inspired?If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.
We miss comments too!
Right now, Made in Webflow doesn't offer all of the same functionality that Showcase did, like the ability to leave comments. But don't worry: We're working to bring comments back as soon as possible!
As always, we'd love to hear your feedback! Click the link below to take a short survey about Made in Webflow.