How to Control the Bootstrap Scroll spy

Question

I have developed single page website and i have used Bootstrap scroll spy in header navigation when scroll down particular section navigation menu item get underlined. I have used four menu items first and last menu underlined when scroll. But we scroll 3rd section 2nd section menu item is underlined. please anyone help me enter image description here If i click on to the Pricing menu item Feature item get underlined but Pricing menu should underline please help sir

Reference: http://floretmedia.net/temp/pbee/

.navbrdr .active {
    border-bottom: 4px solid #86bd3a;
}

<body id="lcp1" data-spy="scroll" data-target=".navbar" data-offset="70">
<header>
  <div class="custom-container">
    <div class="header-right">
      <div class="navbar-holder"> <!-- navbar-holder -->
        <nav class="navbar navbar-default"> <!-- navbar-inverse -->         
           <div class="navbar-header">
             <button type="button" class="navbar-toggle collapsed blue" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <div class="ease cf">
                <a class="navbar-brand" href="./">
                   <img src="images/logo.png" alt="sfatech Logo">
                </a>
              </div> 
           </div> <!-- /.navbar-header -->
             <div id="navbar" class="collapse navbar-collapse cf"> <!-- nav-collapse -->
                <ul class="nav navbar-nav navbar-right navbrdr">
                  <li class="active"><a href="./">HOME </a></li>
                  <li><a href="#features"> FEATURES </a></li>
                  <li><a href="#plans">PRICING</a></li>
                  <li><a href="#contact">CONTACT</a></li>
                  <li><a href="includes/enquiry_form.php" class="signup fancybox" data-fancybox-type="iframe">SIGN UP</a></li>                 
                </ul> <!-- /.navbar-nav -->

             </div> <!--/.nav-collapse -->           
         </nav> <!-- /.navbar-inverse -->
      </div> <!-- /.navbar-holder -->
   </div><!-- header-right -->
  </div><!-- custom-container -->
</header>

Can you add screenshot of the actual point where the issue is reproduced? — Bhagwan Parge, Sep 19 '18 at 06:52
If i click on to the Pricing menu item Feature item get underlined but Pricing menu should underline please help sir — Rashmi Kalmani, Sep 19 '18 at 07:17
You might want to take a look at this answer: https://stackoverflow.com/a/11814275/7384523, you can adjust the scrolling behavior in jquery that way you can extend the scroll further down to where scroll spy will target the correct div. — Steven Kuipers, Sep 19 '18 at 07:39

Gurmatpal · Answer 1 · 2018-09-21T06:28:49.483

0

when you click on the Pricing or Feature menu your navigation is not touching your ID of the section. That is why is not working.

If you have checked when you scroll it is working fine, this is because it is touching your ID of the section.

edited Sep 21 '18 at 06:28

answered Sep 19 '18 at 07:44

Gurmatpal

134
8

I have used the above code but back to top script is not working and when click menu item smooth scroll in not working please any one help me – Rashmi Kalmani Sep 20 '18 at 10:06

How to Control the Bootstrap Scroll spy

1 Answers1