Navbar always at the top of viewport

The solution doesn’t work for me. I tried adding fixed, top to the #header as well as the #navbar.

I tried copying the code from the example page (using F12), which is .nav as shown below:

My navbar is always at the top of the viewport as required. Any ideas?

<body>
	<header id="header">
		<nav id="navbar" class="nav">
			<ul>
				<li><a href="https://github.com/#" target="_blank">Github</a></li>
				<li><a href="https://twitter.com/#" target="_blank">Twitter</a></li>
				<li><a href="https://www.youtube.com/channel/#" target="_blank">Youtube</a></li>
				<li><a href="#">Checklist</a></li>
				<li><a id="profile-link" href="#" target="_blank">About me</a></li>
			</ul>
		</nav>
	</header>
.nav {
        display: flex;
        justify-content: flex-end;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: var(--main-red);
        box-shadow: 0 2px 0 rgb(0 0 0 / 40%);
        z-index: 10;
}

#header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10;
}

#navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10;
        border-bottom: solid;
        justify-content: flex-end;
        background-color: #660022;
        border-bottom-color: white;
        border-width: 3px;
        }

Have you used the link tag to link the css to the html?

I believe so, it looks like this:

<head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles.css">
        <title>Portfolio</title>
</head>

Can you post your full html and css. It looks like you only posted one part of it.

Here it is:

<!DOCTYPE html>
<html>
		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">

		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">

		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Patua+One&display=swap" rel="stylesheet">

	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="styles.css">
		<title>Portfolio</title>
	</head>

	<body>
		<header id="header">
			<nav id="navbar" class="nav">
				<ul>
					<li><a href="https://github.com/#" target="_blank">Github</a></li>
					<li><a href="https://twitter.com/#" target="_blank">Twitter</a></li>
					<li><a href="https://www.youtube.com/channel/#" target="_blank">Youtube</a></li>
					<li><a href="#">Checklist</a></li>
					<li><a href="#" target="_blank">About me</a></li>
				</ul>
			</nav>
		</header>
		
		<main>
			<section id="welcome-section">
				<div>
					<h1>William Pegg</h1>
					<p>Aspiring Software and Web Developer</p>
				</div>
			</section>

			<section class="projects" id="projects">
				<h2>Websites</h2>
				<div class="websites-grid-container">
					<p id="site-title--1">Tribute Page</p>
					<a href="../tribute_page/FCC-tribute_page.html" target="_blank"><img id="site-img--1" src="https://user-images.githubusercontent.com/80556233/170703406-19adbafb-ded3-41f8-8450-6be4e3fb7b2e.jpg" alt="Tribute Page Thumbnail"></a>
					
					<p id="site-title--2">Survey Form</p>
					<a href="../survey_form/FCC-survey_form.html" target="_blank"><img id="site-img--2" src="https://user-images.githubusercontent.com/80556233/170703401-0dbf3cc0-0409-4126-8bd0-cd421cec6a07.jpg" alt="Survey Form Thumbnail"></a>
					
					<p id="site-title--3">Landing Page</p>
					<a href="../landing_page/index_landing_page.html" target="_blank"><img id="site-img--3" src="https://user-images.githubusercontent.com/80556233/170703388-f1b0b89f-f6a6-47c0-8531-2a85f43a1770.jpg" alt="Landing Page Thumbnail"></a>
					
					<p id="site-title--4">Technical Documentation</p>
					<a href="../technical_documentation/technical_documentation.html" target="_blank"><img id="site-img--4" src="https://user-images.githubusercontent.com/80556233/170703404-83620824-7eef-4e74-844b-7f69bf5cee2e.jpg" alt="Technical Documentation Thumbnail"></a>
					
					<p id="site-title--5">Cafe</p>
					<a href="../sun_and_moon_cafe/index.html" target="_blank"><img id="site-img--5" src="https://user-images.githubusercontent.com/80556233/170716354-d24032db-e04b-40fa-8a9b-8a52c37695cc.jpg" alt="Cafe Thumbnail"></a>
				</div>
			</section>

			<section class="projects">
				<h3>Games</h3>
				<div class="games-grid-container">
					<p id="game-title--1">The Magical Quest - Unity C# (beta)</p>
					<img id="game-img--1-a" src="https://user-images.githubusercontent.com/80556233/170703391-c425ea0b-7248-496f-9007-4b2d30953f3e.jpg" alt="Magical Quest Game Thumbnail 1">
					<img id="game-img--1-b" src="https://user-images.githubusercontent.com/80556233/170703392-a250fe60-2fb6-4a5b-a032-354d7dc0a488.jpg" alt="Magical Quest Game Thumbnail 2">
					<a href="C:/Users/willp/OneDrive/Projects/personal_site/web_games/block_breaker.html" target="_blank"><button id="play-button--1">PLAY</button></a>
					
					<p id="game-title--2">S.P.A.W. - Unity C# (pre-alpha)</p>
					<img id="game-img--2-a" src="https://user-images.githubusercontent.com/80556233/170703395-3faa84e2-2299-41e1-a72e-a24d52ce54dc.jpg" alt="Spaw Game Thumbanil 1">
					<img id="game-img--2-b" src="https://user-images.githubusercontent.com/80556233/170703399-7270fcfa-b1a3-43ab-aecb-c1fab669dad4.jpg" alt="Spaw Game Thumbnail 2">
					<a href="https://www.google.com/" target="_blank"><button id="play-button--2">PLAY</button></a>
					
					<p id="game-title--3">Cyberpunk Text Adventure - Python (pre-alpha)</p>
					<img id="game-img--3-a" src="https://user-images.githubusercontent.com/80556233/170703379-d4b49c8c-860c-4a0a-958a-fd4b309b9adf.jpg" alt="Cyberpunk Game Thumbnail 1">
					<img id="game-img--3-b" src="https://user-images.githubusercontent.com/80556233/170703379-d4b49c8c-860c-4a0a-958a-fd4b309b9adf.jpg" alt="Cyberpunk Game Thumbnail 2">
					<a><button id="play-button--3">PLAY</button></a>
				</div>
			</section>
		</main>
	</body>
</html>
@charset "utf-8";
/* CSS Document */
@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 

body {
	background-color: black;
}

.nav {
    display: flex;
    justify-content: flex-end;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--main-red);
    box-shadow: 0 2px 0 rgb(0 0 0 / 40%);
    z-index: 10;
}

#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
}

#navbar {
		position: fixed;
    top: 0;
		left: 0;
    width: 100%;
    z-index: 10;
		border-bottom: solid;
    justify-content: flex-end;
		background-color: #660022;
		border-bottom-color: white;
		border-width: 3px;
}

#navbar ul {
	list-style: none;
}

#navbar li {
	display: inline-block;
	background-color: #660022;
	padding: 8px;
	float:left;
	top: 0;
	margin-top: -10px;
	margin-bottom: 5px;
	margin-left: 10px;
	margin-right: 10px;
	
}

#navbar a {
	color: white;
}

/*--------------------------------------------------Welcome--*/
#welcome-section {
	height: 500px;
	min-width: 300px;
	background: #660022;
	border-style: solid;
	border-width: thin;
	border-radius: 5px;
	border-color: white;
	box-shadow: 0px -10px 50px -15px white;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 100px;
	position: relative;
}

#welcome-section h1 {
	color: white;
	font-family: 'Patua One', cursive;
	text-align: center;
	padding-top: 200px;
}

#welcome-section p {
	color: white;
	font-family: 'Courgette', cursive;
	text-align: center;
	text-decoration: underline;
}

/*-------------------------------------------------------Projects--*/
.projects {
	height: 1200px;
	min-width: 300px;
	background: #660022;
	border-style: solid;
	border-width: thin;
	border-radius: 5px;
	border-color: white;
	box-shadow: 0px -10px 50px -15px white;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 100px;
	margin-bottom: 100px;
	position: relative;
}

.projects h2 {
	color: white;
	text-align: center;
	font-family: 'Permanent Marker', cursive;
	font-size: 40px;
}

.projects h3 {
	color: white;
	text-align: center;
	font-family: 'Permanent Marker', cursive;
	font-size: 40px;
}

.projects p {
	color: white;
	font-size: 20px;
}	
	
/*--------------------------------------------------Websites--*/
.websites-grid-container {
	display: grid;
	grid-gap: 30px 50px;
  	grid-template-columns: 33.3% 33.3% 33.3%;
	grid-template-rows: 50px 300px 50px 300px;
	grid-template-areas:
		"title--1 title--2 title--3"
		"image--1 image--2 image--3"
		"title--4 title--5 empty"
		"image--4 image--5 empty";
		
	justify-content: space-evenly;
	text-align: center;
	margin-left: 100px;
	margin-right: 100px;
}

.project-tile {
	grid-area: empty;
}

#site-title--1 {
	grid-area: title--1;
}

#site-title--2 {
	grid-area: title--2;
}

#site-title--3 {
	grid-area: title--3;
}

#site-title--4 {
	grid-area: title--4;
}

#site-title--5 {
	grid-area: title--5;
}

#site-img--1 {
	grid-area: image--1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-style: solid;
	border-color: silver;
	border-radius: 5px;
	box-shadow: 0px 0px 10px 5px white;
}

#site-img--2 {
	grid-area: image--2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-style: solid;
	border-color: silver;
	border-radius: 5px;
	box-shadow: 0px 0px 10px 5px white;
}

#site-img--3 {
	grid-area: image--3;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-style: solid;
	border-color: silver;
	border-radius: 5px;
	box-shadow: 0px 0px 10px 5px white;
}

#site-img--4 {
	grid-area: image--4;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-style: solid;
	border-color: silver;
	border-radius: 5px;
	box-shadow: 0px 0px 10px 5px white;
}

#site-img--5 {
	grid-area: image--5;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-style: solid;
	border-color: silver;
	border-radius: 5px;
	box-shadow: 0px 0px 10px 5px white;
}

#site-img--1:hover {
	animation-name: img-hover;
	animation-fill-mode: forwards;
	animation-duration: 0.2s;
}

#site-img--2:hover {
	animation-name: img-hover;
	animation-fill-mode: forwards;
	animation-duration: 0.2s;
}

#site-img--3:hover {
	animation-name: img-hover;
	animation-fill-mode: forwards;
	animation-duration: 0.2s;
}

#site-img--4:hover {
	animation-name: img-hover;
	animation-fill-mode: forwards;
	animation-duration: 0.2s;
}

#site-img--5:hover {
	animation-name: img-hover;
	animation-fill-mode: forwards;
	animation-duration: 0.2s;
}

@keyframes img-hover {
	to {
		border-color: white;
		box-shadow: 0px 0px 10px 10px white;
	}
}

/*--------------------------------------------------Games--*/
.games-grid-container {
	display: grid;
	grid-gap: 30px 50px;
  	grid-template-columns: 33.3% 33.3% 33.3%;
	grid-template-rows: 50px 300px 300px 80px;
	grid-template-areas:
		"title--1        title--2        title--3"
		"img--1-a        img--2-a        img--3-a"
		"img--1-b        img--2-b        img--3-b"
		"play-button--1  play-button--2  play-button--3";
		
	justify-content: space-evenly;
	text-align: center;
	margin-left: 100px;
	margin-right: 100px;
}

#game-title--1 {
	grid-area: title--1;
}

#game-title--2 {
	grid-area: title--2;
}

#game-title--3 {
	grid-area: title--3;
}

#game-img--1-a {
	grid-area: img--1-a;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-style: solid;
	border-color: silver;
	box-shadow: 0px 0px 10px 5px white;
}
#game-img--1-b {
	grid-area: img--1-b;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-style: solid;
	border-color: silver;
	box-shadow: 0px 0px 10px 5px white;
}

#game-img--2-a {
	grid-area: img--2-a;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-style: solid;
	border-color: silver;
	box-shadow: 0px 0px 10px 5px white;
}

#game-img--2-b {
	grid-area: img--2-b;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-style: solid;
	border-color: silver;
	box-shadow: 0px 0px 10px 5px white;
}

#game-img--3-a {
	grid-area: img--3-a;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-style: solid;
	border-color: silver;
	box-shadow: 0px 0px 10px 5px white;
}

#game-img--3-b {
	grid-area: img--3-b;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-style: solid;
	border-color: silver;
	box-shadow: 0px 0px 10px 5px white;
}

#play-button--1 {
	background-color: white;
	cursor: pointer;
	border-style: solid;
	border-radius: 5px;
	border-color: white;
	color: black;
	width: 70%;
	height: 40px;
	font-size: 25px;
}

#play-button--2 {
	background-color: white;
	cursor: pointer;
	border-style: solid;
	border-radius: 5px;
	border-color: white;
	color: black;
	width: 70%;
	height: 40px;
	font-size: 25px;
}

#play-button--3 {
	background-color: white;
	cursor: pointer;
	border-style: solid;
	border-radius: 5px;
	border-color: white;
	color: black;
	width: 70%;
	height: 40px;
	font-size: 25px;
}

#play-button--1:hover {
	animation-name: play-game;
	animation-duration: 0.1s;
	animation-fill-mode: forwards;
}

#play-button--2:hover {
	animation-name: play-game;
	animation-duration: 0.1s;
	animation-fill-mode: forwards;
}

#play-button--3:hover {
	animation-name: play-game;
	animation-duration: 0.1s;
	animation-fill-mode: forwards;
}

@keyframes play-game {
	to {
	color: red;
	background-color: black;
	}
}
}


It has something to do with the @media query. If the CSS code is nested inside it doesn’t register the navbar being at the top, if I move the code outside the squiggly brace it works and I get all ticks in the checklist.