UI fix so drop-down menu can be put in second header

basetheme_bootstrap/static/css/basetheme_bootstrap4_pasteur.css

@@ -132,18 +132,18 @@ header .header__top a:hover:not([aria-expanded=true]) {
 header {
     border-bottom: 1px solid #aeb7c0;
 }
-header .dropdown-menu a:hover,
+header .header__top .dropdown-menu a:hover,
 /*header .dropdown-menu>a:hover,
 header .dropdown.show>a ,*/
 header .header__top .form-inline .btn:hover,
 header .header__top .form-inline .btn:focus,
-header a:hover {
+header .header__top a:hover {
     background: #fff;
     color: #2d80e2;
     font-weight: 700;
     text-decoration: none;
 }
-header .dropdown.show>a {
+header .header__top .dropdown.show>a {
     box-shadow: inset 0px 1px 0px 0px #FFF, inset 1px 0px 0px 0px #FFF, inset -1px 0px 0px 0px #FFF;
     border-bottom: 0;
     color: #fff;
@@ -152,6 +152,39 @@ header .dropdown.show>a {
     background: #211b1d;
 }
 
+header .header__middle .dropdown>a,
+header .header__middle .main-nav .dropdown{
+    transition:unset;
+}
+header .header__middle .main-nav .dropdown.show{
+    margin-left:0;
+    margin-right:0;
+}
+header .header__middle :not(.show)>a.dropdown-toggle:hover{
+    border-bottom: 2px black solid;
+    padding-bottom: 3px;
+}
+header .header__middle .dropdown.show>a {
+    box-shadow: inset 0px 1px 0px 0px #aeb7c0, inset 1px 0px 0px 0px #aeb7c0, inset -1px 0px 0px 0px #aeb7c0;
+    border-bottom: 0;
+    z-index: 1001;
+    position: relative;
+    background: #FFF;
+    padding-left:10px;
+    padding-right:10px;
+    transition:unset;
+}
+header .header__middle .dropdown.show>.dropdown-menu {
+    border-color: #aeb7c0;
+}
+header .header__middle .main-nav .dropdown-menu>a:hover,
+header .header__middle  .main-nav .dropdown-menu>a.active {
+    background-color: #F0F3F4;
+}
+header .header__middle .dropdown-divider {
+    border-color: #aeb7c0;
+}
+
 .header__nav{
     flex:1 1 auto;
     display: flex;
@@ -246,12 +279,15 @@ header:not(.scrolled) #navbar__middle__collapse:not(.show)>div:last-child{
     padding: 5px 0;
     /*padding-top: 60px;*/
 }
+.main-nav .dropdown-menu>a {
+    padding:8px 30px;
+}
 .main-nav a:hover,
 .main-nav a.active {
     color: #211b1d;
 }
-.main-nav a:hover:after,
-.main-nav a.active:after {
+.main-nav *:not(.dropdown-menu)>a:not(.dropdown-toggle):hover:after,
+.main-nav *:not(.dropdown-menu)>a:not(.dropdown-toggle).active:after {
     content: '';
     position: absolute;
     bottom: 0;
@@ -318,9 +354,13 @@ header .header__logo-wrapper img{
 }
 
 footer .dropdown-menu ,
-header .dropdown-menu {
+header .header__top .dropdown-menu {
     background: #211b1d;
     border-color:#fff;
+}
+
+footer .dropdown-menu ,
+header .dropdown-menu {
     border-radius:0;
     margin-top: -1px;
 }

test_app_1/templates/test_app_1/mybasePasteur.html

@@ -7,6 +7,27 @@
 
 {% block extra_li_dropdown_right %}
 <li class="nav-item bug-tracking"><a class="nav-link" href="https://gitlab.pasteur.fr/bbrancot/django-basetheme-bootstrap/issues"><i class="fa fa-bug"></i> {%trans "Bug tracking"%}</a></li>
+{%if not request.user.is_authenticated %}
+<li class="nav-item"><a class="nav-link" href="{% url 'basetheme_bootstrap:login'%}?next={{ request.path|urlencode }}">{% block sign_in_word %}{%trans "Login "%}{% endblock %}<i class="fa fa-sign-in"></i></a></li>
+{%else%}
+<li class="nav-item dropdown">
+    <a class="nav-link dropdown-toggle"
+       href="#"
+       id="dropdown-user"
+       data-toggle="dropdown"
+       aria-haspopup="true"
+       aria-expanded="false"
+    ><i class="fa fa-user-circle-o"></i> <span class="caret"></span></a>
+    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-user">
+        {%if request.user.is_staff %}
+            <a  class="dropdown-item" href="/admin/"><i class="fa fa-cogs"></i> {%trans "Admin"%}</a>
+            <div class="dropdown-divider"></div>
+        {%endif%}
+        <a class="dropdown-item" href="{% url 'basetheme_bootstrap:account'%}"><i class="fa fa-user-circle-o"></i> {%trans "Account"%}</a>
+        <a class="dropdown-item" href="{% url 'basetheme_bootstrap:logout'%}"><i class="fa fa-sign-out"></i> {%trans "Logout"%}</a>
+    </div>
+</li>
+{%endif%}
 {% endblock %}
 
 {% block page_title %}A Page examplE{% endblock %}