Skip to main content
Anonymous
Nov 24, 2020 10:34 PM UTC
Answered

navbar ssi active

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 is closed to new replies. Start a new post to keep the conversation going.
    BenPleysier
    BenPleysierCorrect answer
    Community Expert
    Nov 25, 2020 2:20 AM UTC

    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!
    View reply

    23 replies

    Anonymous
    Nov 28, 2020 12:07 AM UTC

    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>

    Translate
    osgood_
    Legend
    Nov 28, 2020 10:41 AM UTC

    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.

     

    Translate
    Anonymous
    Nov 28, 2020 7:14 PM UTC

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

    Translate
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    Nov 25, 2020 12:17 AM UTC

    I realize now that you said Bootstrap 4.

    Try this:

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

     

    Translate
    Nancy O'Shea— Product User & Community Expert
      osgood_
      Legend
      Nov 25, 2020 1:40 AM UTC

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

       

      Translate
        BenPleysier
        Community Expert
        BenPleysierCommunity ExpertCorrect answer
        Community Expert
        Nov 25, 2020 2:20 AM UTC

        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');
  	});
  }
});
        Translate
        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
          Nov 25, 2020 12:12 AM UTC

          Yes.

          Which version of Bootstrap are you using?

           

          Translate
          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