Proper use of “active” class in library item, bootstrap navbar

DW CC 2017

Bootstrap framework

Re: navbar-inverse as library item

li class “active” on index.html in library item results in every linked page visited always shows “HOME” tab highlighted.

I have not found a way to initiate activation on actual page visited while using as a library item. Considering removing the “active” class from library item, and will do so if necessary.

Question; Is there a simple way to instruct tab to indicate different active pages when using as a library item?

Thanks…

<!-- #BeginLibraryItem "/Library/main-navbar-top.lbi" -->

  <div class="container-fluid" style="margin:0 -15px 0 -15px">

    <nav class="navbar navbar-inverse">

      <div class="container-fluid">

         <div class="navbar-header">

          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#inverseNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>

          <!--IMAGE BRAND-->

          <img src="../../images/GL-logo-brand.png" alt="" width="150" height="30" class="img-responsive" />

          <p class="text-left" style="color: limegreen; font-size: 1em; margin-left:.75em;margin-top:-8px;padding-left:0;">Green Light Property</p>

        </div>

        <div class="collapse navbar-collapse" id="inverseNavbar1">

          <ul class="nav navbar-nav">

            <li class="active"><a href="../../index.html">HOME<span class="sr-only">(current)</span></a></li>

            <li><a href="#">ABOUT</a></li>

            <li><a href="contact.html">CONTACT</a></li>

            <li><a href="#">INVESTMENT</a></li>

            <li><a href="#">PROPERTIES</a></li>

          </ul>

          <ul class="nav navbar-nav navbar-right">

            <li><a href="#">INQUIRE</a></li>

            <li style="color:limegreen;width:150px;text-align: center; margin:15px;padding:5px;border:thin solid white;”>(XXX) XXX-XXXX</li>

          </ul>

        </div>

      </div>

      <!-- /.navbar-collapse -->

    </nav>

  </div>

  <!-- #EndLibraryItem -->