Highlighting menu items on scroll

  • ghassanalqazzaz

    (@ghassanalqazzaz)


    9 years, 5 months ago

    Hello forum,

    as the title says, I would like to highlight the menu items while the user scrolls in order to show the user in which section they are currently. I am aware of the fact that this requires a jquery function on scroll, the issue is I would like more insight on how to target the elements in question.

    Any help is appreciated.

    Thanks in advance

Viewing 2 replies - 16 through 17 (of 17 total)
1 2
  • Thread Starter ghassanalqazzaz

    (@ghassanalqazzaz)

    9 years, 5 months ago

    All I keep getting is all of the menu elemnts having a red background with yellow text. It does not change with scrolling.

    Thread Starter ghassanalqazzaz

    (@ghassanalqazzaz)

    9 years, 5 months ago

    Hi, I now realize what the issue is and why your provided css didnt work in my case.

    The issue lies within the .current-menu-item class, it is assigned to all of the menu items, thus causing all of them to be highlighted, my solution is to add .active class to each menu item to target it since i have the class .active already defined in my style.ss

    The problem I am facing is that none of the menu items are being assigned .active, if I use the developer tools in Chrome and inspect one of the menu items, the classes include “.current-menu-item” but not “active”, if I manually type in active in the class section of the menu item, then the “.active” styling is applied.

Viewing 2 replies - 16 through 17 (of 17 total)
1 2

The topic ‘Highlighting menu items on scroll’ is closed to new replies.