Fixes Header Bar Behavior

src/app/header/header-slider/header-slider.component.css

@@ -2,7 +2,7 @@
     background-color: #2e2e2e;
     width: 50%;
     height: 90vh;
-    position: absolute;
+    position: fixed;
     top: 10vh;
     right: 0;
     overflow: hidden !important;

src/app/header/header.component.css

@@ -1,8 +1,3 @@
-.wrapper {
-    width: 100vw;
-    overflow: hidden;
-}
-
 .header {
     top: 0;
     left: 0;
@@ -11,6 +6,7 @@
     width: 100vw;
 
     background-color: #2e2e2e;
+    z-index: 50;
 
     height: 10vh;
     min-height: 80px;
@@ -114,6 +110,10 @@ app-header-slider {
         max-width: 1333px;
     }
 
+    .slider-container {
+        display: none;
+    }
+
     .nav-links {
         all: unset;
         width: 50%;

src/app/header/header.component.html

@@ -1,5 +1,4 @@
-<div class="wrapper">
-    <div class="header">
+<div class="header">
     <div class="main" #header>
         <div class="logo">
             <a routerLink="">
@@ -55,9 +54,9 @@
             ></div>
         </div>
     </div>
-    </div>
+</div>
 
-    <div class="slider-container" #nav>
+<div class="slider-container" #nav>
     <app-header-slider
         [(state)]="navSliderStatus"
         [clickOutsideStopWatching]="userSliderStatus"
@@ -70,9 +69,9 @@
         >
         </app-nav-slider>
     </app-header-slider>
-    </div>
+</div>
 
-    <div class="slider-container" #user>
+<div class="slider-container" #user>
     <app-header-slider
         [(state)]="userSliderStatus"
         [ignoreClickOutside]="[header, nav]"
@@ -86,7 +85,6 @@
         >
         </app-user-slider>
     </app-header-slider>
-    </div>
 </div>
 
 <div class="header-spacer"></div>

src/app/header/header.component.ts

@@ -5,7 +5,7 @@ import {
     OnDestroy,
     OnInit,
     ViewChild,
-    ViewContainerRef,
+    ViewContainerRef, ViewEncapsulation,
 } from '@angular/core';
 import { faUser } from '@fortawesome/free-solid-svg-icons';
 import { LoginComponent } from './header-popup/login/login.component';

src/styles.css

@@ -6,6 +6,13 @@
     margin: 0 auto;
 }
 
+html, body {
+    width: 100vw;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    position: absolute;
+}
+
 h1,
 h2,
 h3,