[Divi Walkthrough] One-Page Menu Navigation with Active Anchor Links + jQuery & CSS Snippets

Are you ready to elevate your website’s navigation game? In this advanced tutorial, I’ll show you how to create a sleek One-Page Menu Navigation with Active Anchor Links using Divi. We’ll be diving into jQuery and CSS, but don’t worry—I’ll guide you through each step of the process.

In this video, you’ll learn:

✔︎ How to set up a smooth scrolling navigation menu.
✔︎ How to highlight active sections as you scroll.
✔︎ How to use the provided code snippets to implement these features on your own site.

0:02:12 - Setting up anchor navigation in WordPress and Divi
0:08:31 - How the standard "Active Link" works in Divi
0:09:53 - Adding JavaScript to get the "active" CSS class
0:18:27 - Styling the active link with CSS
0:26:59 - Using the effect for a Table of Contents inside a Text module
0:38:15 - Explaining a bit more advanced approach with additional animation

Excited to see this in action? Our new Divi Child Theme, Identity, showcases this exact navigation setup. Perfect for creating a stunning one-page website!

If you found this tutorial helpful, please give it a thumbs up, and don’t forget to subscribe for more Divi tips and tricks!

This video was recorded live in my Divi Stylist Community, an exclusive space for Divi Stylist Academy students.

[elisandroborgesgyn]

Ania, you are absolutely awesome! I love your knowledge! You are so important to our Divi Community. Everything that comes from you is great: your communication and content are amazing! Thank you for existing in this world!

[accudoRamona]

For some reason the script didn't work when I put it into the child theme, but it worked beautifully when I put it into the head-element!

The explanation was super helpful, because I like to understand what the codes I paste into the sites actually do, just in case I ever run into issues :)

[juliad]

Thank you so much Ania. I have been trying to build a menu that is a combination of a 1 page menu and standard menu for years and was never able to find a tutorial on this. I even wrote in multiple Divi forums and no one was ever able to help. I am so grateful for this tutorial.

[MrPjderks]

Ania, Thank you! Great and very clear explanation, what is your power. I hope we will hear of you a lot in the future.🙂

[giannisiliopoulos]

Love your content colleague. Greta stuff and effort always...Keep it up 😘

[doeyehof]

Another great tutorial! Thank you very much, I love it!

Ania! Congratulations on this video! Very accessible and followable. It is beneficial for those who want to create a one-page navigation, but the logic can also be used from other page builders.

Ania! Gratuluję tego filmu! Bardzo przystępny i możliwy do naśladowania. Jest to korzystne dla tych, którzy chcą stworzyć nawigację jednostronicową, ale logikę można również zastosować z innych narzędzi do tworzenia stron.

[FBWD]

Excellent presentation. Code is well written. Your English is superlative, although you might want to pronounce menu as "min-yew" instead of "man-oo".