Login

Highlight Active Menu On Page Scroll

Preview demo
Desktop
Mobile

Description:

active-menu-link is a pure JavaScript smooth scroll & scrollspy library which highlights the active menu item based on the scroll position.

A typical use of this library is to create a sticky header navigation for your single page app that allows the user to smoothly scroll through page sections while highlighting the active menu item.

Reference source: https://github.com/Kosalexei/active-menu-link

How to use it for brizy cloud:

  1. Create menu links with anchor #name-id1, #name-id2, #name-id3,...
  2. Add ID name-id1, #name-id2, #name-id3,... for anchor somewhere
  3. Add menu element and set id="brz-menu__scrollspy"

Code

This content has been hidden.

Please Donate or Complete Survey (advertisement) to unlock free.

Download demo

Insert to head

<script src="https://cdn.jsdelivr.net/gh/webcode24h/libs@main/brizyplus/navibar_scrollspy/active_menu_link_v1.js"></script>

Apply your own styles to the active menu item.

#brz-menu__scrollspy .brz-menu__ul li a.active {
    background-color: #F69322!important;
    position: relative;
   }
Download demo

How to use it

Download file demo.zip, upload to Brizy. Done (Then you can see the css code from here)

  1. Click download demo.zip
  2. To import, go to a page >> click on "add a new block" >> select "saved" tab >> click on "import new block" >> Upload your zip file >> Completed.
  3. Customize to your fancy. Watch the video tutorial here

*Note: License Pro is required for the functions to work

Key word:

highlight active menu for brizy cloud, how to create a scrollspy for brizy cloud

Free

Published by Philip

Future update

Lifetime support

Live chat - Setup support

Compatible with BrizyCloud & WP

Join premium membership to unlock all pages (no ads)