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 fix the issue of my site directing users to the "Access Denied" page instead of the "User Log-In" page when they log in or out on Webflow?

Can someone assist me with resolving an overlapping issue in my 2 column grid in Webflow?

How can I dynamically hide/show a section in Webflow based on the time of day?

How can I edit only the labels in a Webflow slider nav without affecting the width of the lines?

How do I create a dynamic dropdown list in Webflow that links to each item in a collection?

Is it possible to swap out icons in a button component in Webflow without detaching the component or compromising the ability to change the color of the SVGs?

Can Webflow natively control the color of a brand/logo based on the background or a mask?

What is a workaround to quickly test a piece of code in Webflow without needing to save, close the panel, and publish?

What could be causing the navigator to be off the right edge of the screen and the presence of a width corridor on the right hand side on the mobile site after publishing in Webflow?

Can anyone suggest an alternative solution or provide guidance on how to create static, curved menu links without using circletext.js in Webflow?