improving second navbar when there is too much options

WIP #2

basetheme_bootstrap/static/css/basetheme_bootstrap4_pasteur.css

@@ -123,6 +123,14 @@ header .dropdown.show>a {
 
 .header__nav{
     flex:1 1 auto;
+    display: flex;
+    flex-direction: column;
+}
+.header__nav>:first-child{
+    flex-grow: 3.3;
+}
+.header__nav>:last-child{
+    flex-grow: 1;
 }
 .header__logo-wrapper {
     /*float: left;*/
@@ -131,23 +139,26 @@ header .dropdown.show>a {
 }
 .header__nav .navbar-nav,
 .header__nav>.main-nav{
+    flex-grow: 0;
     display: flex;
     flex-direction: row;
 }
 .header__nav>.main-nav>*:not(.navbar-right){
     flex:1 1 auto;
 }
+.header__logo-wrapper,
+.header__face-wrapper{
+    flex-shrink:0;
+}
+.header__face-wrapper{
+    width: 170px;
+    direction: rtl;
+}
 .header__face {
     height:105px;
 }
 .header__middle{
-    /*padding-right: 1rem;
-    padding-left: 1rem;
-    padding-top: 15px;
-    padding-bottom: 15px;*/
     background:white;
-    /*background: url("https://www.pasteur.fr//sites/all/themes/custom/pasteur/assets/img/art/pasteur.png") right top no-repeat, #FFF;*/
-    /*background-size: auto auto;*/
     display:flex;
 -moz-transition-property:  background-image;
 -moz-transition-duration: 500ms;
@@ -174,7 +185,7 @@ header .dropdown.show>a {
     color: #636060;
     font-size: 1em;
     padding: 5px 0;
-    padding-top: 60px;
+    /*padding-top: 60px;*/
 }
 .main-nav a:hover,
 .main-nav a.active {

basetheme_bootstrap/templates/basetheme_bootstrap/basePasteur.html

@@ -74,6 +74,7 @@
                 <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" %}
@@ -82,8 +83,11 @@
                         {% 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>
-            <img class="header__face" src="https://www.pasteur.fr//sites/all/themes/custom/pasteur/assets/img/art/pasteur.png">
         </div>
 </header>
 <!-- Begin page content -->