second nav-bar being responsive

WIP #2

basetheme_bootstrap/static/css/basetheme_bootstrap4_pasteur.css

+@media (max-width: 767px){
+    body {
+        padding-top: calc( 80px ) !important;
+    }
+}
+
 .content-page-title .btn,
 html {
     font-family: "Brandon","Arial","Helvetica",sans-serif;
@@ -60,7 +66,7 @@ body {
 header div{
 }
 
-header nav.navbar{
+header nav.header__top{
     background: #211b1d;
     color: #fff;
     /*padding:0 calc( 50vw - 600px ) !important;*/
@@ -73,7 +79,7 @@ header .navbar-brand {
     font-family: "BrandonGrotesqueBld";
 }
 
-header nav.navbar nav-item.active{
+header nav.header__top nav-item.active{
     background: #FFFFFF30;
 }
 
@@ -143,8 +149,17 @@ header .dropdown.show>a {
     display: flex;
     flex-direction: row;
 }
+/*
 .header__nav>.main-nav>*:not(.navbar-right){
     flex:1 1 auto;
+}*/
+.main-menu,
+.navbar>.navbar-collapse:not(.show):not(.collapsing){
+    flex:1 1 auto;
+}
+.navbar-collapse.show ul,
+.navbar-collapse.collapsing ul{
+    margin-bottom:0;
 }
 .header__logo-wrapper,
 .header__face-wrapper{
@@ -162,16 +177,18 @@ header .dropdown.show>a {
     display:flex;
 -moz-transition-property:  background-image;
 -moz-transition-duration: 500ms;
+    padding:0;
 }
-.main-nav li {
-    display:inline-block;
+.header__middle .navbar-toggler{
+    margin-right: 1rem;
 }
-.main-nav li {
+.main-nav:not(.show):not(.collapsing) li {
+    display:inline-block;
     display: inline-block;
     vertical-align: middle;
     margin: 0 10px;
 }
-.main-nav ul {
+.main-nav:not(.show):not(.collapsing) ul {
     list-style: none;
     margin: 0;
     padding: 0;
@@ -206,10 +223,10 @@ header *{
     transition: all 0.2s ease-out;
 }
 
-header.scrolled .main-nav a {
+/*header.scrolled .main-nav a {
     padding-top: 5px;
     margin-top: 5px;
-}
+}*/
 
 header.scrolled .header__middle{
     padding-top: 0px;
@@ -227,6 +244,18 @@ header.scrolled .header__face {
 header.scrolled .header__logo-wrapper {
     padding: 0;
 }
+@media (max-width: 767px){
+    header .navbar .header__logo-wrapper {
+        height: 2em;
+        padding: 0;
+        margin-left: -160px;
+    }
+    header .navbar .header__logo-wrapper img {
+        height: 39px;
+        margin-top: 5px;
+        margin-left: 95px;
+    }
+}
 header.scrolled .header__logo-wrapper img{
     height: 39px;
     margin-top: 5px;

basetheme_bootstrap/templates/basetheme_bootstrap/basePasteur.html

@@ -69,26 +69,26 @@
             </ul>
         </div>
     </nav>
-        <div class="header__middle">
-            <div class="header__logo-wrapper">
-                <img src="https://www.pasteur.fr/sites/default/files/logo_institut_pasteur_noir.png" alt="Accueil">
-            </div>
-            <div class="header__nav">
-                <div></div>
-                <nav class="main-nav" role="navigation">
-                    <ul id="main-menu" class="links inline clearfix main-menu">
-                {% include_if_exists "nav_bar.html"|localize_template "basetheme_bootstrap/nav_bar.example.html" %}
-                    </ul>
-                    <ul class="nav navbar-nav navbar-right">
-                        {% block extra_li_dropdown_right %}{% endblock %}
-                    </ul>
-                </nav>
-                <div></div>
-            </div>
-            <div class="header__face-wrapper">
-                <img class="header__face" src="https://www.pasteur.fr//sites/all/themes/custom/pasteur/assets/img/art/pasteur.png">
-            </div>
+    <nav class="header__middle navbar navbar-expand-md navbar-light">
+        <div class="header__logo-wrapper">
+            <img src="https://www.pasteur.fr/sites/default/files/logo_institut_pasteur_noir.png" alt="Accueil">
         </div>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar__middle__collapse"
+                aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse main-nav" id="navbar__middle__collapse">
+            <ul class="links inline clearfix main-menu">
+        {% include_if_exists "nav_bar.html"|localize_template "basetheme_bootstrap/nav_bar.example.html" %}
+            </ul>
+            <ul class="navbar-right">
+                {% block extra_li_dropdown_right %}{% endblock %}
+            </ul>
+        </div>
+        <div class="header__face-wrapper d-none d-md-block">
+            <img class="header__face" src="https://www.pasteur.fr//sites/all/themes/custom/pasteur/assets/img/art/pasteur.png">
+        </div>
+    </nav>
 </header>
 <!-- Begin page content -->
 <main role="main" class="flex-shrink-0">