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

[SATTERWHITE ART]

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 -->

[BenPleysier]

Remove the active class and apply to the relevant link

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

[BenPleysier · Accepted solution]

Also remove the screen reader class and apply to the relevant link

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

[SATTERWHITE ART]

I understand the fix, Ben, and thanks for the response.

The crux of my inability to do as you suggest is as I stated in initial query, in that it is a library item.

If I change the library item, it propagates to all… and I can’t change the individual pages for the same reason; as a library item, they’re locked.

I will do without (that function) if it saves me the misery of having to manually alter all subsequent pages to follow.

Marked as correct, and again, thank you.

[BenPleysier]

Try this jQuery script

<script>

jQuery(document).ready(function ($) {

var url = window.location.href;

$('ul.nav a').map(function () {

$(this).parent().toggleClass('active', this.href == url || this.href == url.split("?")[0].split("#")[0]);

});

</script>

Add this to the library item and make sure that the jQuery library has been loaded prior to running this script.

[SATTERWHITE ART]

Ben,

I insert links to CSS in head, and JS just before </body> so that won’t work for me.

I think, all things considered, just using a template page with the navigation inserted looks like the best approach for me.

Very early in build, so understanding what I can and can’t do going forward (this is my first use of bootstrap framework) is important.

Appreciate the help…

[Nancy OShea]

I personally dislike Library Items because they limit where you can use them.  It's unclear if inserting a <script> in your LI will work in this situation.  It really depends on where your links to jQuery & Bootstrap JS files are located in your documents.  

I typically load JS files at the bottom of my pages.  In that situation, your <script> function will need to be inserted into the bottom of each page -- after the jQuery library.

[SATTERWHITE ART]

Nancy,

I also load all JS just before closing body tag, so I will just discontinue nav library use and include in a template page.

Thanks for the help…

[Nancy OShea]

If your build is still in early stages, use Server-Side Includes for navigation and other site wide elements (headers, footer, scripts, etc...)  SSI's are very flexible -- use anywhere in the document -- and efficient.  Simply edit one include file & upload it to your server.  Done. 

Alt-Web Design & Publishing: Server-Side Includes with PHP

With DW's proprietary Templates and Library Items, you must populate to child pages first, then republish your entire website.  It takes too long, even on smallish sites.  

Nancy