sticky menu/navigation, box shadow not working when menu is fixed

Question

I have this issue with my current menu/navigation that when the menu becomes fixed the box shadow disappears (same thing with border). But when the menu is no longer fixed it comes back. Other than that the menu works as intended.

 const nav = document.querySelector("#navigation"); const navTop = nav.offsetTop; window.addEventListener("scroll", stickyNavigation); function stickyNavigation() { if (window.scrollY >= navTop) { nav.classList.add("fixed-nav"); console.log("sticky!!"); } else { nav.classList.remove("fixed-nav"); } } 

 nav { display: flex; align-items: flex-start; flex-wrap: nowrap; height: 100%; width: 100vw; /* border-bottom: 3px solid #f341cc; */ box-shadow: 0px 3px #f341cc; } nav a { padding: 30px; background-color: black; text-decoration: none; color: #f341cc; font-size: 2em; font-family: "Varela Round", sans-serif; text-align: center; width: 40%; flex-grow: 1; text-decoration: none; } /* ---- sticky menu --- */ .fixed-nav { position: fixed; top: 0; /*box-shadow: 0px 3px #f341cc;*/ z-index: 1; } body { height: 200vh; } 

 <nav id="navigation"> <a href="">something</a> <a href="">something</a> <a href="">something</a> </nav> 

Answer 1

Remove the height: 100% from the nav . When the element becomes fixed it probably uses the body as the position parent, and the height: 100% becomes the whole screen, which pushes the shadow and the border out of the screen.

Example:

 const nav = document.querySelector("#navigation"); const navTop = nav.offsetTop; window.addEventListener("scroll", stickyNavigation); function stickyNavigation() { if (window.scrollY >= navTop) { nav.classList.add("fixed-nav"); console.log("sticky!!"); } else { nav.classList.remove("fixed-nav"); } } 

 nav { display: flex; align-items: flex-start; flex-wrap: nowrap; /* remove - height: 100%; */ width: 100vw; /* border-bottom: 3px solid #f341cc; */ box-shadow: 0px 3px #f341cc; } nav a { padding: 30px; background-color: black; text-decoration: none; color: #f341cc; font-size: 2em; font-family: "Varela Round", sans-serif; text-align: center; width: 40%; flex-grow: 1; text-decoration: none; } /* ---- sticky menu --- */ .fixed-nav { position: fixed; top: 0; /*box-shadow: 0px 3px #f341cc;*/ z-index: 1; } body { height: 200vh; } 

 <nav id="navigation"> <a href="">something</a> <a href="">something</a> <a href="">something</a> </nav> 

If you need height: 100% for the non fixed position, you can use the :not() pseudo class:

nav:not(.fixed-nav) {
    height: 100%;
}

Answer 2

Remove from here height 100%

nav {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    /* height: 100%; // Delete this */
    width: 100vw;
    /* border-bottom: 3px solid #f341cc; */
    box-shadow: 0px 3px #f341cc;
}