How to create a responsive menu

How to create a responsive menu
0

#1

I am trying to code a responsive menu.
this is my code link:https://codepen.io/sarah870102/pen/aEoNaa

the page is divided into three sections: ABOUT, PORTFOLIO and CONTACT.
the menu on the right-top of the page is linked to the different sections.

I want to realize the function that the menu linked to someone page section shown in the monitor will highlight when a user is scrolling the mouse.

I have no idea how to achieve the function by Bootstrap.Please give me some help. Thanks a lot!


#2

Hi @Sarah, I forked your pen here : https://codepen.io/bansal/full/mpbrvz/

To update our navigation accordingly and move the .active class from one item to the next based on their associated target, I have used the Bootstrap 4 Scrollspy. More information below:

I followed following steps in doing so:

  1. Gave an id of say navbar-id to the parent of the div containing our navigation.
  2. Applied some attributes on body tag like:
    data-spy=“scroll” data-target="#navbar-id" data-offset="50"
    Here the data-target should match with the id set in step 1.
  3. Set the position relative on body (css).
  4. Set the class of nav-link on the anchors of the navigation.

Hope this helps.


#3

I did it with your help, thanks a lot!