CODEWITHSUNDEEP
htmlcsssticky
LeeSwaggers
LeeSwaggers

Reputation: 33

Can't make navbar fixed with sticky position CSS

I've been struggling quite a bit with this issue. I've made a navbar with two dropdowns and animations. What I want to do now, is to make it fixed, whenever one scrolls X pixels (I've sat it to 5px in my code). Basically when you scroll past the content above the navbar, it should be fixed.

I have a nav tag with the entire navbar, on which I've added the CSS (in the attempt to make it sticky): 

position:sticky;
position:-webkit-sticky;
top:5px;

I have read a lot of other posts about the issue, but can't seem to find any of the mentioned issues in my code..

What I have checked for / tried:

I know this can also be done with Javascript, but I really want to make it work by just using CSS.

I would really appreciate any help!

My Code:

*{
    margin:0;
    padding:0;
}

body {
    margin-bottom:3000px; /*add scrolling to page*/
}

p {
    display: block;
}

.nav-container {
    /*sticky part---------------------*/
    position:sticky;
    position: -webkit-sticky;
    top:5px;

    animation-name: navbar-animation;
    animation-duration: 1s;
    animation-fill-mode: none;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-direction: normal;
    /*WEBKIT*/
    -webkit-animation-name: navbar-animation;
    -webkit-animation-duration:1s;
    -webkit-animation-fill-mode: none;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
}
@keyframes navbar-animation {
    0% {
        transform: translate(0, -60px);
        opacity:1;
    }
    100% {
        transform: translate(0, 0);
        opacity:1;
    }
}
@-webkit-keyframes navbar-animation {
    0% {
        transform: translate(0, -60px);
        opacity: 1;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

.navbar {
    background-color: #BABABA;
    display:flex;
    float:left;
    width:100%;
    height: 55px;
    position:relative;
    flex-wrap:nowrap;
    min-width: 500px;
    box-shadow: 0px 2px 5px #7A7A7A;
    z-index:-2;
    justify-content:center;
}

.navbar-item, .dropdown-menu-item, .dropdown-sub1-menu-item {
    list-style:none;
}

.navbar-item {
    display:flex;
    align-items:center;
    font-family: 'Roboto Mono', monospace, Helvetica;
    font-size:17px;
}
.navbar-item a {
    display:inline-block;
    padding: 16px 15px;
}

.navbar-item a:hover {
    color:white;
}
.navbar-item:hover {
    background-color:grey;
}

.dropdown-menu {
    display: none;
    list-style:none;
    position:absolute;
    background-color: #f3f3f3;
    width: 140px;
    border-radius: 0px 0px 5px 5px;
    top:56px;
    box-shadow: 0px 1px 5px grey;

    animation-name: dropdown-menu-animation;
    animation-iteration-count: 1;
    animation-duration: 120ms;
    animation-fill-mode: none;
    animation-timing-function: linear;
    animation-direction: normal;

    /*Chrome/Safari*/
    -webkit-animation-name: dropdown-menu-animation;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 120ms;
    -webkit-animation-fill-mode: none;
    -webkit-animation-timing-function: linear;
    -webkit-animation-direction: normal;
}

@keyframes dropdown-menu-animation {
    0% {
        transform: translate(0, -5px);
        opacity: 1;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@-webkit-keyframes dropdown-menu-animation {
    0% {
        transform: translate(0, -5px);
        opacity: 1;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

.dropdown-menu-item {
    display:block;
}

.dropdown-menu-item:hover {
    background-color: grey;
}

.dropdown-menu-item a {
    display: block;
    width: 100%;
    padding-left:15px;
}
a, a:visited {
    text-decoration: none;
    color:black;
}

#dropdown-toggle-hover:hover .dropdown-menu{
    display:block;
}

.dropdown-sub1-menu {
    display:none;
    position: absolute;
    left:139px;
    top: -0px;
    background-color:#f3f3f3;
    width: 158px;
    border-radius: 0px 0px 5px 0px;
    box-shadow: 0px 1px 5px grey;
    z-index: -1;

    animation-name: dropdown-sub1-menu-animation;
    animation-iteration-count: 1;
    animation-duration: 120ms;
    animation-fill-mode: none;
    animation-timing-function: linear;
    animation-direction: normal;
    /*Chrome/Safari*/
    -webkit-animation-name: dropdown-sub1-menu-animation;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 120ms;
    -webkit-animation-fill-mode: none;
    -webkit-animation-timing-function: linear;
    -webkit-animation-direction: normal;
}

@keyframes dropdown-sub1-menu-animation {
    0% {
        transform: translate(-3px, 0);
        opacity:1;
    }

    100% {
        transform: translate(0, 0);
        opacity:1;
    }
}
@-webkit-keyframes dropdown-sub1-menu-animation {
    0% {
        transform: translate(-3px, 0);
        opacity:1;
    }

    100% {
        transform: translate(0, 0);
        opacity:1;
    }
}

.dropdown-sub1-menu-item {
    display:block;
}

.dropdown-sub1-menu-item:hover {
    background-color:grey;
}
#dropdown-sub1-menu-item1-toggle:hover .dropdown-sub1-menu {
    display:block;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <title>Lund</title>
</head>

<header>
    <div>
        <p>Something here</p>
    </div>
</header>

<body>
    <nav class="nav-container">
        <ul class="navbar">
            <li class="navbar-item"><a href="#">Home</a></li>
            <li class="navbar-item" id="dropdown-toggle-hover"><a href="#">Projects <i class="fas fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li class="dropdown-menu-item" id="dropdown-sub1-menu-item1-toggle"><a href="#">Project 1 <i class="fas fa-caret-right"></i></a>
                        <ul class="dropdown-sub1-menu">
                            <li class="dropdown-sub1-menu-item"><a href="#">About Project</a></li>
                            <li class="dropdown-sub1-menu-item"><a href="#">Source Code</a></li>
                            <li class="dropdown-sub1-menu-item"><a href="#">Participants</a></li>
                            <li class="dropdown-sub1-menu-item"><a href="#">Other</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-menu-item"><a href="#">Projekt 2</a></li>
                    <li class="dropdown-menu-item"><a href="#">Projekt 3</a></li>
                    <li class="dropdown-menu-item"><a href="#">Projekt 4</a></li>
                </ul></li>
            <li class="navbar-item"><a href="#">About Me</a></li>
            <li class="navbar-item"><a href="#">CV</a></li>
        </ul>
    </nav>

<main>

</main>

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

EDIT: Spelling...

Upvotes: 2

Views: 851

Answers (1)

jeanpaulxiao
jeanpaulxiao

Reputation: 323

Based on the CSS/HTML you've provided, the issue seems to be this CSS rule:

body {
    margin-bottom:3000px; /*add scrolling to page*/
}

Replace margin with actual height

body {
    height:3000px; /*add scrolling to page*/
}

And the position:sticky works.

Upvotes: 3

Related Questions