Update extra.css

Author: SherinDaher-Runai

docs/stylesheets/extra.css

@@ -7,7 +7,6 @@
 /* Header styling */
 .md-header {
     background-color: #000000 !important;
-    top: 32px;
 }
 
 .md-header__title {
@@ -289,23 +288,47 @@ html .md-nav__button.md-logo img {
   box-shadow: inset 0 -3px 0 0 #76B900;
 }
 
-/* Top banner */
-.banner {
+/* Fix background flicker */
+html, body {
+    margin: 0;
+    padding: 0;
+    background-color: #fff;
+  }
+  
+  /* Banner at top */
+  .banner {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
-    z-index: 9999; /* Ensure it's above the header */
+    height: 36px;
     background-color: #76B900;
-    padding: 8px 16px;
+    color: white;
     font-family: 'Roboto', sans-serif;
     font-weight: 600;
     font-size: 14px;
-    color: white;
-    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   }
 
-  /* Remove old .banner a styles */
+  /* Header sits below the banner */
+  .md-header {
+    position: fixed !important;
+    top: 36px !important; /* match banner height */
+    width: 100%;
+    z-index: 9998;
+    background-color: #000000 !important;
+  }
+  
+  /* Push main content below both */
+  .md-main {
+    margin-top: 92px !important; /* 36px banner + 56px header */
+  }
+  
+  
 
 
 /* Sidebar: Default all links to black */