I'm currently making a navbar for my school's NJROTC program. However, when I add content, the content goes above the navbar, even though it's position is fixed and it's top position is set to 0px.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SKHS NJROTC - Dashboard</title>
<link rel="stylesheet" href="src/styles/root.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
</head>
<body>
<header>
<nav>
<div class="nav-left">
<h1 class="nav-left__brand">NJ<span>ROTC</span></h1>
<div class="nav-left__links">
<a href="#" rel="noopener noreferrer" class="nav-link" aria-label="Issues Link" title="Issues">Issues</a>
<a href="#" rel="noopener noreferrer" class="nav-link" aria-label="Promotions Link" title="Promotions">Promotions</a>
<a href="#" rel="noopener noreferrer" class="nav-link" aria-label="Events Link" title="Events">Events</a>
<a href="#" rel="noopener noreferrer" class="nav-button" aria-label="Create a new issue, promotion request, or event." title="Create an issue, event, or promotion request.">Create</a>
</div>
</div>
<div class="nav-right">
<div class="nav-right__app__drawer">
<span class="material-symbols-sharp">apps</span>
</div>
<div class="nav-right__profile"></div>
</div>
</nav>
<span class="directory">Charlie Company » Red Platoon » Promotions</span>
</header>
<main>
lorem
</main>
</body>
</html>
src/styles/root.css
@import "./modules/navigation.css";
@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300;400;600&family=Orbitron:wght@500&display=swap');
:root {
--accent-color: navy;
--heading-font-families: 'Orbitron', monospace, sans-serif;
--body-font-families: 'Jura', Arial, sans-serif;
}
body {
margin: 0px;
padding: 0px;
}
src/styles/modules/navigation.css
nav {
font-family: var(--heading-font-families);
text-transform: uppercase;
padding: 5px;
border-bottom: 2px solid #CECECE;
padding: 0rem 1rem 0rem 1rem;
display: flex;
align-items: center;
position: fixed;
top: 0px;
justify-content: space-between;
height: 5rem;
width: 100%;
}
nav .nav-left {
display: flex;
justify-content: left;
gap: 25px;
align-items: center;
}
nav .nav-left .nav-left__brand {
flex: 1;
font-size: 30px;
}
nav .nav-left .nav-left__brand span {
color: var(--accent-color);
}
nav .nav-left .nav-left__links {
flex: 2;
display: flex;
gap: 25px;
}
nav .nav-left .nav-left__links .nav-link {
text-decoration: none;
margin-top: 7px;
color: var(--accent-color);
}
nav .nav-left .nav-left__links .nav-link:hover {
border-bottom: 1px solid var(--accent-color);
}
nav .nav-left .nav-left__links .nav-button {
padding: 7px;
background-color: var(--accent-color);
color: white;
text-decoration: none;
}
header span.directory {
text-transform: uppercase;
font-family: var(--heading-font-families);
color: #CECECE;
font-size: 12px;
}
I can't figure out my problem. Is it something I simply overlooked? Thanks.
Currently, content in the header (not styled) and other page content in other sections are appearing above the navbar.
image of current page
Content not inside nav tag appear below navigation content, and have navbar stay at top of page.
expected result
Thanks in advance!
it's position is fixed and it's top position is set to 0px.
That's actually the problem, why did you make it fixed? Removind those 2 lines fixed the problem.
@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300;400;600&family=Orbitron:wght@500&display=swap');
:root {
--accent-color: navy;
--heading-font-families: 'Orbitron', monospace, sans-serif;
--body-font-families: 'Jura', Arial, sans-serif;
}
body {
margin: 0px;
padding: 0px;
}
nav {
font-family: var(--heading-font-families);
text-transform: uppercase;
padding: 5px;
border-bottom: 2px solid #CECECE;
padding: 0rem 1rem 0rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
height: 5rem;
width: 100%;
}
nav .nav-left {
display: flex;
justify-content: left;
gap: 25px;
align-items: center;
}
nav .nav-left .nav-left__brand {
flex: 1;
font-size: 30px;
}
nav .nav-left .nav-left__brand span {
color: var(--accent-color);
}
nav .nav-left .nav-left__links {
flex: 2;
display: flex;
gap: 25px;
}
nav .nav-left .nav-left__links .nav-link {
text-decoration: none;
margin-top: 7px;
color: var(--accent-color);
}
nav .nav-left .nav-left__links .nav-link:hover {
border-bottom: 1px solid var(--accent-color);
}
nav .nav-left .nav-left__links .nav-button {
padding: 7px;
background-color: var(--accent-color);
color: white;
text-decoration: none;
}
header span.directory {
text-transform: uppercase;
font-family: var(--heading-font-families);
color: #CECECE;
font-size: 12px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SKHS NJROTC - Dashboard</title>
<link rel="stylesheet" href="src/styles/root.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
</head>
<body>
<header>
<nav>
<div class="nav-left">
<h1 class="nav-left__brand">NJ<span>ROTC</span></h1>
<div class="nav-left__links">
<a href="#" rel="noopener noreferrer" class="nav-link" aria-label="Issues Link" title="Issues">Issues</a>
<a href="#" rel="noopener noreferrer" class="nav-link" aria-label="Promotions Link" title="Promotions">Promotions</a>
<a href="#" rel="noopener noreferrer" class="nav-link" aria-label="Events Link" title="Events">Events</a>
<a href="#" rel="noopener noreferrer" class="nav-button" aria-label="Create a new issue, promotion request, or event." title="Create an issue, event, or promotion request.">Create</a>
</div>
</div>
<div class="nav-right">
<div class="nav-right__app__drawer">
<span class="material-symbols-sharp">apps</span>
</div>
<div class="nav-right__profile"></div>
</div>
</nav>
<span class="directory">Charlie Company » Red Platoon » Promotions</span>
</header>
<main>
lorem
</main>
</body>
</html>