responcive: better header

web/themes/custom/materiotheme/assets/dist/main.css

@@ -19352,16 +19352,20 @@ header[role="banner"] {
   header[role="banner"] #block-sitebranding h1 {
     margin: 0;
     line-height: 1; }
-  @media (max-width: 436px) {
-    header[role="banner"] #block-sitebranding .slogan {
-      display: none; } }
+  header[role="banner"] #block-sitebranding .slogan {
+    font-size: 0.882em;
+    display: block;
+    white-space: nowrap; }
+    @media (max-width: 436px) {
+      header[role="banner"] #block-sitebranding .slogan {
+        display: none; } }
   header[role="banner"] #block-socialmedialinks {
     padding-right: 0.5em;
     border-right: 1px solid #1A1A1A;
     margin-right: 0.5em; }
     header[role="banner"] #block-socialmedialinks li {
       padding: 0; }
-    @media (max-width: 654px) {
+    @media (max-width: 872px) {
       header[role="banner"] #block-socialmedialinks {
         display: none; } }
   header[role="banner"] #block-userlogin {
@@ -19439,7 +19443,7 @@ header[role="banner"] {
     padding-top: 0.06em; }
     header[role="banner"] #user-tools a.mdi-account {
       cursor: pointer; }
-      @media (max-width: 654px) {
+      @media (max-width: 1090px) {
         header[role="banner"] #user-tools a.mdi-account span {
           display: none; } }
     header[role="banner"] #user-tools .mdi-logout::before {
@@ -19456,7 +19460,7 @@ header[role="banner"] {
       cursor: pointer; }
       header[role="banner"] #user-flags h2:before {
         padding-right: 0.2em; }
-      @media (max-width: 654px) {
+      @media (max-width: 1090px) {
         header[role="banner"] #user-flags h2 span {
           display: none; } }
     header[role="banner"] #user-flags ul {
@@ -19538,11 +19542,10 @@ header[role="banner"] {
       margin: 0; }
       header[role="banner"] #block-header ul.menu li {
         padding: 0; }
-    @media (max-width: 654px) {
-      header[role="banner"] #block-header ul.menu li {
-        display: inline-block; }
-        header[role="banner"] #block-header ul.menu li:not(:first-of-type) {
-          margin-left: 0.5em; } }
+    header[role="banner"] #block-header ul.menu li {
+      display: inline-block; }
+      header[role="banner"] #block-header ul.menu li:not(:first-of-type) {
+        margin-left: 0.5em; }
     @media (max-width: 654px) {
       header[role="banner"] #block-header {
         position: relative;
@@ -19563,7 +19566,9 @@ header[role="banner"] {
           padding: 0.2em 0.5em;
           margin-right: -0.5em;
           z-index: 90;
-          text-align: right; } }
+          text-align: right; }
+          header[role="banner"] #block-header ul.menu li {
+            display: block; } }
   header[role="banner"] #block-languageswitcher {
     text-align: right;
     position: relative;

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -60,7 +60,9 @@ header[role="banner"]{
       line-height: 1;
     }
     .slogan{
-
+			font-size: 0.882em;
+			display: block;
+			white-space: nowrap;
       @include col-mediaquery-max(2){
         display:none;
       }
@@ -74,7 +76,7 @@ header[role="banner"]{
     li{
       padding:0;
     }
-    @include col-mediaquery-max(3){
+    @include col-mediaquery-max(4){
       display:none;
     }
   }
@@ -183,7 +185,7 @@ header[role="banner"]{
       @extend %header-fs;
       cursor: pointer;
       span{
-        @include col-mediaquery-max(3){
+        @include col-mediaquery-max(5){
           display:none;
         }
       }
@@ -207,7 +209,7 @@ header[role="banner"]{
       cursor: pointer;
       &:before{padding-right: 0.2em;}
       span{
-        @include col-mediaquery-max(3){
+        @include col-mediaquery-max(5){
           display:none;
         }
       }
@@ -321,7 +323,7 @@ header[role="banner"]{
         }
       }
     }
-    @include col-mediaquery-max(3){
+    // @include col-mediaquery-max(3){
       ul.menu{
         li{
           display: inline-block;
@@ -330,7 +332,7 @@ header[role="banner"]{
           }
         }
       }
-    }
+    // }
     @include col-mediaquery-max(3){
       position: relative;
 
@@ -352,6 +354,9 @@ header[role="banner"]{
         margin-right: -0.5em;
         z-index: 90;
         text-align: right;
+				li{
+					display: block;
+				}
       }
     }
   }