Skip to main content
B
beng2000
Known Participant
November 24, 2020
Answered

navbar ssi active

  • November 24, 2020
  • 3 replies
  • 1250 views

Hello All.  

I am using a Bootstrap 4 navbar that is a server side include.  Since the navbar is pulled from the server to each page - there are many - is there a way I can get the navbar to make the page it is on active/highligted in the navbar?

Thanks for your help..

    This topic has been closed for replies.
    Correct answer BenPleysier

    The answer is correct based on Bootstrap and jQuery.

     

    For a more expanded version, I use

    jQuery(document).ready(function($) {
  $(window).on('popstate pushstate', _update);

  _update();

  function _update() {
  	var url = window.location.href;

  	$('a.nav-link:not([data-toggle]), a.dropdown-item').map(function() {
   		$(this).toggleClass('active', this.href == url || this.href == url.split("?")[0].split("#")[0]);
  	});

    $('a.dropdown-item.active').map(function() {
      $(this).closest('.nav-item.dropdown').find('.dropdown-toggle').toggleClass('active');
  	});
  }
});

    3 replies

    B
    beng2000Author
    Known Participant
    November 28, 2020

    Thank you.  It works well.

     

    I want to ask you a question.  I have 3 menu items that are nav-items and 4 that are nav-item dropdowns.  The regular nav-items change color fine.  The drop downs don't. I think it is because I do not assign a link to the top dropdown.  I only assign them to the dropdown items  Do  you think that is why the dropdowns don't change color?

     

    See here.  Thank you for all of your help.  

     

    <li class="nav-item active">
    <a class="nav-link" href="index.shtml">Home <span class="sr-only">(current)</span></a> </li>
    <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> About </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
    <a class="dropdown-item" href="staff.shtml">Staff</a>
    <a class="dropdown-item" href="offices.shtml">Offices</a>
    <a class="dropdown-item" href="testimonials.shtml">Testimonials</a> </div>
    </li>

    O
    osgood_
    Legend
    November 28, 2020

    Have you tried Bens jQuery solution?

     

    That code is looking like it is addressing the senario where dropdowns are involved, so I think that will work for highlighting ALL the top-level nav items.

     

    My solution currently only highlights a top-level element where no dropdowns are used.  I'll have to go back to the drawing board on that one, when  I get time, as I didnt take dropdowns into consideration.

     

    As Bootstrap 4 by default uses jQuery you might as well take advantage of the jQuery solution specifically written for Bootstrap, as you are not introducing any extra page weight - the jQuery library is already available to the rest of the Bootstrap framework.

     

    B
    beng2000Author
    Known Participant
    November 28, 2020

    Ok.  Thanks so much for your help.  I appreciate it.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    November 25, 2020

    I realize now that you said Bootstrap 4.

    Try this:

    https://codepen.io/mikejandreau/pen/BbXKZV

     

    Nancy O'Shea— Product User & Community Expert
      O
      osgood_
      Legend
      November 25, 2020

      Is that answer correct?

       

      That solution only appears to be for a SPA (Single Page Applications - sections) i.e., it dont do anything apart from highlighting the links IF they are clicked and located on the same page.

       

      Assuming you are using the standard Bootstrap 4 navigation where the main navigation links each have the 'nav-link' class applied the javascript below will do the job (You can include it in your SSI navigation file)

       

       

      <script>
const url = window.location.pathname;
const pagename = url.substring(url.lastIndexOf('/')+1);
const links = document.querySelectorAll('.nav-link');
links.forEach(function(link, index) {
let current = link.href.substring(link.href.lastIndexOf('/')+1);;
if (current === pagename) {
links[index].classList.add('activeLink')
}
})
</script>

       

       

      Add the 'activeLink' class to your global css stylesheet:

       

      .activeLink {
      color: red!important;
      }

       

        BenPleysier
        Community Expert
        BenPleysierCommunity ExpertCorrect answer
        Community Expert
        November 25, 2020

        The answer is correct based on Bootstrap and jQuery.

         

        For a more expanded version, I use

        jQuery(document).ready(function($) {
  $(window).on('popstate pushstate', _update);

  _update();

  function _update() {
  	var url = window.location.href;

  	$('a.nav-link:not([data-toggle]), a.dropdown-item').map(function() {
   		$(this).toggleClass('active', this.href == url || this.href == url.split("?")[0].split("#")[0]);
  	});

    $('a.dropdown-item.active').map(function() {
      $(this).closest('.nav-item.dropdown').find('.dropdown-toggle').toggleClass('active');
  	});
  }
});
        Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
          Nancy OShea
          Community Expert
          Nancy OSheaCommunity Expert
          Community Expert
          November 25, 2020

          Yes.

          Which version of Bootstrap are you using?

           

          Nancy O'Shea— Product User & Community Expert
          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices