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