My problem is that whenever I scroll down, a <section>
completely covers the navbar. The Navbar is fixed, and is set to be at the top.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://fonts.googleapis.com/css2?family=Gotu&display=swap"
rel="stylesheet"
/>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./style.css" />
<title>Pelicans</title>
</head>
<body>
<div class="navbar">
<a href="#home"
><img
class="logo"
height="100"
src="https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-1/p200x200/15068898_1226936174051780_7166698313496052354_o.jpg?_nc_cat=101&_nc_sid=dbb9e7&_nc_ohc=ocyXiBkw3rcAX8xha1J&_nc_ht=scontent-lax3-1.xx&_nc_tp=6&oh=a21d0f67f860f6befb0cdc68e01c3c2a&oe=5EB3D4BA"
width="100"
alt=""
/></a>
<a class="link" href="#home">Home</a>
<a class="link" href="#about">About</a>
<a class="link" href="#gallery">Gallery</a>
<a class="link-contact" href="#contact">Contact</a>
</div>
<section id="home"></section>
<section id="about"></section>
<section id="gallery"></section> <!-- Not in use yet -->
<section id="contact"></section> <!-- Not in use yet -->
</body>
</html>
CSS:
body {
background-color: #5cdb95;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
padding: 1em;
padding-top: 0em;
padding-bottom: 0em;
grid-gap: 0em;
background: #edf5e1;
grid-auto-rows: minmax(100px, auto);
border-bottom-style: solid;
border-bottom-color: #05386b;
font-family: "Gotu", sans-serif;
font-size: 25px;
}
.navbar > .link {
text-align: center;
text-decoration: none;
height: 100px;
padding: 32px;
transition: background-color 0.7s;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
font-family: inherit;
}
.navbar > .link:hover {
background-color: #8ee4af;
font-family: inherit;
}
.logo {
border-radius: 50%;
}
.link-contact {
padding-top: 0.6em;
text-align: center;
height: 65px;
width: 180px;
background-color: #379683;
text-decoration: none !important;
border-radius: 20px;
color: #edf5e1;
transition: background-color 0.7s;
font-family: inherit;
}
.link-contact:hover {
text-decoration: none !important;
color: #edf5e1;
background-color: #287566;
font-family: inherit;
}
#home {
background-color: blue;
height: 680px;
}
#about {
background-color: inherit;
height: 680px;
position: relative;
}
Note: The first section doesn't overlap the navbar, just the second section. Stack Overflow is telling me that too much of this question is code so here is some text...
It is occuring for z-index
issue.
Give it like this:
#about {
background-color: inherit;
height: 680px;
position: relative;
z-index: -99;
}