Make NavBar stick at top

[bsakai2000]

navbar component should stick to stop of screen as user scrolls

[JellyWang7]

Now it should be fixed in frontend branch

[bsakai2000]

Not sure this is fixed. Navbar is see through, which means it's unreadable when scrolled over other text.

We can put a different color background to distinguish it, but that creates a weird box (it doesn't extend to the top or sides)

diff --git a/src/app/navbar/navbar.component.css b/src/app/navbar/navbar.component.css
index 1dff455..80eb4eb 100644
--- a/src/app/navbar/navbar.component.css
+++ b/src/app/navbar/navbar.component.css
@@ -1,5 +1,6 @@
 .navbar{
     color:black;
+    background-color: lightgray;
 }
 .nav-item{
     color: black;

We could also keep it white but put some sort of delimiter between the navbar and content, but we have a similar issue with not reaching the sides

diff --git a/src/app/navbar/navbar.component.css b/src/app/navbar/navbar.component.css
index 1dff455..48cafb6 100644
--- a/src/app/navbar/navbar.component.css
+++ b/src/app/navbar/navbar.component.css
@@ -1,5 +1,8 @@
 .navbar{
     color:black;
+    background-color: white;
+    border-bottom-style: solid;
+    border-bottom-color: black;
 }
 .nav-item{
     color: black;

I'm not sure what the best way forward is