[SOLVED] HTML CSS Navbar stays at bottom of content unintentionally

Issue

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.

Code

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,[email protected],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:[email protected];400;600&family=Orbitron:[email protected]&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.

Current:

Currently, content in the header (not styled) and other page content in other sections are appearing above the navbar.
image of current page

Expected:

Content not inside nav tag appear below navigation content, and have navbar stay at top of page.
expected result

Thanks in advance!

Solution

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:[email protected];400;600&family=Orbitron:[email protected]&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,[email protected],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>

Answered By – Joan Lara Ganau

Answer Checked By – David Goodson (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *