How to change Responsive Menu header Dynamically?

0
votes

I want to dynamically change the header of my responsive menu( i am using a dropdown menu) according to the current active item in the navigation. I already have bootstrap scrollspy implemeted, I just want the same activated navigation item , as my header. I need a way to get the current active navigation and then use it to change the html text inside the current id

<div class="menu toggle-menu">
                                <ul>
                                    <li id="current">Menu</li>
                                </ul>

                        </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="main-navigation responsive-menu">
                <ul class="navigation">
                <li><a class="toggle-menu" href="#home">Home</a></li>
                <li><a class="toggle-menu" href="#manf">Manufactory</a></li>
                <li><a class="toggle-menu" href="#dist">Distribution</a></li>
                <li><a class="toggle-menu" href="#partner">Partner Brands</a></li>
                <li><a class="toggle-menu" href="#barshala">BarShala</a></li>



                <li><a class="toggle-menu" href="#top" style="margin-top:30px">Team</a></li>
                <li><a class="toggle-menu" href="#career">Careers</a></li>
                <li><a class="toggle-menu" href="#contact">Contact Us</a></li>

            </ul>
            </div>
1
jqueryhtmltwitter-bootstrapscrollspy

1 Answers

1
votes

You can add JQuery event similar to below to change the title.

$('.responsive-menu').on('activate.bs.scrollspy', function () {
    var x = $("#navigation li.active > a").text();
     $("#current").html(x); // for changing the title of navbar
})