In Webflow, how can I customize the navigation in fullpage.js to display numbers instead of bullets and have an active style for the current page?

To customize the navigation in fullpage.js to display numbers instead of bullets and have an active style for the current page in Webflow, you can follow these steps:

1. Create a new Collection in the Webflow CMS:

• Go to the Webflow Editor.
• In the "Collection" tab, click on the "+" button to create a new Collection.
• Give your Collection a name, such as "Pages," and add relevant fields, like "Page Title" and "Page Slug."

1. Add Collection items for each page:

• In the "Collection" tab, click on your newly created Collection ("Pages").
• Click on the "+" button to add a new item.
• Fill in the fields for each page, including the page title and page slug.

1. Create a new Navbar element:

• Go to the Webflow Designer.
• Drag and drop a Navbar component onto your page.

1. Inside the Navbar settings, change the navigation type:

• In the Navbar element's settings panel, change the "Navigation type" to "Full Page Scroll."

1. Customize the Navbar links:

• In the Navbar element, click on the "Add link" button to create a link for each page.
• For each link, click on the "Element Settings" panel to access its settings.
• Set the "Link type" to "Page."
• Choose the appropriate page from the dropdown menu.
• Check the "Add active class" option to enable the active style for the current page.

1. Customize the Navbar bullets to display numbers:

• In the Navbar element, click on the "Element Settings" panel to access its settings.

• Scroll down to the "Full Page Scroll Settings" section.

• Enable the "Show Bullets" option.

• Insert the following custom CSS code in the "Custom Attributes" field:

  ```css
  .fp-slidesNav li a span {
  display: none;
  }
  .fp-slidesNav li a:before {
  content: counter(page);
  counter-increment: page;
  display: inline-block;
  font-size: 14px;
  margin-right: 5px;
  }
  ```

1. Publish your site and test the navigation:

• Click on the "Publish" button to make your changes live.
• Test the navigation by scrolling between pages using the Navbar bullets.
• Verify that the active page has the desired active style.

By following these steps, you can customize the navigation in fullpage.js to display numbers instead of bullets and add an active style for the current page in Webflow.

Additional Questions:

1. How can I create a custom navigation menu in Webflow?
2. What are some other scroll animations I can apply to my Webflow site?
3. Can I have different page transitions in Webflow?