My navigation bar will not stick to the top of the screen, using `position: sticky`

Question

I am trying to create a website but I can't figure out how to make the navigation bar stick to the top using position: sticky.

This is my CSS for the div encompassing the nav bar, and a link to an entire codepen is below

    height: 40px;
    width: 100%;

    position: sticky;
    position: -webkit-sticky;
    top: 0;

    background: rgb(78, 78, 78);
}

Thanks in advance https://codepen.io/AwesomeDude/pen/eYZQQyJ

You should be using `position: fixed` as it is static .. and by how you are explaining, you want a "static" bar up top. `sticky` is a cross between `relative` and `fixed` .. Meaning once an element crosses a specific threshold (or position) when scrolling it 'becomes' fixed. — Zak, Sep 21 '20 at 23:00

score 3 · Answer 1 · answered Sep 21 '20 at 23:00

It seems to me like you want the nav tag itself to be the one that sticks to the top rather than the background. I moved the position: sticky code to be in a .nav block and that did the trick. Hope that makes sense :)

.nav {
     position: sticky;
    position: -webkit-sticky;
    top: 0;
}

score 0 · Answer 2 · answered Sep 21 '20 at 22:57

position:sticky acts like position:relative.

You should be using position: fixed

    height: 40px;
    width: 100%;

    position: fixed;
    position: -webkit-sticky;
    top: 0;

    background: rgb(78, 78, 78);
}

Gives the following result:

// efe find something to put here

let x = 0
while (x < 50) {
    let element = document.createElement("br");
    document.body.appendChild(element);
    x++;
}

:root {
    --navVertPadding: 10px;
    --navBorderRadius: 6px
}

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

body {
    background-color: rgb(17, 17, 17);
}

.body-light {
    background-color: rgb(223, 223, 223);
}

.nav-background {
    height: 40px;
    width: 100%;

    position: fixed;
    position: -webkit-sticky;
    top: 0;

    background: rgb(78, 78, 78);
}

.dropdown {
    width: 80%;
    height: 100%;

    margin: auto;

    background: rgb(78, 78, 78);
    display: flex;

    align-items: center;
    justify-content: space-around;
}

.dropdown button a {
    text-decoration: none;
    color: black;
}

.dropdown div {
    position: relative;
}

.dropdown ul {
    position: absolute;
    top: 50px;

    display: none;

    opacity: 0;

    width:  120px;
    height: auto;

    list-style: none;
}

.dropdown ul li a {
    padding-top: var(--navVertPadding);
    padding-bottom: var(--navVertPadding);

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: rgba(53, 198, 255, 0.63);

    transition: 500ms background-color;
}

.dropdown ul li {
    border-bottom: 1px solid black
}

.dropdown ul li:last-child {
    border-bottom: none;
}

.dropdown ul li:hover a {
    background-color: rgba(126, 214, 255, 0.678);
}

.dropdown button:hover ~ ul, .dropdown ul:hover {
    display: block;
    opacity: 1.0;
}

.dropdown ul a {
    color: black;
    text-decoration: none;
}

.dropdown button {
    background: none;
    color: black;
    border-radius: 5px;
    border: none;

    padding: 8px;

    font-size: 15 px;
    font-family: "Verdana";
    font-weight: bold;
    text-transform: uppercase;

    cursor: pointer;
    height: 50px;
}
 
.dropdown button::after {
    content: '';
    display: block;

    position: relative;

    background-color: black;
    border-radius: 10px;

    width:  0%;
    height: 3px;

    transition: 300ms width ease, 400ms background-color ease 1500ms;
}

.dropdown button:hover::after {
    width: 101%;
    background-color: rgb(243, 29, 214)
}

<nav class="nav">
            <div class="nav-background">
                <div class="dropdown" id="dropdown">
    
                    <button class="home">
                        <a href="site.html" class="home-link">
                            home
                        </a>
                    </button>
    
                    <div class="projects">
                        <button>
                            projects
                        </button>
                        <ul>
                            <li>
                                <a href="#">
                                    Example 1
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    Example 1
                                </a>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="minecraft">
                        <button>
                            minecraft
                        </button>
                        <ul>
                            <li>
                                <a href="#">
                                    datapacks
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    resourcepacks
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    resources
                                </a>
                            </li>
                        </ul>
                    </div>
    
                    <div class="generators">
                        <button>
                            generators
                        </button>
                        <ul>
                            <li>
                                <a href="#">
                                    Generator 1
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    Generator 2
                                </a>
                            </li>
                        </ul>
                    </div>
    
                    <div class="other">
                        <button>
                            about
                        </button>
                        <ul>
                            <li>
                                <a href="#">
                                    contact
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    feedback
                                </a>
                            </li>
                        </ul>
                    </div>
                    
                </div>
            </div>
        </nav>

My navigation bar will not stick to the top of the screen, using `position: sticky`

2 Answers2