Customized navigation with fullpage.js

Design help Animations & Interactions
1

Hi everyone !

I use fullpage.js on my website and I’d like to use a customized navigation instead of the default bullets. Here is the link : Justine Wargnier | Identité de marque & Site Shopify, I’d like to use the “01”, "02, “03”,… as my navigation, and to create an active style on the active number page (make the font bigger and set it in pink).

Anyone who can help ?

Thanks a lot,
Justine.

2

Custom menu (by embed html or by webflow):

<ul id="myMenu">
	<li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
	<li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
	<li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
	<li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>

js

<script>
new fullpage('#fullpage', {
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
	menu: '#myMenu'
});
</script>

menu : (default false ) → but you can set the menu mannualy + you must set the anchors.

fullPage.js add active the corresponding element in the menu class.

Docs:

3

Hey @Siton_Systems,
Thanks for your answer ! So I created a custom menu like you said, styled it with the right CSS but it still doesn’t work… And now the link between the pagination and the sections is broken.
Do you know what I did wrong ?

Edit : it worked, something was wrong in my CSS, thanks again !

1 Like
5

For future reference, if you like any of the ones available in the navigations package that fullpage.js provides, you can integrate them quite easy.
You can see all the different navigations here:

1 Like