full header-right responsive hamburger menu ok for unlogged-in users

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

@@ -19297,7 +19297,7 @@ header[role="banner"] {
       clear: both;
       display: block; }
     header[role="banner"] > .wrapper .header-block {
-      min-height: 15px;
+      min-height: 33px;
       font-size: 0; }
       header[role="banner"] > .wrapper .header-block > * {
         font-size: 16px; }
@@ -19312,18 +19312,30 @@ header[role="banner"] {
       header[role="banner"] > .wrapper .header-block label[for="header-block-right-toggle"] {
         display: none; }
       @media (max-width: 654px) {
+        header[role="banner"] > .wrapper .header-block.header-left {
+          width: 75%; }
+        header[role="banner"] > .wrapper .header-block.header-right {
+          width: 23%; }
           header[role="banner"] > .wrapper .header-block.header-right label[for="header-block-right-toggle"] {
             display: block; }
           header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper {
             position: absolute;
-          right: 0;
+            top: 33px;
-          background-color: green;
+            width: 300px;
-          transform: translateX(150px);
+            right: -450px;
-          transition: transform 0.5s ease-in-out; }
+            box-sizing: border-box;
-          header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper > * {
+            transition: right 0.5s ease-in-out; }
-            display: block; }
+            header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper > *.block {
+              display: block;
+              padding: 0 0 0.5em 0 !important;
+              margin: 0 0 0.5em 0 !important;
+              text-align: right;
+              border-left: none !important;
+              border-right: none !important; }
+              header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper > *.block:not(:last-child) {
+                border-bottom: 1px solid #ccc !important; }
           header[role="banner"] > .wrapper .header-block.header-right input#header-block-right-toggle:checked ~ div.header-block-wrapper {
-          transform: translateX(1px); } }
+            right: 1px; } }
 
 main[role="main"] {
   flex: 1 1 auto;
@@ -19380,6 +19392,14 @@ header[role="banner"] {
     font-size: 0.882em;
     display: block;
     white-space: nowrap; }
+  @media (max-width: 654px) {
+    header[role="banner"] #block-sitebranding h1, header[role="banner"] #block-sitebranding .slogan {
+      display: inline-block; } }
+  @media (max-width: 654px) {
+    header[role="banner"] .header-block.header-right .header-block-wrapper {
+      padding: 1em 1em;
+      box-shadow: -2px 2px 4px #ccc;
+      background-color: #fff; } }
   header[role="banner"] #block-socialmedialinks {
     padding-right: 0.5em;
     border-right: 1px solid #1A1A1A;
@@ -19394,9 +19414,8 @@ header[role="banner"] {
       line-height: 1.38;
       margin: 0; }
     header[role="banner"] #block-userlogin > section {
-      background-color: #fff;
       overflow: hidden;
-      width: 11em;
+      background-color: #fff;
       box-sizing: content-box;
       transition: all 0.4s ease-in-out;
       right: 0;
@@ -19404,12 +19423,14 @@ header[role="banner"] {
       box-sizing: content-box;
       z-index: 100; }
     @media (min-width: 655px) {
-      header[role="banner"] #block-userlogin {
+      header[role="banner"] #block-userlogin > section {
         max-height: 0px;
         padding: 0.01em 1em;
         transition-delay: 2s;
-        position: absolute; } }
+        position: absolute;
-  @media (min-width: 655px) and (hover: hover) {
+        width: 11em; } }
+
+@media (min-width: 655px) and (hover: hover) {
   header[role="banner"] #block-userlogin {
     /* solves sticky problem */ }
     header[role="banner"] #block-userlogin:hover > section {
@@ -19560,6 +19581,8 @@ header[role="banner"] {
       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 ul.menu {
+        text-align: right; }
         header[role="banner"] #block-header ul.menu li {
           display: block; } }
   header[role="banner"] #block-languageswitcher {
@@ -19589,23 +19612,29 @@ header[role="banner"] {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale; }
     header[role="banner"] #block-languageswitcher > ul.links {
+      overflow: hidden;
+      margin: 0;
+      box-sizing: content-box; }
+    @media (min-width: 655px) {
+      header[role="banner"] #block-languageswitcher > ul.links {
+        width: 3.5em;
         position: absolute;
         top: 17px;
         right: 0;
-      overflow: hidden;
+        transition: all 0.4s ease-in-out;
-      width: 3.5em;
-      height: 1px;
         padding: 0.01em 0;
-      margin: 0;
+        height: 1px; } }
-      box-sizing: content-box;
+
-      transition: all 0.4s ease-in-out; }
+@media (min-width: 655px) and (hover: hover) {
-    @media (hover: hover) {
   header[role="banner"] #block-languageswitcher {
     /* solves sticky problem */ }
     header[role="banner"] #block-languageswitcher:hover > ul.links {
       transition-delay: 0s;
       height: 2em;
       padding: 0.3em 0; } }
+    @media (max-width: 654px) {
+      header[role="banner"] #block-languageswitcher h2 {
+        display: none; } }
     header[role="banner"] #block-languageswitcher li {
       list-style: none;
       padding: 0;

web/themes/custom/materiotheme/assets/styles/base/_layout.scss

@@ -125,7 +125,8 @@ header[role="banner"]{
     }
 
     .header-block{
-      min-height: 15px;
+      $min-height:33px;
+      min-height: $min-height;
       font-size: 0;
       &>*{
         font-size: $base_font_size;
@@ -143,22 +144,39 @@ header[role="banner"]{
       input#header-block-right-toggle{display: none;}
       label[for="header-block-right-toggle"]{display:none;}
       @include col-mediaquery-max(3){
+        &.header-left{ width: 75%; }
         &.header-right{
+          width: 23%;
           label[for="header-block-right-toggle"]{
             display:block;
           }
+          // default position (hidden, translated right)
           .header-block-wrapper{
             position: absolute;
-            right:0;
+            top: $min-height;
-            background-color: green;
+            $w: 300px;
-            transform: translateX(150px);
+            width: $w;
-            transition: transform 0.5s ease-in-out;
+            right: - $w - 150px;
-            >*{
+            box-sizing: border-box;
+            // transform: translateX(150px);
+            transition: right 0.5s ease-in-out;
+
+            >*.block{
               display: block;
+              padding:0 0 0.5em 0!important;
+              margin:0 0 0.5em 0!important;
+              text-align: right;
+              border-left: none!important;
+              border-right: none!important;
+              &:not(:last-child){
+                border-bottom: 1px solid #ccc!important;
               }
             }
+          }
+          // input checked, wrapper visible
           input#header-block-right-toggle:checked ~ div.header-block-wrapper {
-            transform: translateX(1px);
+            // transform: translateX(1px);
+            right:1px;
           }
         }
       }

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

@@ -66,6 +66,21 @@ header[role="banner"]{
       // @include col-mediaquery-max(2){
       //   display:none;
       // }
+    }
+		@include col-mediaquery-max(3){
+			h1, .slogan{
+				display: inline-block;
+			}
+		}
+  }
+
+	@include col-mediaquery-max(3){
+		.header-block.header-right{
+			.header-block-wrapper{
+				padding:1em 1em;
+				box-shadow: -2px 2px 4px #ccc;
+				background-color: #fff;
+			}
 		}
 	}
 
@@ -92,9 +107,8 @@ header[role="banner"]{
       margin: 0;
     }
     &>section{
-      background-color: #fff;
 			overflow: hidden;
-      width:11em;
+      background-color: #fff;
       // margin:0 0 0 -1em;
       box-sizing:content-box;
       transition: all 0.4s ease-in-out;
@@ -104,11 +118,15 @@ header[role="banner"]{
       box-sizing: content-box;
       z-index:100;
     }
+		// appears on hover only on big screens
 		@include col-mediaquery-min(3){
+			&>section{
 				max-height:0px;
 				padding:0.01em 1em;
 				transition-delay: 2s;
 				position: absolute;
+	      width:11em;
+			}
 
 			@include hover{
 				&>section{
@@ -364,6 +382,7 @@ header[role="banner"]{
 			// 	}
       // }
 			ul.menu{
+				text-align: right;
 				li{
 					display: block;
 				}
@@ -392,20 +411,24 @@ header[role="banner"]{
       overflow: hidden;
     }
     &>ul.links{
+      // background-color: #fff;
+      overflow: hidden;
+      // display: inline-block;
+      margin:0;
+      box-sizing:content-box;
+      // outline: 1px solid blue;
+      // transition-delay: 2s;
+    }
+
+		@include col-mediaquery-min(3){
+			&>ul.links{
+				width:3.5em;
 				position: absolute;
 				top:17px;
 				right:0;
-      // background-color: #fff;
-      overflow: hidden;
-      width:3.5em;
-      // display: inline-block;
-      height:1px;
-      padding:0.01em 0;
-      margin:0;
-      box-sizing:content-box;
 				transition: all 0.4s ease-in-out;
-      // outline: 1px solid blue;
+				padding:0.01em 0;
-      // transition-delay: 2s;
+				height:1px;
 			}
 			@include hover{
 				&>ul.links{
@@ -415,6 +438,12 @@ header[role="banner"]{
 					// box-shadow: 0 0 10px #ccc;
 				}
 			}
+		}
+
+		@include col-mediaquery-max(3){
+			h2{display: none;}
+
+		}
     li{
       list-style: none;
       padding:0;