Skip to content
Related Articles

Related Articles

How to set active class to nav menu from bootstrap ?
  • Last Updated : 14 Dec, 2020

To set the active class to the navigation menu dynamically by scrolling or clicking on the navigation links, the active class is to be set on each section depending on the position of the webpage. To add methods and variables, JavaScript is used. To perform some action, the functions can be called on some events such as click and scroll.

Example: This example implements the approach mentioned above.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!doctype html>
<html lang="en">
  
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, 
        initial-scale=1, shrink-to-fit=no">
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
        integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
  
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous">
    </script>
  
    <script src=
        integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous">
    </script>
  
  
    <style>
        html {
            /*For smooth scrolling behavior*/
            scroll-behavior: smooth;
        }
  
        #home,
        #section1,
        #section2,
        #section3,
        #section4 {
            height: 70vh;
            text-align: center;
            font-size: 20px;
            padding-top: 50px;
        }
  
        #home {
            background-color: lightgreen;
        }
  
        #section1 {
            background-color: lightcoral;
        }
  
        #section2 {
            background-color: cyan;
        }
  
        #section3 {
            background-color: lightsalmon;
        }
  
        #section4 {
            background-color: lightseagreen;
        }
    </style>
</head>
  
<body>
    <!-- Creating Nav Bar  -->
    <section id="navigation">
        <nav class="navbar navbar-expand-sm 
            navbar-dark bg-dark fixed-top">
            <div class="container">
                <a class="navbar-brand" href="#" 
                    style="color:greenyellow;">
                    Geeks for Geeks
                </a>
  
                <div class=" navbar-default">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item ">
  
                            <!--Initially active class 
                                is set to home link -->
                            <a class="nav-link active" href="#">
                                Home
                            </a>
                        </li>
  
                        <li class="nav-item">
                            <a class="nav-link" href="#section1">
                                Section 1
                            </a>
                        </li>
  
                        <li class="nav-item">
                            <a class="nav-link" href="#section2">
                                Section 2
                            </a>
                        </li>
  
                        <li class="nav-item">
                            <a class="nav-link" href="#section3">
                                Section 3
                            </a>
                        </li>
  
                        <li class="nav-item">
                            <a class="nav-link" href="#section4">
                                Section 4
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
  
        <br><br>
        <!-- creating sections -->
        <section id="home" class="page-section">
            Home </section>
        <section id="section1" class="page-section">
            Section-1 </section>
        <section id="section2" class="page-section">
            Section-2 </section>
        <section id="section3" class="page-section">
            Section-3 </section>
        <section id="section4" class="page-section">
            Section-4 </section>
  
        <!-- JavaScript code -->
        <script>
  
            /* Code for changing active 
            link on clicking */
            var btns = 
                $("#navigation .navbar-nav .nav-link");
  
            for (var i = 0; i < btns.length; i++) {
                btns[i].addEventListener("click",
                                      function () {
                    var current = document
                        .getElementsByClassName("active");
  
                    current[0].className = current[0]
                        .className.replace(" active", "");
  
                    this.className += " active";
                });
            }
  
            /* Code for changing active 
            link on Scrolling */
            $(window).scroll(function () {
                var distance = $(window).scrollTop();
                $('.page-section').each(function (i) {
  
                    if ($(this).position().top 
                        <= distance + 250) {
                          
                            $('.navbar-nav a.active')
                                .removeClass('active');
  
                            $('.navbar-nav a').eq(i)
                                .addClass('active');
                    }
                });
            }).scroll();
        </script>
    </section>
</body>
  
</html>

chevron_right


Output:

  • While scrolling the webpage:
  • While clicking on nav links:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :