<nav class="navbar navbar-expand-sm navbar-dark bg-primary mb-3">
        <div class="container">
            <a class="navbar-brand"   href="{% url 'home' %}"><img src="{% static 'img/page/brand_dark.png' %}" class="img-fluid" style="max-height: 70px;" alt=""></a>
            <ul class="navbar-nav" style="min-width: 200px;">
                <li class="nav-item notification-bell ml-5">
                    <a class="nav-link" href="{% url 'notifications' %}"><i class="far fa-bell" style="font-size:50px; line-height:50px;"></i></a>
                    {% if notifications %}
                        <div class="notification-counter">{{ notifications_number }}</div>
                    {% endif %}
                </li>
                <li class="nav-item dropdown ml-md-4">
                    {% comment %} <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown"><img style=" height:50px; border-radius:100%" src="{% static 'img/page/avatar.png' %}" alt=""></a> {% endcomment %}
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown"><img style=" max-height:50px; border-radius:100%" src="{{ request.user.avatar.url }}" alt=""></a>
                    <div class="dropdown-menu">
                        <a href="{% url 'profile_detail' username=request.user.username %}" class="dropdown-item">My Profile</a>
                        <a href="{% url 'profile_update' pk=request.user.pk %}" class="dropdown-item">Edit Profile</a>
                        <a href="#" class="dropdown-item">Badges</a>
                        <a href="{% url 'messages' %}" class="dropdown-item">Messages</a>
                        <a href="{% url 'ranking' %}" class="dropdown-item">Ranking</a>
                        <a href="{% url 'logout' %}" class="dropdown-item">Sign Out</a>
                    </div>
                </li>

            </ul>
        </div>
    </nav>