Toggle does not display. Django

I am currently following this tutorial but with my own template that I got from w3layouts. I am using it as a practice project to better learn Django. I am currently trying to implement a user login/signup page.

When you click on the icon/image that represents the user, you are supposed to be treated with a drop down lift of, My account, my favorites, my cart etc. etc.

As I am using a different template from the one in the video, I understand that there may be issues.

The following is the Lecturers( guys tutorial I'm following) drop down for user functionality.

   <li class="header-account dropdown default-dropdown">
                        {% if user.id is not None %}
                            <div class="dropdown-toggle" role="button" data-toggle="dropdown" aria-expanded="true">
                                <div class="header-btns-icon">
                                    <img src="{{ request.session.userimage }}" style="height: 40px; border-radius: 30%">
                                </div>
                                <strong class="text-uppercase">{{ user.first_name }} <i class="fa fa-caret-down"></i></strong>
                            </div>
                        {% else %}
                            <a href="{% url 'login' %}" class="text-uppercase">Login</a> / <a href="{% url 'signup' %}" class="text-uppercase">Sign Up</a>
                        {% endif %}

                        <ul class="custom-menu">
                            <li><a href="{% url 'user_index' %}"><i class="fa fa-user-o"></i> {% trans "My Account" %}</a></li>
                            <li><a href="#"><i class="fa fa-heart-o"></i> {% trans "My Favorits" %}</a></li>
                            <li><a href="{% url 'user_orders' %}"><i class="fa fa-exchange"></i> {% trans "My Orders " %}</a></li>
                            <li><a href="{% url 'user_comments' %}"><i class="fa fa-check"></i> {% trans "My Comments" %}</a></li>
                            <li><a href="{% url 'logout' %}"><i class="fa fa-unlock-alt"></i> {% trans "Logout" %}</a></li>

                        </ul>
                    </li>

And here is mine.

ul class="top-hnt-right-content col-lg-6">

                <li class=" header-account dropdown default-dropdown button-log usernhy  ">

                        

                        {% if user.id is not None %}

           
                         <div class="dropdown-toggle" role="button" data-toggle="dropdown" aria-expanded="true">
                                <div class="header-btns-icon">
                                    <img src="{{ request.session.userimage }}" style="height: 40px; border-radius: 30%">
                                </div>
                                <strong class="text-uppercase">{{ user.first_name }} <i class="fa fa-caret-down"></i></strong>
                            </div>
                        {% else %}
                            <a href="{% url 'login' %}" class="btn-open"> <span class="fa fa-user" aria-hidden="true"> Log In </span></a> 
                            <a href="{% url 'signup' %}" class="btn-open"> <span class="fa fa-user" aria-hidden="true">Sing Up </span></a>
                        {% endif %}

                        <ul class="custom-menu wrap overlay-login text-left">
                            <li><a href="{% url 'user_index' %}"><i class="fa fa-user-o"></i> {% trans "My Account" %}</a></li>
                            <li><a href="#"><i class="fa fa-heart-o"></i> {% trans "My Favorits" %}</a></li>
                            <li><a href="{% url 'user_orders' %}"><i class="fa fa-exchange"></i> {% trans "My Orders " %}</a></li>
                            <li><a href="{% url 'user_comments' %}"><i class="fa fa-check"></i> {% trans "My Comments" %}</a></li>
                            <li><a href="{% url 'logout' %}"><i class="fa fa-unlock-alt"></i> {% trans "Logout" %}</a></li>

                        </ul>
                       
                    </a> 
                </li>

Here is my css.

  .w3l-banner-slider-main .overlay-login button.overlay-close1 {
    z-index: 9999;
    color: #000; }
 .w3l-banner-slider-main .overlay-login button.overlay-close1 {
    z-index: 999;
    color: #fff;
    right: 0;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 20px;
    top: 20px;
    overflow: hidden;
    background: none;
    color: #fff;
    border: 2px solid #232020;
    cursor: pointer;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -o-border-radius: 6px;
    -moz-border-radius: 6px; }
  .w3l-banner-slider-main .overlay-login {
    display: none;
    position: fixed;
    top: 0;
    background: #3a3535;
    overflow: auto;
    z-index: 9999;
    padding: 3em 3em;
    right: 0;
    height: 100%;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all; }
.w3l-banner-slider-main .overlay-login {
    display: none;
    position: fixed;
    top: 0;
    background: #3a3535;
    overflow: auto;
    z-index: 9999;
    padding: 3em 3em;
    right: 0;
    height: 100%;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all; }
   .w3l-banner-slider-main .overlay-login {
      padding: 2em 2em; } }

Once I have signed UP, I am unable to click on the icon/image to even get the log out. I understand this may be a CSS problem, but I am also not a web designer and have started programming by getting into python.

Any help will be appreciated.