arrange collapsed header menu

src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss

@@ -109,9 +109,6 @@ body {
 }
 
 header {
-   a {
-      text-decoration: none;
-   }
    nav.navbar {
       padding: 0;
       a.navbar-brand img {
@@ -121,22 +118,6 @@ header {
       div.navbar-collapse {
          float: right;
       }
-      @media (max-width: 767px) {
-         & {
-            position: relative; 
-         }
-         button.navbar-toggler {
-            float: right;
-         }
-         div.navbar-collapse {
-            float: none;
-            position: absolute;
-            top: 4em; 
-            right: 0;
-            z-index: 2;
-            padding: 1em;
-         }
-      }
       ul.navbar-nav {
          display: flex;
          align-items: stretch;
@@ -165,6 +146,7 @@ header {
          border-radius: 0;
          a.dropdown-item {
             width: 120%;
+            border: 0;
             border-bottom: 1px solid $gray-200;
             font-size: smaller;
             i { 
@@ -173,6 +155,66 @@ header {
                color: $gray-500 !important; }
          }
       }
+      
+      // fullwidth menu when navbar is collapsed
+      @media (max-width: 767px) {
+         & {
+            position: relative; 
+         }
+         button.navbar-toggler {
+            float: right;
+         }
+         div.navbar-collapse {
+            float: none;
+            position: absolute;
+            top: 4em;
+            left: 0; 
+            right: 0;
+            z-index: 2;
+            padding: 1em;
+            border-top: 1px solid shade-color($primary, 25%);
+            ul.navbar-nav {
+               display: grid;
+               grid-template-areas: 
+                  "sear sear sear"
+                  "sect user lang";
+               li.nav-item {
+                  flex-direction: column;
+                  border: 0;
+                  a.nav-link {}
+                  &.navigation-search {
+                     grid-area: sear;
+                     margin-bottom: 1em;
+                     form {
+                        width: 100%;
+                        input.form-control {}
+                        button.btn {}
+                     }
+                  }
+                  &.nav-section  { grid-area: sect; } 
+                  &.nav-user     { grid-area: user; }
+                  &.nav-language { grid-area: lang; }
+               }
+               li.dropdown {
+                  &, & > * {
+                     background-color: transparent !important;
+                  }
+                  a.dropdown-toggle {}
+                  div.dropdown-menu {
+                     display: block;
+                     border: 0;
+                     a.dropdown-item {
+                        width: 100%;
+                        border: 0;
+                        border-top: 1px dotted $gray-200;
+                        background-color: transparent !important;
+                     }
+                  }
+               }   
+            }
+         }
+      }
+            
    }
 }
 

src/Bundle/ChillMainBundle/Resources/views/Layout/_header.html.twig

@@ -64,13 +64,13 @@
                         }) }}
 
                         {% if  available_languages|length == 1 %}
-                            <li class="nav-item btn btn-primary">
+                            <li class="nav-item btn btn-primary nav-language">
-                                <a id="menu-languages" class="text-white-50" href="#">
+                                <a id="menu-languages" class="nav-link" href="#">
                                     {{ available_languages[0] | capitalize }}
                                 </a>
                             </li>
                         {% else %}
-                            <li class="nav-item dropdown btn btn-primary">
+                            <li class="nav-item dropdown btn btn-primary nav-language">
                                 <a id="menu-languages" 
                                     class="nav-link dropdown-toggle" 
                                     type="button" 

src/Bundle/ChillMainBundle/Resources/views/Menu/section.html.twig

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #}
 
-<li class="nav-item dropdown btn btn-primary">
+<li class="nav-item dropdown btn btn-primary nav-section">
     <a id="menu-section" 
         class="nav-link dropdown-toggle" 
         type="button" 

src/Bundle/ChillMainBundle/Resources/views/Menu/user.html.twig

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #}
 
-<li class="nav-item dropdown btn btn-primary">
+<li class="nav-item dropdown btn btn-primary nav-user">
     <a id="menu-user"
         class="nav-link dropdown-toggle"
         type="button"

src/Bundle/ChillMainBundle/Resources/views/layoutWithVerticalMenu.html.twig

@@ -26,7 +26,7 @@
 {% block sublayout_content %}
     <div class="container-xxl">
         <div class="row">
-            <div class="col-9">
+            <div class="col-md-9">
                 
                 {# Flash messages ! #}
                 <div class="mt-5">