<body><div class="nav" id="Nav"><a href="#top">Home</a><a href="#nav1">Shop</a><a href="#nav2">Blog</a><a href="#nav3">About</a><a href="#nav4">Contact</a></div><div id="page"><img src="xyz" height="300" width="300" style="display: block; margin: 0 auto;"></div><div id="nav1"></div></body><style>.nav { text-align: center; background-color: #edb021; position: absolute; width: 50%; top: 45%; left: 50%; margin-left: -25%; border: 1px solid black; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; line-height: 4em; border-radius: 10px;}.nav a { text-decoration: none; color: #000; font-size: 1em; font-weight: 300; margin: 5%;}.nav a:hover { color: #EDB021; text-decoration: underline;}.scrolldown { top: 0vh; width: 100%; text-align: center; position: fixed; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid black; border-radius: 0; background-color: rgba(255,255,255,0.06); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); animation-direction: normal; animation: navChange 0.25s linear 1; margin-left: -50%; z-index: 9999;}.scrollup { text-align: center; background-color: #edb021; position: absolute; width: 50%; left: 50%; margin-left: -25%; border: 1px solid black; line-height: 3em; border-radius: 10px; animation-direction: normal; z-index: 9999; animation: navChangeBack 0.25s linear 1;}@keyframes navChange { 0% { border: 1px solid black; border-radius: 10px; position: fixed; width: 50%; left: 50%; margin-left: -25%; border: 1px solid black; } 100% { border: 1px solid rgba(0, 0, 0, 0); border-bottom: 1px solid black; border-radius: 0; position: fixed; top: 0%; width: 100%; margin-left: -50%; }}@keyframes navChangeBack { 0% { border: 1px solid rgba(0, 0, 0, 0); border-bottom: 1px solid black; border-radius: 0; width: 100%; margin-left: -50%; } 100% { border: 1px solid black; border-radius: 10px; width: 50%; left: 50%; margin-left: -25%; border: 1px solid black; }}@media only screen and (max-width: 600px) { .nav.pagenav { display: none; } #Nav { display: none; }}</style><script> //Determine Scroll Directionvar dir = []function logScrollDirection() { var previous = window.scrollY; window.addEventListener('scroll', function(){ window.scrollY > previous ? dir = "down" : dir = "up" ; previous = window.scrollY; }); return dir;}logScrollDirection();//Scroll Direction Determined//Sticky Nav Startwindow.onscroll = function() { logScrollDirection(); expAndStick();};var nav = document.getElementById("Nav");var sticky = nav.offsetTop;function expAndStick() { if ((window.pageYOffset >= sticky)&&(dir == "down")) { nav.classList.remove("scrollup"); nav.classList.add("scrolldown"); } else if ((window.pageYOffset <= sticky)&&(dir == "up")) { nav.classList.remove("scrolldown"); nav.classList.add("scrollup"); } }</script>Click to open image shows unwanted space
this is the code I used in Elementor to create the header but it leaves a long unwanted margin after the nav bar
I already tried removing line height, margins everything but I do not want to use z-index for another container to cover up the space
also, I added this in a separate header, and footer plugin which comes along with Elementkit