Specify the pages that navbar items should appear on with Bootstrap in Django

I am trying to specify the page that this navbar dropdown should appear on. I tried adding this line: {% if request.resolver_match.url_name == 'club_selection' %} class = "active" {% endif %} but that doesn't seem to do anything for me. Maybe I am using it wrong. If anybody knows how to do this correctly it would be a massive help.

club_selection_dropdown.html

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item dropdown">
      <li {% if request.resolver_match.url_name  == 'club_selection' %} class = "active" {% endif %}>
        <a class="nav-link" href="/" id="club--dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          Current Clubs  <span class="bi-arrow-down-circle-fill"></span>
        </a>
        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="club-dropdown">
          {% for club in clubs %}
            <form action = "{% url 'group_check' user.id %}" method = "post">
              {% csrf_token %}
              <input type="hidden" name="club_name" value="{{ club.club_name }}">
              <style>
                .btn:hover {
                  background-color: lightgrey;
                }
                .btn-group.special {
                  display: flex;
                }
                .special .btn {
                  flex: 1;
                }
              </style>
              <div class="btn-group special" role="group">
                <input type = "submit" value = "{{club.club_name}}" class="btn col-xs-11 text-left" style=".btn-primary:hover; text-align:left; padding-left:6px">
              </div>
            </form>
          {% endfor %}
        </ul>
      </li>
    </li>
  </ul>
</div>

views.py

def club_selection(request):
    list_of_clubs = ClubList()
    clubs = list_of_clubs.club_list
    return render(request, 'club_selection.html', {'clubs':clubs})

urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.home, name = 'home'),
    path('log_in/', views.LogInView.as_view() , name = 'log_in'),
    path('sign_up/', views.sign_up, name = 'sign_up'),
    path('log_out/', views.log_out, name = 'log_out'),
    path('show_current_user_profile/', views.show_current_user_profile, name = 'show_current_user_profile'),
    path('user/<int:user_id>', views.ShowUserView.as_view(), name='show_user'),
    path('officer_user/<int:user_id>', views.ShowOfficerView.as_view(), name='show_user_officer'),
    path('member_list/', views.MemberListView.as_view(), name = 'member_list'),
    path('officer/', views.officer, name = 'officer'),
    path('officer_promote_applicants/', views.ApplicantListView.as_view(), name = 'officer_promote_applicants'),
    path('officer_main/', views.OfficerMainListView.as_view(), name = 'officer_main'),
    path('reject_accept_handler/<int:user_id>', views.reject_accept_handler, name = 'officer_promote_applicants'),
    path('profile/',views.profile,name = 'profile'),
    path('password/', views.password, name='password'),
    path('owner/', views.owner, name = 'owner'),
    path('officer_list/', views.OfficerListView.as_view() ,name = 'officer_list'),
    path('owner_member_list', views.OwnerMemberListView.as_view(), name = 'owner_member_list'),
    path('promote_member/<int:user_id>', views.promote_member, name = 'promote_member'),
    path('demote_officer/<int:user_id>', views.demote_officer, name = 'demote_officer'),
    path('transfer_ownership/<int:user_id>', views.transfer_ownership, name = 'transfer_ownership'),
    path('club_selection/', views.club_selection, name = 'club_selection'),
    # path('club_dropdown/', views.club_dropdown, name = 'club_dropdown'),
    path('group_check/<int:user_id>', views.group_check, name = 'group_check'),
    path('application_form/', views.application_form, name = 'application_form'),
    path('create_new_club/', views.create_new_club, name = 'create_new_club')

You can do it like that :

{% if 'club-selection' in request.path %}class="active"{% endif %} 

So if the term appears in the path of your url show the active class.

Note : Do that only if you want to set active class to a bunch of endpoint sharing the same namespace.

Else you can do that :

 {% if 'club-selection' == request.path %}class="active"{% endif %} 

There is good chance that your template processor is not setup properly, so make sure you have the following in your settings.py within the template variable and inside the context_processors :

"context_processors": [
            ....
            "django.template.context_processors.request",
            ....
            ]

Relaunch your server and try again

Back to Top