Changing class of HTML element according to current file - html

Question

I'm using Django and HTML files and I'm trying to change the class of one element depending on the current file.
So, I have this base.html file, which is some kind of "super-class" file, which most of my other .html extends, thanks to Django, using {% extends 'base.html' %}
Among other things, in that file, I have a navigation bar on top, which all files must have. This navigation bar has various elements, one of them being the current active element. For example, in the "foo.html" page, I'd like the navigation bar element holding to 'foo' tab to be underlined in red. I have a .css class for this, I just type class="active" and I'm good to go.
But I'm in base.html. I can't. If I do, it's obviously active for every single child.
Is there a solution for this or am I SOL?
To be clear, I want foo.html to somehow tell base.html that "this div" should be active, while other files will tell base.html differently.
Also, I would like some kind of clean solution, this is a long lasting project and I'd rather not start with any hacks. I know I could duplicate the navigation bar in all my files and set the correct button to active on each separate file, but this can't be the way to go.
Here is the code i'm using :
{% extends 'base.html' %}
{% load static %}
{% block content %}
<!-- #### -->
<!-- Menu -->
<!-- #### -->
<div id="nav-content">
<nav>
<div class="row">
<div class="col s12">
<!-- ############ -->
<!-- Desktop Menu -->
<!-- ############ -->
<div class="nav-wrapper">
<a href="home" class="brand-logo">
<img src="{% static 'notifications/img/logo.png' %}"/>
<span class="valign">
<b class="main-text">NotifyMe</b> - Hello World :)
</span>
</a>
<!-- Desktop -->
<ul class="right hide-on-med-and-down">
Should be class="active" here
<li>Feeds</li>
<li>Profile</li>
<li>Logout</li>
</ul>
<!-- Mobile -->
<a href="#" data-activates="mobile-demo" class="button-collapse">
<i class="material-icons">menu</i>
</a>
</div>
<!-- ########### -->
<!-- Mobile Menu -->
<!-- ########### -->
<ul class="side-nav" id="mobile-demo">
<li class="logo">
<img src="{% static 'notifications/img/logo.png' %}"/>
<p>
<b class="main-text">Aero</b> Admin
</p>
</li>
<li>
<a class="waves-effect" href="manage_feeds">Feeds</a>
<a class="waves-effect" href="profile">Profile</a>
<a class="waves-effect" href="logout">Logout</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
{% block innerContent %}
{% endblock %}
{% endblock %}