0

I'm trying to make a website where there is a menu bar on top. on some particularly long pages, I don't want the user to have to scroll all the way back up to access it. When I use position sticky, it works, but then after a certain amount of scrolling it disappears. The distance where it disappears is constant. Does anyone know how to fix this?

html:

<nav>
<ul class="menu-area">
    <li><a href="./index.html">Home</a></li>
    <li><a href="./Acclaims.html">Acclaims</a></li>
    <li><a href="https://www.youtube.com/user/asdf" target="_blank">Youtube</a></li>
    <li>
        <a href="https://www.google.com/search?asdf"
           target="_blank">Images</a></li>
    <li><a href="./contact.html">Contact</a></li>
</ul>

css:

.menu-area li a {
    text-decoration: none;
    color: #000;
    letter-spacing: 4px;
    text-transform: uppercase;
    display: block;
    padding: 0 25px;
    font-size: 14px;
    line-height: 30px;
    z-index: 1;
}

.menu-area li {
    list-style: none;
    display: inline-block;
}

nav {
    padding: 10px 20px 10px 10px;
    text-align: center;
    background: #eaedf2;
    margin: auto;
    width: calc(100%);

    position: sticky;
    top: 0;
}

.menu-area li a:hover {
    background: black;
    color: #eaedf2;
}
Roshan Prabhakar
  • 164
  • 1
  • 9

1 Answers1

0

Could you please provide your HTML + CSS code on codepen (or whatever you prefer)?

From my point of view, position sticky is not ready for productive sites, at least without providing a proper fallback (https://caniuse.com/#search=position%3A%20sticky).

Consider to simply use a javascript solution. The're tons of solutions doing this. Still one of my favorites is: Headroom.js - https://wicky.nillia.ms/headroom.js

If you just want to use a JS solution as a fallback try this: https://modernizr.com/download?csspositionsticky-setclasses&q=position

Thomas
  • 41
  • 4