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?

How can I remove the duplicated embedded code on my Webflow site?

In Webflow, is it possible to change the text of a fixed heading when hovering over a specific project without using custom code?

Is it possible to create a 3 column slider with Webflow where the first and third columns are 15% width and the middle column is 70%?

Is it possible to create a form in Webflow where a user can enter their name and email address, and upon submitting the form, a PDF file will automatically begin downloading?

How can I fix the issue of fonts being greyed out in Webflow's file uploader?

How can I access and take control of the webflow theme's assets that are being flagged for potential savings in terms of unused CSS and Javascript?

Is it possible to remove or resize the "built with webflow" banner that appears on the right side of my website when viewed on a tablet?

In Webflow, where do I put the CSS, HTML, and JS code for a countdown timer if I am using Webflow as a host?

How can I turn my Webflow experience into a pseudo desktop app to minimize distractions and have more canvas space?

How can Webflow help me disable bounce scroll, zooming, and other default browser features for my mobile platform?