fixing menu icon, and category name

web/data/head.html

@@ -30,6 +30,13 @@ body {
   overflow-x: hidden;
   background-color: black;
 }
+.category{
+  color: white;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
 h1#title {
   background-color: #0B173B;
@@ -288,7 +295,10 @@ pre.article_content {
 
 @media only screen and (max-width: 600px) {
   #small-menu{
-    display: block;
+    display: flex;
+    margin-left: 20px;
+    align-items: center;
+    gap: 5px;
   }
   .fa-home{
     display: none;
@@ -306,13 +316,16 @@ pre.article_content {
     color: white;
     display: grid;
     transition: background-color 0.5s var(--ease);
+    margin-left: 50px;
+    justify-content: left;
+    margin-top: 5px;
+    margin-bottom: 5px;
   }
   .hed{
-    padding-top: 5px;
-    padding-bottom: 5px;
     height: fit-content;
     display: grid;
     gap: 0 ;
+    justify-content: left;
   }
   .menu.show-menu > a{
     text-decoration: none;
@@ -440,6 +453,28 @@ html {
 .home-icon:hover i {
   color: #FF0000;
 }
+.menu-icon {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.bar1, .bar2, .bar3 {
+  width: 35px;
+  height: 5px;
+  background-color: white;
+  margin: 6px 0;
+  transition: 0.4s;
+}
+
+.change .bar1 {
+  transform: translate(0, 11px) rotate(-45deg);
+}
+
+.change .bar2 {opacity: 0;}
+
+.change .bar3 {
+  transform: translate(0, -11px) rotate(45deg);
+}
 
     </style>
 </head>