Bootstrap 4 highlight navbar Active

Question

How to highlight the current page on click ?

The nav-bar

<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link active" href="{% url 'page1' %}"> Football
                <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{% url 'page2' %}">Overview</a>
        </li>
    </ul>
</div>

The script at the end of the .html

<script src="{% static "JS/master.js" %}" type="text/javascript"></script>

The .JS

$(".nav .nav-link").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).addClass("active");
});

PS I have never done JS before

Answer 1

The reason this happens is because when you click the link, you get redirected to a new page. So the styles set through JS reset. What I would do is set an id to each of your nav elements and then on page load add the active class, like this:

<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <ul class="navbar-nav">
        <li id="link-football" class="nav-item active">
            <a class="nav-link active" href="{% url 'page1' %}"> Football
                <span class="sr-only">(current)</span></a>
        </li>
        <li id="link-overview" class="nav-item">
            <a class="nav-link" href="{% url 'page2' %}">Overview</a>
        </li>
    </ul>
</div>

then on page load you can do this:

//on the football page
$(document).ready(function(){
   $(".active").removeClass("active");
   $("#link-football").addClass("active");
});

Further Explaining:

Any style you add through javascript gets reflected in the DOM, but it does not override the source file. So your static page always has .active set on the football page. When you load/reload the page either through F5, or a JS script, you also reload that static file with none of the changes done through JS being reflected. This is why I say to add the active class after the page loads, cause then you may know what page you're on, and therefore callout the active link.

I would also suggest not having anything set as active by default. You can do the homepage as default active, I see that happen, but it might cause yourself some confusion down the road if you forget to add the above script to a new page.

Notes on using IDE and/or extending using {% extends 'base.html' %}

To get it to work when extending the **base.html** , add the {% block content %} towards the ends of the page. ie

{% block content %}

{% endblock %}
</body>
</html>

And on each subsequent .html page wrap the JS with <script> </script>

Answer 2

I can't tell what's going on in JS/master.js , but you have the class active in both your nav-item and nav-link .

The first thing I'd try would be to remove the class active from nav-link and see if that works.

The next thing I'd try would be to add an "active" state to your CSS. I see Liquid tags in your script src , so if you're using a pre-made Jekyll theme it may already be adding the appropriate active state to the markup.

CSS

/* Active state */
.nav-item.active a {
  color: red;
}

If that doesn't work, you can use jQuery which is used by Bootstrap. Your script is close, but it's looking for .nav .nav-link , which isn't in the HTML provided. It may be in the larger context of your markup, but you could target just .nav-link to make it work.

jQuery

var activeNavItem = $('.nav-item');

activeNavItem.click(function(){
  activeNavItem.removeClass('active');
  $(this).addClass('active');  
});

That may or may not be helpful depending on your context. Here's a working demo on CodePen: https://codepen.io/mikejandreau/pen/BbXKZV