responsive header

web/themes/custom/popsu/sass/pages/partials/_header_footer.scss

@@ -280,6 +280,9 @@
 		background: black;
 		border-radius: 3px;
 		z-index: 1;
+		@include breakpoint(small down) {
+			width: 36px;
+		}
 	}
 }
 .close-block{
@@ -310,12 +313,25 @@
 	span{
 		margin-bottom: 12px;	
 		transform-origin: 4px 0px;
+		@include breakpoint(small down) {
+			margin-bottom: 8px;
+		}
 	}
 }
 
 #header-top-right{
 	border-left: solid black 0.5px;
+	&.small-1 {
+		@include breakpoint(small down) {
+			-ms-flex:0 0 15%;
+			flex:0 0 15% !important;
+			max-width: 15%!important;
+			.columns {
+			  flex: 1 1 0px !important;
+			}
+		  }
 
+	  }
 
 	.header_top_right_container{
 		position: absolute;

web/themes/custom/popsu/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "MyWebSite",
+  "short_name": "MySite",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

web/themes/custom/popsu/templates/layout/html.html.twig

@@ -38,6 +38,12 @@
     <title>{{ head_title|safe_join(' | ') }}</title>
     <css-placeholder token="{{ placeholder_token }}">
     <js-placeholder token="{{ placeholder_token }}">
+    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <meta name="apple-mobile-web-app-title" content="Popsu" />
+    <link rel="manifest" href="/site.webmanifest" />
   </head>
   <body{{ attributes.addClass(body_classes) }}>
     {#