navbar-tutorial.md

Here’s the ULTIMATE beginner version — broken into tiny 5–10 line chunks, with W3Schools links for every single concept you might not know yet.

You can literally copy-paste one chunk at a time and see it work step by step.

Phase 1: Create the HTML (index.html)

Chunk 1/10 – Basic page setup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Navbar - Step by Step</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

W3Schools links:

Chunk 2/10 – Start the navbar

    <nav id="navbar">
        <div class="nav-content">
            <h1>My Website</h1>

Explanation: <nav> = navigation bar, id="navbar" lets JavaScript find it later
W3Schools: https://www.w3schools.com/tags/tag_nav.asp

Chunk 3/10 – Add the menu links

            <ul class="nav-links">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>

W3Schools:

Chunk 4/10 – Add lots of content so we can scroll

    <div class="content">
        <h2>Scroll down to see the magic!</h2>
        <p>Keep scrolling... the navbar will stick!</p>
        <br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br>
        <p>You reached the bottom!</p>
    </div>

W3Schools: https://www.w3schools.com/tags/tag_br.asp

Chunk 5/10 – Connect JavaScript and close tags

    <script src="script.js"></script>
</body>
</html>

W3Schools: https://www.w3schools.com/tags/tag_script.asp

Phase 2: Create the CSS (style.css)

Chunk 6/20 – Remove default spacing

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

W3Schools:

Chunk 7/20 – Basic navbar look

#navbar {
    background-color: #333;
    color: white;
    padding: 20px 0;
    text-align: center;
}

W3Schools: https://www.w3schools.com/css/css_background.asp

Chunk 8/20 – Make the inside content look nice

.nav-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

W3Schools Flexbox: https://www.w3schools.com/css/css3_flexbox.asp

Chunk 9/20 – Style the links

.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

W3Schools:

Chunk 10/20 – Hover effect on links

.nav-links a:hover {
    background-color: #555;
    padding: 10px 15px;
    border-radius: 5px;
}

W3Schools: https://www.w3schools.com/css/css_pseudo_classes.asp

Chunk 11/20 – THE MOST IMPORTANT PART – the sticky class

#navbar.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

W3Schools links (super important!):

Chunk 12/20 – Style the main page content

.content {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.8;
}

Phase 3: Create the JavaScript (script.js)

Chunk 13/18 – Wait for page to load

// Wait until everything is ready
document.addEventListener("DOMContentLoaded", function() {

W3Schools: https://www.w3schools.com/js/js_htmldom_events.asp

Chunk 14/18 – Find the navbar

    // Step 1: Grab the navbar
    const navbar = document.getElementById("navbar");

W3Schools: https://www.w3schools.com/jsref/met_document_getelementbyid.asp

Chunk 15/18 – Remember its original position

    // Step 2: Remember where the navbar starts
    const stickyPoint = navbar.offsetTop;

W3Schools: https://www.w3schools.com/jsref/prop_element_offsettop.asp

Chunk 16/18 – Create the scroll checker function

    // Step 3: This function runs every time you scroll
    function checkScroll() {
        if (window.pageYOffset >= stickyPoint) {
            navbar.classList.add("sticky");
        } else {
            navbar.classList.remove("sticky");
        }
    }

W3Schools:

Chunk 17/18 – Listen for scrolling

    // Step 4: Run checkScroll every time user scrolls
    window.addEventListener("scroll", checkScroll);
});

W3Schools: https://www.w3schools.com/jsref/event_onscroll.asp

Chunk 18/18 – (Optional) Add a tiny smooth feel

// Bonus: Make the change feel smooth
const style = document.createElement('style');
style.innerHTML = '#navbar { transition: all 0.3s ease; }';
document.head.appendChild(style);

Final Tiny Summary (Copy-Paste Ready)

Save the 3 files exactly as shown
Put them in one folder
Double-click index.html
Scroll down → the navbar sticks!

You now understand every single line with official W3Schools references.
You’re officially no longer a beginner — you’re a sticky-navbar ninja! 🥷

Have fun changing colors, adding your own logo, or making it transparent!

decagondev/navbar-tutorial.md

Select an option

No results found

Select an option

No results found

Phase 1: Create the HTML (index.html)

Phase 2: Create the CSS (style.css)

Phase 3: Create the JavaScript (script.js)

Final Tiny Summary (Copy-Paste Ready)