Text interfering with the navbar when scrolling down
Question
Hello, I'm still new to web development. and I really need help with this one, When scrolling down, the text interferes with my navbar for some reason. I tried every position I can think of, I think it has to do with margin. but I don't really know. I posted the code for you guys to help me. Thank you to everyone who wants to help!
function navSlide() { const burger = document.querySelector(".burger"); const nav = document.querySelector(".nav-links"); const navLinks = document.querySelectorAll(".nav-links li"); burger.addEventListener("click", () => { //Toggle Nav nav.classList.toggle("nav-active"); //Animate Links navLinks.forEach((link, index) => { if (link.style.animation) { link.style.animation = "" } else { link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;b } }); //Burger Animation burger.classList.toggle("toggle"); }); } navSlide();
* { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap'); .background{ width: 100%; height: 100vh; background-image: linear-gradient(0deg, rgba(93,73,84,0.5), rgba(93,73,85,0.2)), url(/images/beachpic.jpeg); background-size: cover; background-position: center; position: relative; overflow: hidden; clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%); }.nav{ position: fixed; top: 0; width: 100%; display: flex; justify-content: space-around; align-items: center; min-height: 8vh; background-color: #5D4954; font-family: "Poppins", sans-serif; }.nav-links { display: flex; justify-content: space-around; width: 30%; font-family: 'Poppins', sans-serif;; }.nav-links li { list-style: none; }.nav-links a { color: rgb(226, 226, 226); text-decoration: none; letter-spacing: 3px; font-weight: bold; font-size: 14px; }.burger { display: none; }.burger div { width: 25px; height: 3px; background-color: rgb(226, 226, 226); margin: 5px; transition: all 0.3s ease; } @media screen and (max-width: 1024px) {.nav-links { width: 60%; } } @media screen and (max-width: 768px) { body { overflow-x: hidden; }.nav-links { position: fixed; right: 0px; height: 92vh; top: 8vh; background-color: #5D4954; display: flex; flex-direction: column; align-items: center; width: 20%; transform: translateX(100%); transition: transform 0.5s ease-in; }.nav-links li { opacity: 0; }.burger { display: block; cursor: pointer; } }.nav-active { transform: translateX(0%); } @keyframes navLinkFade { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }.toggle.line1 { transform: rotate(-45deg) translate(-5px, 6px); }.toggle.line2 { opacity: 0; }.toggle.line3 { transform: rotate(45deg) translate(-5px, -6px); }.logo{ position: relative; height: 70px; }.link::after{ content: ''; display: block; width: 0; height: 2px; background: #fbfcfd; transition: width.3s; }.link:hover::after{ width: 100%; transition: width.3s; }.header{ width: 100%; background-color:rgba(0, 0, 0,0.5) }.header ul{ text-align: center; }.header ul li{ list-style: none; display: inline-block; }.header ul li a{ display: block; text-decoration: none; text-transform: uppercase; color:white; font-size: 100%; letter-spacing: 2px; font-weight: 600; padding: 25px; transition: width.3s; }.content{ color: #fbfcfd; position: absolute; top: 50%; left: 8%; transform: translateY(-50%); z-index: 2; }.heading1{ font-size: 70px; margin-bottom: 10px 0 30px; background:transparent; position: relative; animation: text 5s 1; } @keyframes text{ 0%{ color: transparent; margin-bottom: -40px; } 30%{ letter-spacing: 4px; margin-bottom: -40px; } 85%{ letter-spacing: 3px%; margin-bottom: -40px; } }.welcome{ font-size: 30px; position: relative; }
<head> <link rel="stylesheet" href="home.css"> </head> <header class="site-header"></header> <div class="background"> <div class="nav"> <img src="/images/logo.png" alt="" class="logo"> <ul class="nav-links"> <li><a href="about.html"class="link">About</a></li> <li><a href="#"class="link">Work</a></li> <li><a href="#"class="link">Projects</a></li> </ul> <div class="burger"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> </div> </nav> <p style="font-size: 1px;">قيل قديقال</p> <div class="content"> <small class="welcome">Welcome to</small> <h1 class="heading1">H2O <br>Tech<br>Solutions</h1> </div> </div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <p style="font-size: 1px;">قيل قديقال</p> <div class="container"> <h1>About Us</h1> <p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima nisi placeat nihil labore, in quis dolor rem asperiores id ex, perspiciatis facilis tempora dolores rerum odit quidem ut, nesciunt quibusdam adipisci quod unde modi. Dolore incidunt libero ipsam ipsum doloribus,</p> </div> <p>Lorem ipsum. dolor sit amet consectetur adipisicing elit, Doloribus. exercitationem!</p> <script src="script.js"></script>2 answers
solution1
0 2021-01-31 17:48:05
Try giving the navigation bar a higher z-index, than the content.
From CSS-Tricks :
The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only affects elements that have a position value other than static (the default).
solution2
0 ACCPTED 2021-01-31 17:57:02
Add z-index: 3; to .nav :
function navSlide() { const burger = document.querySelector(".burger"); const nav = document.querySelector(".nav-links"); const navLinks = document.querySelectorAll(".nav-links li"); burger.addEventListener("click", () => { //Toggle Nav nav.classList.toggle("nav-active"); //Animate Links navLinks.forEach((link, index) => { if (link.style.animation) { link.style.animation = "" } else { link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;b } }); //Burger Animation burger.classList.toggle("toggle"); }); } navSlide();
* { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap'); .background{ width: 100%; height: 100vh; background-image: linear-gradient(0deg, rgba(93,73,84,0.5), rgba(93,73,85,0.2)), url(/images/beachpic.jpeg); background-size: cover; background-position: center; position: relative; overflow: hidden; clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%); }.nav{ position: fixed; z-index: 3; top: 0; width: 100%; display: flex; justify-content: space-around; align-items: center; min-height: 8vh; background-color: #5D4954; font-family: "Poppins", sans-serif; }.nav-links { display: flex; justify-content: space-around; width: 30%; font-family: 'Poppins', sans-serif;; }.nav-links li { list-style: none; }.nav-links a { color: rgb(226, 226, 226); text-decoration: none; letter-spacing: 3px; font-weight: bold; font-size: 14px; }.burger { display: none; }.burger div { width: 25px; height: 3px; background-color: rgb(226, 226, 226); margin: 5px; transition: all 0.3s ease; } @media screen and (max-width: 1024px) {.nav-links { width: 60%; } } @media screen and (max-width: 768px) { body { overflow-x: hidden; }.nav-links { position: fixed; right: 0px; height: 92vh; top: 8vh; background-color: #5D4954; display: flex; flex-direction: column; align-items: center; width: 20%; transform: translateX(100%); transition: transform 0.5s ease-in; }.nav-links li { opacity: 0; }.burger { display: block; cursor: pointer; } }.nav-active { transform: translateX(0%); } @keyframes navLinkFade { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }.toggle.line1 { transform: rotate(-45deg) translate(-5px, 6px); }.toggle.line2 { opacity: 0; }.toggle.line3 { transform: rotate(45deg) translate(-5px, -6px); }.logo{ position: relative; height: 70px; }.link::after{ content: ''; display: block; width: 0; height: 2px; background: #fbfcfd; transition: width.3s; }.link:hover::after{ width: 100%; transition: width.3s; }.header{ width: 100%; background-color:rgba(0, 0, 0,0.5) }.header ul{ text-align: center; }.header ul li{ list-style: none; display: inline-block; }.header ul li a{ display: block; text-decoration: none; text-transform: uppercase; color:white; font-size: 100%; letter-spacing: 2px; font-weight: 600; padding: 25px; transition: width.3s; }.content{ color: #fbfcfd; position: absolute; top: 50%; left: 8%; transform: translateY(-50%); z-index: 2; }.heading1{ font-size: 70px; margin-bottom: 10px 0 30px; background:transparent; position: relative; animation: text 5s 1; } @keyframes text{ 0%{ color: transparent; margin-bottom: -40px; } 30%{ letter-spacing: 4px; margin-bottom: -40px; } 85%{ letter-spacing: 3px%; margin-bottom: -40px; } }.welcome{ font-size: 30px; position: relative; }
<head> <link rel="stylesheet" href="home.css"> </head> <header class="site-header"></header> <div class="background"> <div class="nav"> <img src="/images/logo.png" alt="" class="logo"> <ul class="nav-links"> <li><a href="about.html"class="link">About</a></li> <li><a href="#"class="link">Work</a></li> <li><a href="#"class="link">Projects</a></li> </ul> <div class="burger"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> </div> </nav> <p style="font-size: 1px;">قيل قديقال</p> <div class="content"> <small class="welcome">Welcome to</small> <h1 class="heading1">H2O <br>Tech<br>Solutions</h1> </div> </div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <p style="font-size: 1px;">قيل قديقال</p> <div class="container"> <h1>About Us</h1> <p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima nisi placeat nihil labore, in quis dolor rem asperiores id ex, perspiciatis facilis tempora dolores rerum odit quidem ut, nesciunt quibusdam adipisci quod unde modi. Dolore incidunt libero ipsam ipsum doloribus,</p> </div> <p>Lorem ipsum. dolor sit amet consectetur adipisicing elit, Doloribus. exercitationem!</p> <script src="script.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Navbar not fixing to top when scrolling down
Sticky text when scrolling down
How to show different logo color when scrolling down in navbar in JS
Sticky navbar dropdown not working on safari when scrolling down
Automatically scroll a horizontal navbar div when scrolling to down
Navbar change when scrolling down, how to make the change responsive?
How to move text up when scrolling down?
Slide up/down both navbar and bottom toolbar when scrolling up/down (Like Pinterest App)
Top image collapsed into navbar after scrolling down
Bootstrap, make a navbar sticky after scrolling down?
Related Tags