style/new_menu.css

@@ -1,4 +1,4 @@
-.menubar {
+#menubar {
     background-color: darkslategrey;
     color: azure;
     position: fixed;
@@ -8,40 +8,37 @@
     height: 40px;
 }
 
-.menubar_logo img {
-    max-width: 13%;
-    padding: 5px;
+#menubar_logo img {
+    max-width: 20px;
+    padding: 10px;
 }
 
-.menubar_hamburger {
+#menubar_hamburger {
     position: absolute;
     top: 2px;
     right: 0;
     padding: 5px;
 }
 
-.sidebar_open_long {display: none;}
-.sidebar_close_long {display: none;}
-
-.sidebar_open_short {
+#sidebar_open_short {
     display: block;
     font-size: larger;
-    background-color: slategrey;
+    background-color: transparent;
     color: azure;
     border: none;
     border-radius: 2px;
 }
 
-.sidebar_close_short {
+#sidebar_close_short {
     display: none;
     font-size: larger;
-    background-color: slategrey;
+    background-color: transparent;
     color: azure;
     border: none;
     border-radius: 2px;
 }
 
-.sidebar {
+#sidebar {
     position: fixed;
     top: 40px;
     right: 0;
@@ -54,7 +51,7 @@
     transition: 0.7s;
 }
 
-.sidebar a {
+#sidebar a {
     padding: 8px 8px 8px 8px;
     margin-left: 20px;
     margin-top: 10px;
@@ -67,14 +64,18 @@
     display: block;
   }
 
-.sidebar_social {
+#sidebar_logo {
+    
+}
+
+#sidebar_social {
     position: absolute;
     bottom: 50px;
     width: 100%;
 }
 
 @media screen and (min-width: 800px) {
-    .menubar {
+    #menubar {
         position: -webkit-sticky;
         position: sticky;
         top: 0px;

style/new_style.css

@@ -8,9 +8,10 @@ body {
 
 .header-image-home {
     background-image: url(https://via.placeholder.com/375x335webp);
-    min-height: 50%;
+    min-height: 40%;
+    max-height: 45%;
     width: 100%;
-    position: fixed;
+    position: fixed; /* Try setting this to relative and .page-title to absolute */
     top: 40px;
     left: 0;
 }
@@ -23,3 +24,7 @@ body {
     box-shadow: 3px;
     color: azure;
 }
+
+.content {
+    margin-top: 95%;
+}