'Why is the navigation bar not on top of the website?

I'm currently practicing html and css by creating a simple website.

My problem is I can't put the navigation bar above the website. I think the problem is the header or the background video. Here's the picture for more details. Click here

I think the gameplay paragraph will be on its own place when the navigation bar is resolved.

Now here's my html and css code.

body{
    background: rgba(236,232,225,255);
    color: #333;
    font-family: helvetica;
    font-size: 15px;
    line-height: .5cm;
    
    margin: 0;
    padding: 0;
}

/* links configuration here */
a:link{
    text-decoration: none;
    color:rgba(216, 108, 108, 0.932);
}

a:hover{
    color: blue;
}
/* links configuration ends here */

#webname{ /* heading here */
    padding-top: 15%;
    padding-bottom: 15%;
    
    text-align: center;
    font-size: 150px;
    font-family: VALORANT;
    color:white;
}

#navname{ /* navigation bar name */   
    font-size: 75px;
    font-family: VALORANT;
    color: rgba(216, 108, 108, 0.932);

    float: left;
    padding-left: 30px;

    -webkit-text-fill-color: rgba(216, 108, 108, 0.932);
    -webkit-text-stroke: 1px white;
}

.navlinks li{ /* navigation links */
    display: inline;
    padding-right: 15px;
    font-family: Helvetica;
    font-weight: bold;

    float: right;
}

#videoBG{ /* background vid */
    position: absolute;
    right: 0; 
    bottom: 30%;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    background-size: cover;
    overflow: hidden;
}

@media (min-aspect-ratio: 16/9){
    #videoBG{
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9){
    #videoBG{
        width: auto;
        height: 100%;
    }
}

@media (max-width: 767px){
    #videoBG{
        display: none;
    }

    body {
        background: url('valoClip.png');
        background-size: cover;
    }
}

@font-face {
    font-family: 'VALORANT';
    src: url(fonts/Valorant\ Font.ttf);
    font-style: normal;
}
<!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>Valorant</title>
    <link rel="stylesheet" href="Valorant.css">
</head>

<body>
    <!--Title-->
    <h1 id="webname">valoraNt</h1>
    <h1 id="navname">valoraNt</h1>
    
    <div class="wrapper">
        <video id="videoBG" poster="valoClip.png" autoplay muted loop>
            <source src="valoClip.mp4" type="video/mp4">
        </video>

    </div>

    <!--Navigation Bar here-->
    <nav id="navbar">
        <div class="container">
            <ul class="navlinks">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Gameplay</a></li>
                <li><a href="#">Guides</a></li>
            </ul>
        </div>
    </nav>
    
    <!--Gameplay here-->
    <div class="mainBody">
        
    <h3>GAMEPLAY</h3>
    
    <p>
    Valorant is an online <abbr title="First Person Shooter">FPS</abbr> game that defy the limits.
    Blend your style and experience on a global, competitive stage. The game has 13 rounds to attack
    and defend your side using sharp gunplay and tactical abilities. And, with one life per-round,
    you'll need to think faster than your opponent if you want to survive. Take on foes across
    Competitive and Unranked modes as well as Deathmatch and Spike Rush. There is also a Practice
    mode or tool to help you manage your aim.
    </p>
    
    <p><a href="https://www.youtube.com/watch?v=e_E9W2vsRbQ" target="_blank"> Watch the trailer here</a></p>
    
</div>

I'm not sure if the use of some code is right but you can also teach me the proper use of the code. Thanks for your help :>

htmlcssuinavigationbar


Solution 1:[1]

If I were you I'd put my logo in my nav as well if you are going to place it there. To put it on top and stay there you could use position: absolute. Now you could also make it fixed so when you scroll it stays on top. I edited your code, add this to your css and it will work as a fixed nav.

nav, #navname {
    position: fixed;
    top: 0;
}

#navname {
    position: absolute;
    left: 0;
}

.navlinks {
    position: fixed;
    right: 20px;
    top: 50px;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kenji Bailly

Related Questions