How can I add vertical navigation dots using Fullpage.js on my Webflow website?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To add vertical navigation dots using Fullpage.js on your Webflow website, you can follow these steps:

Install and set up Fullpage.js:

Download the Fullpage.js library files from their official website or use a CDN link.
Include the Fullpage.js script in the <head> section of your Webflow website.
Initialize Fullpage.js by calling the necessary functions in a separate script tag.

Create a section for each vertical section in your website:

In the Webflow Designer, create a new section for each vertical slide you want to have.
Customize the design and layout of each section as desired.

Add the navigation dots:

Inside the custom code section of your project settings, add a script tag.
Use the Fullpage.js API to enable the navigation dots and customize their appearance.
For example, you can use the navigation option to enable the dots and navigationPosition to set the position (e.g., right, left, top, bottom).
You can also customize the styling of the navigation dots using CSS to match your website's design.

Test and refine:

Preview your website to test the Fullpage.js functionality and navigation dots.
If needed, make adjustments to the Fullpage.js options or the design of your sections to achieve the desired result.
Continue to refine and optimize until you are satisfied with the vertical navigation dots on your Webflow website.

In summary, to add vertical navigation dots using Fullpage.js on your Webflow website, you need to install and set up Fullpage.js, create sections for each vertical slide, add the navigation dots using Fullpage.js API, and customize their appearance and position. Testing and refining the design will help ensure the navigation dots work effectively on your Webflow site.

Additional Questions:

How do I customize the appearance of the Fullpage.js navigation dots in Webflow?
Can I have horizontal and vertical navigation dots on my Webflow website using Fullpage.js?
Are there any other plugins or alternatives to Fullpage.js for adding vertical navigation dots in Webflow?

Is it possible to identify each form submission based on which button was clicked in Webflow?

Where can I find code or a solution to add a 'view' counter for each person clicking on the tiles on my Webflow website?

How can I recreate the image hover effect from the "List-contain" section of the Webflow project in my own project?

How can I pass in a parameter into a button URL in my Webflow unified menu component that is different for each page?

Why are the bullet points in the LIST ITEMS not showing up in the Fitnesso template in Webflow?

How can I remove the leftover lines created when removing columns and rows in Webflow's CSS Grid?

Is there a way to replace the standard dropdown product color variant in Webflow with a simple color circle?

Is there a way to add an .mp4 background video loop to a Div Block on a page in Webflow?

Can Webflow dynamically load SVG files for a dynamic header?

Can you provide guidance on how to update the product variant in Webflow using custom jquery code?