fix navbar

src/app/app.component.css

@@ -17,3 +17,6 @@
 a.top {
   bottom: 0;
 }
+body {
+  background-color: black;
+}

src/app/core/layout/header/header.component.css

@@ -9,7 +9,7 @@
   position: -webkit-sticky;
   position: sticky;
   top: 0;
-  height: 20px;
+  /* height: 20px; */
 
   z-index: 99999;
 }

src/app/core/layout/header/header.component.html

@@ -1,15 +1,30 @@
-<header id="navbar" #header>
-  <nav class="navbar fixed-top navbar-dark bg-dark navbar-expand-lg justify-content-center">
+<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark navbar-expand-lg justify-content-center">
     <a class="navbar-brand" href="/#top">
       <img class="logo" src="../../../assets/img/logo.png" width="50px">
       <!--<svg-icon src="../../../assets/logo.svg" [svgStyle]="{ 'width.xp':50 }"></svg-icon>-->
     </a>
-    <ul class="navbar-nav">
-      <li class="nav-item"><a class="nav-link" href="/#about-us">Who Are We?</a></li>
-      <li class="nav-item"><a class="nav-link" href="/#members">The Team</a></li>
-      <li class="nav-item"><a class="nav-link"  href="/#projects">Our Projects</a></li>
-      <li class="nav-item"><a class="nav-link" href="/#contact-us">Contact Us</a></li>
-      <!-- <li class="nav-item"><a class="nav-link" routerLink='/events' routerLinkActive="active">Events We Attend</a></li> -->
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+  <div class="collapse navbar-collapse" id="navbarSupportedContent">
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item">
+        <a class="nav-link" href="/#about-us">Who Are We?</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="/#members">The Team</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link"  href="/#projects">Our Projects</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="/#contact-us">Contact Us</a>
+      </li>
     </ul>
-  </nav>
-</header>
+    <!-- <form class="form-inline my-2 my-lg-0">
+      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+    </form> -->
+  </div>
+</nav>

src/app/modules/home/components/presentation-clip/presentation-clip.component.css

@@ -7,6 +7,7 @@
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
+  background-position: 50% 50%;
   padding: 20%;
 }
 
@@ -19,7 +20,6 @@
   right: 0px;
   overflow: hidden;
   background-size: cover;
-  background-color: transparent;
   background-repeat: no-repeat;
   background-position: 50% 50%;
   background-image: none;
@@ -34,8 +34,9 @@
   transform: translate(-50%, -50%);
   visibility: visible;
   opacity: 1;
-  width: 100%;
-  /* height: 100%; */
+  /* width: 100%; */
+  height: 100%;
+  background-color: black;
 }
 
 .presentation-vid {

src/app/modules/home/components/presentation-clip/presentation-clip.component.html

@@ -2,9 +2,7 @@
   <div class="video">
     <div class="video-div">
       <div id="player"></div>
-      <iframe *ngIf="this.showed" class="presentation-vid" [src]="videoUrl" frameborder="0"
-        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
-      <img *ngIf="!this.showed" class="presentation" src="assets/img/background.png">
+      <img class="presentation" src="assets/img/spacey.jpg">
     </div>
   </div>
 </section>

src/app/modules/home/components/presentation-clip/presentation-clip.component.ts

@@ -6,7 +6,7 @@ import { SafeUrl } from '@angular/platform-browser';
   templateUrl: './presentation-clip.component.html',
   styleUrls: ['./presentation-clip.component.css']
 })
-export class PresentationClipComponent implements OnInit, AfterViewInit {
+export class PresentationClipComponent implements OnInit {
   @Input() showed: boolean;
   @Input() videoUrl: SafeUrl;
 
@@ -15,16 +15,4 @@ export class PresentationClipComponent implements OnInit, AfterViewInit {
   ngOnInit() {
   }
 
-  async ngAfterViewInit() {
-    await this.delay(19000);
-    this.finished();
-  }
-
-  finished() {
-    this.showed = false;
-  }
-
-  delay(ms: number): Promise<void> {
-    return new Promise(resolve => setTimeout(resolve, ms));
-  }
 }

src/styles.css

@@ -2,7 +2,9 @@
 html {
   scroll-behavior: smooth;
 }
-
+body {
+  background-color: black;
+}
 .container {
   margin: 0 auto;
 }