this code is for navigation bar in my website. when a new notification comes the var has_new_notification will be true
then the notification-mark should show in notification element in the navbar. also there is class called active that makes the element color in navbar change when i click on the element. the problem: i can only see the notification-mark on notification element when i am inside notification page.
{% load static %}
<style>
.header__menuItem.active a{
background-color: #51546e;
color: #fff;
padding: 10px 20px;
margin: -10px -20px;
border-radius: 10px;
}
.header__menuItem.notification {
position: relative;
}
.notification-mark {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
}
</style>
<!-- Header Section -->
<header class="header" >
<div class="container container--narrow">
<a href="" class="header__logo">
<img src='{% static "images/logo.png" %}' alt="DevSearch Logo" />
</a>
<nav class="header__nav">
<input type="checkbox" id="responsive-menu" />
<label for="responsive-menu" class="toggle-menu">
<span>Menu</span>
<div class="toggle-menu__lines"></div>
</label>
<ul class="header__menu">
{% if request.user.is_authenticated and request.user.is_Seeker %}
<li class="header__menuItem "><a href="{% url 'SeekerHome' %}">Home</a></li>
<li class="header__menuItem"><a href="">Activites</a></li>
<li class="header__menuItem"><a href="">Dashboard</a></li>
{% elif request.user.is_authenticated and request.user.is_Recruiter %}
<li class="header__menuItem "><a href="{% url 'RecruiterHome' %}">Home</a></li>
<li class="header__menuItem"><a href="{% url 'Activites' %}">Activites</a></li>
<li class="header__menuItem {% if request.user.is_authenticated and request.path == '/Recruiter/myjobs/' %}active{% endif %}"><a href="{% url 'myjobs' %}">My jobs</a></li>
{% endif %}
{% if request.user.is_authenticated %}
<li class="header__menuItem {% if request.user.is_authenticated and request.path == '/accounts/account/' %}active{% endif %}"><a href="{% url 'account' %}">Account</a></li>
<li class="header__menuItem {% if request.path == '/accounts/notofications/' %}active{% endif %} notification">
<a href="{% url 'notofications' %}">Notifications</a>
{% if has_new_notification %}
<span class="notification-mark"></span>
{% endif %}
</li>
<li class="header__menuItem {% if request.user.is_authenticated and request.path == '/accounts/logout/' %}active{% endif %}"><a href="{% url 'logout' %}" >Logout</a></li>
{% else %}
<li class="header__menuItem {% if request.path == '/accounts/login/' %}active{% endif %}"><a href="{% url 'login' %}" >Login/Sign Up</a></li>
{% endif %}
</ul>
</nav>
</div>
</header>