How should make my nav-bar top of the viewport?

HTML-CSS
1 
/* General Layout and Styling */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f4f4f4;
}

/* Header Section */
header {
    background-color: #333;
    color: white;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative; /* This allows positioning within header */
}

#header-img {
    height: 50px;
    width: auto;
}

#nav-bar {
    display: flex;
    position: fixed; /* Fixes the navbar at the top of the viewport */
    top: 0; /* Ensures it is positioned at the top of the viewport */
    left: 0; /* Aligns the navbar to the left edge */
    width: 100%; /* Makes the navbar span the full width */
    background-color: #333; /* Background color of navbar */
    padding-top: 80px; /* Adds padding inside navbar */
    z-index: 1000; /* Makes sure the navbar stays on top of other content */
    justify-content: center; /* Centers the nav items horizontally */
}

.nav-link {
    color: white;
    text-decoration: none;
    margin-left: 20px;
    font-size: 16px;
}

.nav-link:hover {
    text-decoration: underline;
}

/* Section Styling */
section {
    padding: 40px;
    margin: 20px 0;
    padding-top: 80px; /* Adds space below the fixed navbar so sections are visible */
}

h2 {
    font-size: 24px;
    color: #333;
}

ul {
    list-style-type: none;
    padding-left: 0;
}

ul li {
    font-size: 16px;
    margin-bottom: 10px;
}

/* Video Section */
#video-section iframe {
    width: 100%;
    max-width: 560px;
    height: 315px;
    margin-top: 20px;
}

/* Form Styling */
#form {
    display: flex;
    flex-direction: column;
    max-width: 300px;
    margin-top: 20px;
}

#email {
    padding: 10px;
    margin-bottom: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#submit {
    padding: 10px;
    font-size: 16px;
    border: none;
    background-color: #4CAF50;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

#submit:hover {
    background-color: #45a049;
}

/* Flexbox Layout for Smaller Screens */
@media screen and (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: flex-start;
    }

    #nav-bar {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 20px;
    }

    .nav-link {
        margin-left: 0;
        margin-bottom: 10px;
    }

    #video-section iframe {
        max-width: 100%;
    }

    #form {
        width: 100%;
    }
}
2

Hi there!

Post your html code too.

3
Product Landing Page 
<!-- Header Section -->
<header id="header">
    <img id="header-img" src="https://via.placeholder.com/150" alt="Product Logo">
    <nav id="nav-bar">
        <a href="#features" class="nav-link">Features</a>
        <a href="#pricing" class="nav-link">Pricing</a>
        <a href="#contact" class="nav-link">Contact</a>
    </nav>
</header>

<!-- Product Features Section -->
<section id="features">
    <h2>Product Features</h2>
    <p>Our product offers the following key features:</p>
    <ul>
        <li>Feature 1: Speed</li>
        <li>Feature 2: Efficiency</li>
        <li>Feature 3: Scalability</li>
        <li>Feature 4: Security</li>
    </ul>
</section>

<!-- Product Video Section -->
<section id="video-section">
    <h2>Watch the Demo Video</h2>
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>

<!-- Pricing Section -->
<section id="pricing">
    <h2>Pricing</h2>
    <p>Choose the best plan for you:</p>
    <ul>
        <li>Basic Plan: $9.99/month</li>
        <li>Premium Plan: $19.99/month</li>
        <li>Enterprise Plan: $49.99/month</li>
    </ul>
</section>

<!-- Contact Section -->
<section id="contact">
    <h2>Contact Us</h2>
    <p>Get in touch with us for more information or support.</p>
    <form id="form" action="https://www.freecodecamp.com/email-submit" method="POST">
        <input type="email" id="email" name="email" placeholder="Enter your email" required>
        <input type="submit" id="submit" value="Submit">
    </form>
</section>
4

Any idea how do you want it to look like as it is already on top and fixed too?

5

See, if you’re looking to just have it on top only then follow the steps:

  1. Delete the CSS style of navbar provided in #nav-bar.
  2. Change the relative position to fixed in the header and give it a width of 100% and top and left of 0.

And that’s it!

But you’ll have to change the CSS in other viewports too and try to avoid using margin for placements . If still have any doubt you can check out css-tricks they have in-depth study about things you can use that as a refresher.

6

You have the nav element as a child of header element.

So move the position, left and top properties to the header element.

1 Like