feat(header): updated so header works with and without banner image, started Vehicles page

src/Header/Header.css

@@ -9,7 +9,7 @@ header {
 	align-items: center;
 	justify-content: space-between;
 	background-color: #1f1f1f;
-	position: absolute;
+	/* position: absolute; */
 	z-index: 1;
 	top: 0;
 	left: 0;
@@ -163,7 +163,6 @@ nav a li:hover {
 :root {
 	--fade-starts-at-bottom: 90%;
 	--fade-starts-at-top: 96%;
-	--banner-text-pos-left: 15svw;
 	--banner-text-background: white;
 }
 
@@ -181,14 +180,14 @@ nav a li:hover {
 
 /* used to postiion title and sub title */
 #BannerHeader div {
-	margin-top: 25%;
+	margin-top: 30svh;
+	padding-left: 15svw;
 }
 
 #BannerHeader h1 {
 	display: flex;
 	width: fit-content;
 	margin: 0px;
-	margin-left: var(--banner-text-pos-left);
 
 	font-size: 80px; /* todo make larger */
 	font-weight: normal;
@@ -200,8 +199,6 @@ nav a li:hover {
 	display: flex;
 	width: fit-content;
 
-	margin-left: var(--banner-text-pos-left);
-
 	font-size: xx-large;
 	font-weight: normal;
 

src/Header/Header.js

@@ -17,6 +17,7 @@ export default function Header() {
 		titleText: "UCalgary Baja",
 		subtitleText: "Hello",
 		imgUrl: "https://picsum.photos/200",
+		headerPostion: "absolute",
 	});
 
 	/**
@@ -50,7 +51,13 @@ export default function Header() {
 
 	return (
 		<>
-			<header>
+			<header
+				style={{
+					position:
+						bannerInfo.titleText === "" && bannerInfo.imgUrl === ""
+							? "relative"
+							: "absolute",
+				}}>
 				<Link to={"/"}>
 					<img
 						id="logo"
@@ -66,8 +73,8 @@ export default function Header() {
 						<Link to={"/About"}>
 							<li>ABOUT</li>
 						</Link>
-						<Link to={"/Teams"}>
-							<li>TEAM</li>
+						<Link to={"/Vehicles"}>
+							<li>OUR VEHICLES</li>
 						</Link>
 						<Link to={"/"}>
 							<li>HISTORY</li>