Product Landing Page

I want to fix the nav section, but other sections get overlapped somehow when I click the nav links. I don’t know how to do this. Please help me.


Test case

Your #nav-bar should always be at the top of the viewport.

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"
        />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
            integrity="sha512-+qUZ5QYQ3QqZ7Z3Q3Z3Q3Z3Q3Z3Q3Z3Q3Z3Q3Z3Q3Q3Q3Z3Q3Q3Q3Z3Q3Z3Q3Z3Q3Q3Q3Q3Q3Q3Z3Q3Q3Q3Z3Q=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        />
        <link
            rel="preconnect"
            href="https://fonts.gstatic.com"
        />
        <link
            href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
            rel="stylesheet"
        />
        <script
            src="https://kit.fontawesome.com/6d3b596002.js"
            crossorigin="anonymous"
        ></script>
        <link
            rel="stylesheet"
            href="styles.css"
        />
        <title>Product Landing Page</title>
    </head>

    <body>
        <header
            id="header"
            class="header-container"
        >
            <img
                id="header-img"
                src="https://cdn.cdnlogo.com/logos/d/26/death-note.svg"
                alt="logo"
                class="img-logo"
            />
            <nav
                id="nav-bar"
                class="navbar-container"
            >
                <a
                    href="#home"
                    class="nav-link"
                    >Home</a
                >
                <a
                    href="#features"
                    class="nav-link"
                    >Features</a
                >
                <a
                    href="#products"
                    class="nav-link"
                    >Products</a
                >
                <a
                    href="#contact"
                    class="nav-link"
                    >Contact</a
                >
            </nav>
        </header>

        <main
            id="home"
            class="main-container"
        >
            <form
                id="form"
                action="https://www.freecodecamp.com/email-submit"
            >
                <section class="section-container first">
                    <h1
                        id="hero-title"
                        class="section-header header-black"
                    >
                        Anime action figures and collectibles for sale at the
                        best prices online.
                    </h1>
                    <p
                        id="hero-subtitle"
                        class="sub-title"
                    >
                        To get started, enter your email address below.
                    </p>
                    <input
                        type="email"
                        name="email"
                        id="email"
                        placeholder="Enter your email"
                        class="input-email"
                    />
                    <input
                        type="submit"
                        name="submit"
                        id="submit"
                        value="Submit"
                        class="big-btn btn"
                    />
                </section>

                <section class="section-container">
                    <iframe
                        src="https://www.youtube.com/embed/NlJZ-YgAt-c"
                        title="Death Note | OFFICIAL TRAILER"
                        frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                        allowfullscreen
                        id="video"
                        loading="lazy"
                    ></iframe>
                </section>

                <section
                    class="section-container"
                    id="features"
                >
                    <h2
                        id="features-title"
                        class="section-header"
                    >
                        We offer the best selection of anime action figures and
                        collectibles.
                    </h2>
                    <p
                        id="features-subtitle"
                        class="sub-title"
                    >
                        The figurines are available in a range of sizes, from
                        tiny miniatures to enormous, intricate monuments.
                        Numerous points of articulation on figures enable a
                        variety of dynamic poses and display options.
                    </p>
                    <div class="widget-container">
                        <div class="widget-item">
                            <i class="fas fa-shipping-fast"></i>
                            <div class="widget-info">
                                <h3 class="widget-item-title">Fast Shipping</h3>
                                <p class="widget-item-subtitle">
                                    We offer fast shipping on all orders.
                                </p>
                            </div>
                        </div>

                        <div class="widget-item">
                            <i class="fas fa-star"></i>
                            <div class="widget-info">
                                <h3 class="widget-item-title">
                                    Quality Products
                                </h3>
                                <p class="widget-item-subtitle">
                                    We offer the lowest prices on all of our
                                    products.
                                </p>
                            </div>
                        </div>

                        <div class="widget-item">
                            <i class="fas fa-headset"></i>
                            <div class="widget-info">
                                <h3 class="widget-item-title">
                                    Customer Service
                                </h3>
                                <p class="widget-item-subtitle">
                                    We offer great customer service on all
                                    orders.
                                </p>
                            </div>
                        </div>
                    </div>
                </section>

                <section
                    class="section-container"
                    id="products"
                >
                    <h2
                        id="products-title"
                        class="section-header"
                    >
                        We offer a wide selection of anime action figures and
                        collectibles.
                    </h2>
                    <p
                        id="products-subtitle"
                        class="sub-title"
                    >
                        Capturing the Essence of Your Favorite Anime Characters:
                        The Intricately Designed and Highly Detailed World of
                        Anime Action Figures and Collectibles.
                    </p>

                    <div class="widget-container">
                        <div class="product">
                            <img
                                class="product-img"
                                loading="lazy"
                                src="https://oniri-creations.com/wp-content/uploads/2018/05/death-note-statue-1.png"
                            />
                            <h3 class="product-title">Light and Ryuk</h3>
                            <ul class="product-features">
                                <li class="product-features-list">
                                    <i class="fab fa-angellist"></i>
                                    <span class="product-desc">
                                        100% Authentic
                                    </span>
                                </li>
                                <li class="product-features-list">
                                    <i
                                        class="fab fa-creative-commons-remix"
                                    ></i>
                                    <span class="product-desc">
                                        Brand New
                                    </span>
                                </li>
                                <li class="product-features-list">
                                    <i class="fas fa-route"></i>
                                    <span class="product-desc">
                                        Free Shipping
                                    </span>
                                </li>
                                <li class="product-features-list">
                                    <i class="fas fa-star"></i>
                                    <span class="product-desc">
                                        Quality Product
                                    </span>
                                </li>
                            </ul>
                            <span class="price">$354</span>
                            <input
                                type="button"
                                value="Buy Now"
                                class="buy-btn"
                            />
                        </div>

                        <div class="product">
                            <img
                                class="product-img"
                                loading="lazy"
                                src="https://oniri-creations.com/wp-content/uploads/2022/10/Misa-illustration.png"
                                alt="Misa Amane"
                            />
                            <h3 class="product-title">Misa Amane</h3>
                            <ul class="product-features">
                                <li class="product-features-list">
                                    <i class="fab fa-angellist"></i>
                                    <span class="product-desc">
                                        100% Authentic
                                    </span>
                                </li>
                                <li class="product-features-list">
                                    <i
                                        class="fab fa-creative-commons-remix"
                                    ></i>
                                    <span class="product-desc">
                                        Brand New
                                    </span>
                                </li>
                                <li class="product-features-list">
                                    <i class="fas fa-route"></i>
                                    <span class="product-desc">
                                        Free Shipping
                                    </span>
                                </li>
                                <li class="product-features-list">
                                    <i class="fas fa-star"></i>
                                    <span class="product-desc">
                                        Quality Product
                                    </span>
                                </li>
                            </ul>
                            <span class="price">$354</span>
                            <input
                                type="button"
                                value="Buy Now"
                                class="buy-btn"
                            />
                        </div>

                        <div class="product">
                            <img
                                class="product-img"
                                loading="lazy"
                                src="https://oniri-creations.com/wp-content/uploads/2019/09/illustration.png"
                                alt="L and Watari"
                            />
                            <h3 class="product-title">L and Watari</h3>
                            <ul class="product-features">
                                <li class="product-features-list">
                                    <i class="fab fa-angellist"></i>
                                    <span class="product-desc">
                                        100% Authentic
                                    </span>
                                </li>
                                <li class="product-features-list">
                                    <i
                                        class="fab fa-creative-commons-remix"
                                    ></i>
                                    <span class="product-desc">
                                        Brand New
                                    </span>
                                </li>
                                <li class="product-features-list">
                                    <i class="fas fa-route"></i>
                                    <span class="product-desc">
                                        Free Shipping
                                    </span>
                                </li>
                                <li class="product-features-list">
                                    <i class="fas fa-star"></i>
                                    <span class="product-desc">
                                        Quality Product
                                    </span>
                                </li>
                            </ul>
                            <span class="price">$354</span>
                            <input
                                type="button"
                                value="Buy Now"
                                class="buy-btn"
                            />
                        </div>
                    </div>
                </section>

                <section
                    class="section-container"
                    id="contact"
                >
                    <h2
                        id="contact-title"
                        class="section-header"
                    >
                        Contact us for more information.
                    </h2>
                    <p
                        id="contact-subtitle"
                        class="sub-title"
                    >
                        We have a wide selection of anime action figures and
                        collectibles from your favorite anime series such as
                        Dragon Ball, Naruto, One Piece, Bleach, and more. Low
                        prices, fast shipping, and great customer service.
                    </p>
                    <address class="address">
                        <a
                            href="tel:1-555-555-5555"
                            class="contact"
                            >1-555-555-5555</a
                        >
                        <p class="contact">
                            600 Amphitheatre Parkway Mountain View, CA 94043 US
                        </p>
                        <a
                            href="mailto:animeshop@animie.co"
                            class="contact"
                        >
                            Email
                        </a>
                    </address>
                </section>
            </form>
        </main>
    </body>
</html>


CSS


@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url(https://fonts.googleapis.com/css?family=Raleway:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);
@import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,regular,italic,500,500italic,700,700italic,900,900italic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,regular,italic,600,600italic,700,700italic,800,800italic);

:root {
    /* CSS HEX */
    --smoky-black: rgba(16, 11, 0, 0.795);
    --light-sea-green: #22aaa1ff;
    --snow: #fcf7f8ff;
    --dodger-blue: #2191fbff;
    --icterine: #f5f749ff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* border: 1px solid #df5924; */
}

.header-container {
    display: flex;
    flex-direction: row;
    background-color: var(--snow);
    align-items: center;
    width: 100%;
    position: fixed;
    padding: 0.5em 0;
    z-index: 1;
    top: 0;
    border-bottom: 2px solid var(--light-sea-green);

}

#header-img {
    width: 20%;
    display: block;
}

.navbar-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;

}

.nav-link {
    font-size: 2em;
    font-family: 'Open Sans', sans-serif;
    text-decoration: none;
    color: var(--smoky-black);
    transition: all 0.3s ease-in-out;
}


.nav-link:hover {
    color: var(--light-sea-green);
    transform: scale(1.1);
    transition: all 0.3s ease-in-out;

}



.main-container {
    display: flex;
    flex-direction: column;
    background: var(--snow);
    color: var(--smoky-black);
    position: absolute;
    top: 10%;
}

.section-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 3rem;
    position: relative;
    top: 10%;
}

.first {
    background: linear-gradient(275deg,
            rgba(0, 0, 0, 0.801),
            rgb(0, 0, 0));
    padding: 2rem;
    color: var(--snow);
    width: 100%;
}

.section-header {
    font-size: 3em;
    width: 80%;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    margin-bottom: 1rem;
    line-height: 1.2em;
    color: var(--smoky-black);
}

#hero-title {
    color: var(--snow);
}

.section-header::first-letter {
    font-size: 1.5em;
    color: var(--light-sea-green);
}

.sub-title {
    font-size: 1.5em;
    width: 80%;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    margin-bottom: 3rem;
}

.input-email {
    width: 60%;
    color: var(--smoky-black);
    padding: 1rem;
    max-width: 755px;
    min-width: 150px;
    margin-bottom: 1rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5em;
    border: none;
    border-radius: .2em;
}

#email:focus {
    outline: 2px solid var(--light-sea-green);
}

.big-btn {
    width: 15%;
    padding: 1em;
    font-family: 'Raleway', sans-serif;
    font-size: 1.5em;
    color: var(--snow);
    background-color: var(--light-sea-green);
    border: none;
    cursor: pointer;
    border-radius: .5em;
    max-width: 255px;
    min-width: 155px;
}

.big-btn:hover {
    background-color: var(--dodger-blue);
}

#video {
    display: flex;
    flex-direction: column;
    place-items: center;
    width: 80%;
    min-width: 20%;
    max-width: 1000px;
    border-radius: 14px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

.widget-container {
    display: flex;
    width: 100%;
    justify-content: space-around;
    flex-wrap: wrap;
}

.widget-item,
.product {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20%;
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 3rem;
    min-width: 400px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    border: none;
}

.product-img {
    max-width: 100%;
    max-height: 100%;
    height: 350px;
    display: block;
}

.widget-item:hover,
.product:hover {
    transform: scale(1.1);
    transition: all 0.3s ease-in-out;
}

.widget-item:focus {
    background-attachment: fixed;
}

.widget-item-title,
.product-title {
    font-size: 2em;
    font-family: 'Open Sans', sans-serif;
    color: var(--smoky-black);
    text-align: center;
}

.widget-item-title::first-letter {
    font-size: 1.5em;
    color: var(--light-sea-green);
}

.widget-item-subtitle,
.price {
    font-size: 1.5em;
    font-family: 'Open Sans', sans-serif;
    color: var(--smoky-black);
    text-align: center;
}

i {
    font-size: 3em;
    color: var(--light-sea-green);
}

.product-features-list {
    display: flex;
    align-items: center;
    font-size: 1.5em;
    gap: 1em;
    font-family: 'Open Sans', sans-serif;
    color: var(--smoky-black);
    text-align: center;
    margin: 1rem 0;
}

.product-features-list i {
    font-size: 1em;
    color: var(--light-sea-green);
}

.buy-btn {
    text-align: center;
    width: 50%;
    padding: 1rem;
    border-radius: 12px;
    margin: 1rem 0;
    min-width: 150px;
    background-color: var(--light-sea-green);
    color: var(--snow);
    font-size: 1.5em;
    font-family: 'Raleway', sans-serif;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.buy-btn:hover {
    background-color: var(--smoky-black);
    color: var(--snow);
}


.address {
    display: flex;
    flex-direction: column;
    place-items: center;
    gap: 1em;
}

.contact {
    font-size: 1.5em;
    font-family: 'Open Sans', sans-serif;
    color: var(--smoky-black);
    text-align: center;
}

@media screen and (max-width: 768px) {
    .header-container {
        flex-direction: column;
    }

    #header-img {
        width: 90%;
        max-width: 350px;
    }

    .navbar-container {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        font-size: 1em;
    }

    .nav-link {
        font-size: 1.5em;
    }

    .section-header {
        font-size: 2em;
    }

    .sub-title {
        font-size: 1em;
    }

    .input-email {
        width: 80%;
        font-size: 1em;
    }

    .big-btn {
        width: 30%;
        font-size: 1em;
    }

    #video {
        width: 100%;
        min-width: 80%;
        max-width: 90%;
    }

    .widget-item {
        flex-direction: row;
    }
}

You can use scroll-padding

Put it on an html selector and use scroll-padding-top with the height of the header. Then in your media query do it again to account for the taller header when you stack it.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.