Streaming live at 10am (PST)

Fullpage-js Navmenu current link effect


#1

Hello friends, I have a tricky question. I have a fullpage-js implemented with a navigation menu. What I want is to highlight the current link when its section is on the screen.

Here is the website: http://alexanders-exceptional-project-a771ec.webflow.io

Here is the preview: https://preview.webflow.com/preview/alexanders-exceptional-project-a771ec?preview=036d4f269e490d5927c973883474d556

Do you have a smart way to apply an effect to the current link in form the menu, for example, I would need to scale it to 1.5 and back to 1 when we move to another section.

Thank you in advance!


#2

Yes. See https://github.com/alvarotrigo/fullPage.js#state-classes-added-by-fullpagejs


#3

I’m not a developer, could you please provide me an example? I read the documentation but I don’t understand how to use it. What code to copy and where. What I need is to be able to set an animation from Webflow for my nav menu and affect the fullpage-js in the same say I can set an animation for a classical Webflow website.

Thank you!


#4

Sorry, I do not provide tutorials. You’ll have to try something first.

You can also request a consultation for code help and/or customization of third-party plugins.


#5

I can suggest a cheat for this. Create same nav menu on top of your original. Give IDs to each section, Use anchors #p1 p2 p3 for the each link on the nav menu to address that section. And there you have highlight. It is easiest way around the code.

For your original nav menu. you can hide it, entirely. But I suggest doing it exactly same. Do not change anything from the original(layout wise). Or finish all design then duplicate as new class.