Why do I have two vertical scrollbars and how do I remove one? The lorem is just so I can scroll and see how it looks like :) Sorry for some of the content being in another language aswell.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow-x: hidden;
}
body {
background-color: #262626;
font-family: "Roboto Slab", serif;
position: relative;
overflow-x: hidden;
}
main {
width: 100vw;
height: 100vh;
}
#backdrop {
width: 90%;
height: 100%;
margin: 0 auto;
margin-top: 1rem;
border-radius: 1rem 1rem 0 0;
background-color: #727365;
}
#home-link {
color: #f2f2e4;
text-decoration: none;
font-size: 1.7rem;
font-family: "Space Mono", monospace;
font-weight: 400;
position: absolute;
top: 1.95rem;
left: 2.6rem;
}
/* Hamburger menu */
#menu a {
text-decoration: none;
color: #3f403b;
}
#menu a:hover {
color: #0c0c0c;
}
#menu-toggle {
display: block;
position: absolute;
top: 2.5rem;
right: 3rem;
z-index: 1;
}
#menu-checkbox {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
}
#menu-toggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #f2f2e4;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
opacity 0.55s ease;
}
#menu-toggle span:first-child {
transform-origin: 0% 0%;
}
#menu-toggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menu-checkbox:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #3f403b;
}
#menu-checkbox:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menu-checkbox:checked ~ span:nth-last-child(2) {
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
width: 60vw;
height: 70vh;
position: absolute;
right: -100px;
margin: -100px 0 0 0;
padding: 50px;
padding-top: 125px;
border-radius: 1rem;
background-color: #bfbfae;
list-style: none;
transform-origin: 0% 0%;
transform: translate(100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
#menu-checkbox:checked ~ ul {
transform: none;
opacity: 1;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 13px;
}
::-webkit-scrollbar-thumb {
border-radius: 100px;
border: 3px solid transparent;
background-clip: content-box;
background-color: rgb(88, 88, 88);
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(109, 109, 109);
}
/* Media queries */
#media only screen and (min-width: 600px) {
}
#media only screen and (min-width: 769px) {
#backdrop {
width: 98%;
height: 96.5%;
border-radius: 1rem;
}
#menu-checkbox {
display: none;
}
#menu-toggle span {
display: none;
}
#menu {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
transform: none !important;
background-color: #bfbfaee1;
padding: 0 1rem 0 1rem;
border-radius: 2rem;
font-family: monospace;
position: fixed;
top: 102vh;
right: 50%;
translate: 50% 0;
height: fit-content;
width: 45vw;
display: flex;
justify-content: space-between;
}
#menu li {
display: inline;
font-size: 1.2rem;
}
#active {
background-color: blue;
border-radius: 3rem;
}
.menu-links {
padding: 8px 35px 8px 35px;
}
#home-link {
display: flex;
justify-content: center;
position: static;
padding-top: 0.5rem;
}
}
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Överdäckningen | Startsida</title>
<link rel="stylesheet" href="css/style.css" />
<script src="script/js.js"></script>
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#200;300;400&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap"
rel="stylesheet"
/>
</head>
<body>
<main>
<div id="backdrop">
<header id="wrapper">
<nav>
ÖVERDÄCKNINGEN
<div id="menu-toggle">
<input id="menu-checkbox" type="checkbox" />
<span class="hamburger-span"></span>
<span class="hamburger-span"></span>
<span class="hamburger-span"></span>
<ul id="menu">
<li><a class="menu-links" id="active" href="#">Länk 1</a></li>
<li><a class="menu-links" href="#">Länk 2</a></li>
<li><a class="menu-links" href="#">Länk 3</a></li>
<li><a class="menu-links" href="#">Länk 4</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro amet
dolores nisi delectus ad inventore laboriosam alias, architecto eos
sunt quod eum maiores provident aspernatur debitis ratione minus
quaerat cumque veniam. Delectus commodi odit molestiae excepturi.
Doloremque rem tempora quod est veritatis earum accusamus vel fugiat
numquam reprehenderit ad labore repudiandae recusandae neque
voluptatum a nulla dignissimos sapiente ut, officiis fugit porro.
Aliquid unde incidunt quisquam. Veniam sunt doloremque modi in
voluptates inventore. In corrupti hic eos, incidunt iusto dignissimos
praesentium ut adipisci possimus officiis nesciunt, eveniet asperiores
illum laudantium aliquid dicta temporibus aut maxime dolor fugit totam
animi velit repudiandae ea? Esse, quod repudiandae amet iusto
temporibus aperiam dolore aliquid, magni sunt eveniet deleniti at
suscipit quasi adipisci, quo officia accusantium repellat nostrum
nemo! Reiciendis repellat omnis facilis qui excepturi assumenda id
laborum vero voluptas, vitae aspernatur eius magnam voluptates iusto,
dolores a fugit tenetur quo nostrum ipsa sequi cumque? Velit voluptate
et at aut iste obcaecati nisi, vitae repellat placeat quasi iusto.
Rerum vero eos earum nobis in inventore quos aliquid id, assumenda
tempora? Modi repudiandae dolorem architecto ut animi doloribus,
tempore possimus nihil ipsum accusamus fugiat laboriosam culpa iure
eum mollitia ab? Quidem quas minus necessitatibus voluptate, rem vero
eligendi possimus totam voluptates laudantium atque illo provident
quasi! Laboriosam quo odio quia in! Commodi voluptatem facilis eos
neque non, magni fugiat numquam consectetur, ipsa dolores ut rerum,
sint sequi quos illo obcaecati omnis harum laudantium error inventore
praesentium. Commodi fugit nostrum asperiores vel ducimus
reprehenderit quis suscipit laborum et fugiat libero eius assumenda
esse nobis, iste, impedit ipsa repudiandae aut aspernatur placeat
inventore! Eligendi sit in obcaecati quia repudiandae explicabo
officia eveniet omnis earum. Quibusdam alias amet quas nobis ullam
vitae enim quod facilis quam maiores! Rem consequatur distinctio
laudantium harum labore, minus qui molestiae suscipit modi libero quia
pariatur maxime hic, voluptate totam numquam, illo beatae voluptatibus
atque ipsa assumenda. Ipsum laudantium, modi nam repellat similique
vitae asperiores corrupti accusamus voluptate maxime harum expedita,
ipsa fugiat obcaecati deserunt porro impedit blanditiis error
reprehenderit temporibus ex at, molestias eius magnam? Voluptatem,
repellat ratione distinctio sit odio assumenda non ad fugit eligendi
nemo eveniet enim porro asperiores, aliquam aliquid? Officia
reiciendis libero tempore cupiditate rem laboriosam odit aspernatur!
Perferendis, id odit. Laudantium, culpa. Iure placeat deserunt
consectetur! Cumque, asperiores itaque nobis laudantium fuga fugit,
nemo autem maiores quo et perferendis laborum illum quis suscipit
eveniet ullam modi. Soluta cum eaque, sequi eveniet deserunt quia odio
officia tenetur vero corrupti labore eum voluptatum quam cumque fuga
hic numquam! Ullam, a dolore omnis nemo beatae at possimus eum
officiis molestiae exercitationem temporibus ab blanditiis voluptatum
reiciendis mollitia maxime perspiciatis harum nostrum officia deleniti
delectus. Hic quos molestias rerum ducimus fugiat consectetur facilis
perspiciatis animi, incidunt error ut tenetur similique unde molestiae
labore perferendis sapiente totam mollitia! Qui, similique ad eos,
cumque laudantium sapiente dolores quas omnis nam fuga exercitationem
blanditiis quaerat aut animi at beatae explicabo nihil adipisci.
Voluptatum qui repudiandae provident ratione, tenetur illum fuga quas
sapiente laborum ipsa obcaecati aut quod perspiciatis, ullam, veniam
explicabo nulla quaerat incidunt quidem! Est odit corrupti quibusdam
doloribus! Vel excepturi voluptatum, nobis voluptatem error
consectetur placeat quibusdam architecto! Molestiae ipsum suscipit est
aperiam veniam nobis laboriosam porro alias, sit eos repellendus
labore, ratione unde ducimus, accusantium illum voluptatum. Tempore,
rem repellat, laboriosam velit aut aliquid ipsa quibusdam consectetur
soluta veniam architecto totam! Reiciendis aliquid vel voluptatem
tempore ea, unde officiis. Corrupti perspiciatis voluptates, suscipit
vero voluptatibus corporis commodi excepturi reprehenderit eos et
nulla voluptatem fuga porro maxime quam eius distinctio, at id aliquid
itaque consequuntur ut repudiandae. Officiis, qui eveniet animi
officia voluptate ipsum, fuga, nisi doloribus in obcaecati quia error
eaque ad cupiditate aliquam alias modi placeat mollitia quibusdam
illum quas aliquid sint? Eligendi, nostrum maiores quas iste
recusandae quae natus impedit consequatur id ipsam dignissimos sequi
excepturi, nobis ducimus dolorum tenetur repellendus praesentium in
dicta atque velit voluptatum quia. Placeat culpa aliquid ab natus
quaerat non quasi cupiditate reprehenderit soluta, unde repellendus
illum, praesentium distinctio blanditiis quod magnam laborum excepturi
iusto molestiae accusamus dolorem nihil. Voluptatum, molestias
debitis? Ipsum veritatis iure suscipit, saepe alias aliquam enim,
officiis deleniti soluta ratione tempora maxime ab beatae autem
accusamus nemo sit, porro dolore illum esse hic. Repudiandae expedita
iste, inventore, officia, ut voluptatibus unde ullam sint debitis enim
ipsa dolorum ducimus quos. Suscipit tenetur ratione sed iure! Tempora
maxime, et neque natus dolores aliquam hic magni commodi quod a vel
delectus quisquam aperiam cupiditate eaque aspernatur tempore atque
tenetur modi? Exercitationem repellat hic officiis atque aperiam
repellendus et eos quisquam ratione, quidem enim quae sint facere
laudantium amet iure? Dolorum esse autem corrupti explicabo laborum
eum at distinctio dicta aut molestias sunt, totam ab eligendi
possimus. Ipsa, dolorem numquam sint doloribus reprehenderit
laboriosam aperiam alias, culpa recusandae minima assumenda tempore
placeat sunt nesciunt, dolores quidem repudiandae dolor. Ipsa illo, ex
repellat iusto ea fugit sapiente hic, adipisci nam, soluta numquam
error eum neque quos commodi quae a architecto voluptas perspiciatis?
Velit impedit libero ut sit minima exercitationem delectus nobis
quibusdam ab excepturi, soluta maxime ipsum, maiores laudantium iste?
Atque corrupti cupiditate non deserunt alias deleniti delectus numquam
repellendus soluta obcaecati fugit veniam, porro asperiores nesciunt
sed hic esse iusto ipsam provident est praesentium nam eveniet neque
at. Eaque aliquid ipsam vitae. Impedit quas est asperiores sunt
recusandae, iure beatae accusantium quidem quos iste sint sed
architecto eum perferendis dolorum tempora nihil odio error.
</p>
</div>
</main>
</body>
</html>
The lorem is just so I can scroll and see how it looks like :) Sorry for some of the content being in another language aswell
Change the css for html from overflow: hidden-x to overflow:hidden
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow: hidden;
}
body {
background-color: #262626;
font-family: "Roboto Slab", serif;
position: relative;
overflow-x: hidden;
}
main {
width: 100vw;
height: 100vh;
}
#backdrop {
width: 90%;
height: 100%;
margin: 0 auto;
margin-top: 1rem;
border-radius: 1rem 1rem 0 0;
background-color: #727365;
}
#home-link {
color: #f2f2e4;
text-decoration: none;
font-size: 1.7rem;
font-family: "Space Mono", monospace;
font-weight: 400;
position: absolute;
top: 1.95rem;
left: 2.6rem;
}
/* Hamburger menu */
#menu a {
text-decoration: none;
color: #3f403b;
}
#menu a:hover {
color: #0c0c0c;
}
#menu-toggle {
display: block;
position: absolute;
top: 2.5rem;
right: 3rem;
z-index: 1;
}
#menu-checkbox {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
}
#menu-toggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #f2f2e4;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
opacity 0.55s ease;
}
#menu-toggle span:first-child {
transform-origin: 0% 0%;
}
#menu-toggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menu-checkbox:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #3f403b;
}
#menu-checkbox:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menu-checkbox:checked ~ span:nth-last-child(2) {
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
width: 60vw;
height: 70vh;
position: absolute;
right: -100px;
margin: -100px 0 0 0;
padding: 50px;
padding-top: 125px;
border-radius: 1rem;
background-color: #bfbfae;
list-style: none;
transform-origin: 0% 0%;
transform: translate(100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
#menu-checkbox:checked ~ ul {
transform: none;
opacity: 1;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 13px;
}
::-webkit-scrollbar-thumb {
border-radius: 100px;
border: 3px solid transparent;
background-clip: content-box;
background-color: rgb(88, 88, 88);
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(109, 109, 109);
}
/* Media queries */
#media only screen and (min-width: 600px) {
}
#media only screen and (min-width: 769px) {
#backdrop {
width: 98%;
height: 96.5%;
border-radius: 1rem;
}
#menu-checkbox {
display: none;
}
#menu-toggle span {
display: none;
}
#menu {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
transform: none !important;
background-color: #bfbfaee1;
padding: 0 1rem 0 1rem;
border-radius: 2rem;
font-family: monospace;
position: fixed;
top: 102vh;
right: 50%;
translate: 50% 0;
height: fit-content;
width: 45vw;
display: flex;
justify-content: space-between;
}
#menu li {
display: inline;
font-size: 1.2rem;
}
#active {
background-color: blue;
border-radius: 3rem;
}
.menu-links {
padding: 8px 35px 8px 35px;
}
#home-link {
display: flex;
justify-content: center;
position: static;
padding-top: 0.5rem;
}
}
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Överdäckningen | Startsida</title>
<link rel="stylesheet" href="css/style.css" />
<script src="script/js.js"></script>
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#200;300;400&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap"
rel="stylesheet"
/>
</head>
<body>
<main>
<div id="backdrop">
<header id="wrapper">
<nav>
ÖVERDÄCKNINGEN
<div id="menu-toggle">
<input id="menu-checkbox" type="checkbox" />
<span class="hamburger-span"></span>
<span class="hamburger-span"></span>
<span class="hamburger-span"></span>
<ul id="menu">
<li><a class="menu-links" id="active" href="#">Länk 1</a></li>
<li><a class="menu-links" href="#">Länk 2</a></li>
<li><a class="menu-links" href="#">Länk 3</a></li>
<li><a class="menu-links" href="#">Länk 4</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro amet
dolores nisi delectus ad inventore laboriosam alias, architecto eos
sunt quod eum maiores provident aspernatur debitis ratione minus
quaerat cumque veniam. Delectus commodi odit molestiae excepturi.
Doloremque rem tempora quod est veritatis earum accusamus vel fugiat
numquam reprehenderit ad labore repudiandae recusandae neque
voluptatum a nulla dignissimos sapiente ut, officiis fugit porro.
Aliquid unde incidunt quisquam. Veniam sunt doloremque modi in
voluptates inventore. In corrupti hic eos, incidunt iusto dignissimos
praesentium ut adipisci possimus officiis nesciunt, eveniet asperiores
illum laudantium aliquid dicta temporibus aut maxime dolor fugit totam
animi velit repudiandae ea? Esse, quod repudiandae amet iusto
temporibus aperiam dolore aliquid, magni sunt eveniet deleniti at
suscipit quasi adipisci, quo officia accusantium repellat nostrum
nemo! Reiciendis repellat omnis facilis qui excepturi assumenda id
laborum vero voluptas, vitae aspernatur eius magnam voluptates iusto,
dolores a fugit tenetur quo nostrum ipsa sequi cumque? Velit voluptate
et at aut iste obcaecati nisi, vitae repellat placeat quasi iusto.
Rerum vero eos earum nobis in inventore quos aliquid id, assumenda
tempora? Modi repudiandae dolorem architecto ut animi doloribus,
tempore possimus nihil ipsum accusamus fugiat laboriosam culpa iure
eum mollitia ab? Quidem quas minus necessitatibus voluptate, rem vero
eligendi possimus totam voluptates laudantium atque illo provident
quasi! Laboriosam quo odio quia in! Commodi voluptatem facilis eos
neque non, magni fugiat numquam consectetur, ipsa dolores ut rerum,
sint sequi quos illo obcaecati omnis harum laudantium error inventore
praesentium. Commodi fugit nostrum asperiores vel ducimus
reprehenderit quis suscipit laborum et fugiat libero eius assumenda
esse nobis, iste, impedit ipsa repudiandae aut aspernatur placeat
inventore! Eligendi sit in obcaecati quia repudiandae explicabo
officia eveniet omnis earum. Quibusdam alias amet quas nobis ullam
vitae enim quod facilis quam maiores! Rem consequatur distinctio
laudantium harum labore, minus qui molestiae suscipit modi libero quia
pariatur maxime hic, voluptate totam numquam, illo beatae voluptatibus
atque ipsa assumenda. Ipsum laudantium, modi nam repellat similique
vitae asperiores corrupti accusamus voluptate maxime harum expedita,
ipsa fugiat obcaecati deserunt porro impedit blanditiis error
reprehenderit temporibus ex at, molestias eius magnam? Voluptatem,
repellat ratione distinctio sit odio assumenda non ad fugit eligendi
nemo eveniet enim porro asperiores, aliquam aliquid? Officia
reiciendis libero tempore cupiditate rem laboriosam odit aspernatur!
Perferendis, id odit. Laudantium, culpa. Iure placeat deserunt
consectetur! Cumque, asperiores itaque nobis laudantium fuga fugit,
nemo autem maiores quo et perferendis laborum illum quis suscipit
eveniet ullam modi. Soluta cum eaque, sequi eveniet deserunt quia odio
officia tenetur vero corrupti labore eum voluptatum quam cumque fuga
hic numquam! Ullam, a dolore omnis nemo beatae at possimus eum
officiis molestiae exercitationem temporibus ab blanditiis voluptatum
reiciendis mollitia maxime perspiciatis harum nostrum officia deleniti
delectus. Hic quos molestias rerum ducimus fugiat consectetur facilis
perspiciatis animi, incidunt error ut tenetur similique unde molestiae
labore perferendis sapiente totam mollitia! Qui, similique ad eos,
cumque laudantium sapiente dolores quas omnis nam fuga exercitationem
blanditiis quaerat aut animi at beatae explicabo nihil adipisci.
Voluptatum qui repudiandae provident ratione, tenetur illum fuga quas
sapiente laborum ipsa obcaecati aut quod perspiciatis, ullam, veniam
explicabo nulla quaerat incidunt quidem! Est odit corrupti quibusdam
doloribus! Vel excepturi voluptatum, nobis voluptatem error
consectetur placeat quibusdam architecto! Molestiae ipsum suscipit est
aperiam veniam nobis laboriosam porro alias, sit eos repellendus
labore, ratione unde ducimus, accusantium illum voluptatum. Tempore,
rem repellat, laboriosam velit aut aliquid ipsa quibusdam consectetur
soluta veniam architecto totam! Reiciendis aliquid vel voluptatem
tempore ea, unde officiis. Corrupti perspiciatis voluptates, suscipit
vero voluptatibus corporis commodi excepturi reprehenderit eos et
nulla voluptatem fuga porro maxime quam eius distinctio, at id aliquid
itaque consequuntur ut repudiandae. Officiis, qui eveniet animi
officia voluptate ipsum, fuga, nisi doloribus in obcaecati quia error
eaque ad cupiditate aliquam alias modi placeat mollitia quibusdam
illum quas aliquid sint? Eligendi, nostrum maiores quas iste
recusandae quae natus impedit consequatur id ipsam dignissimos sequi
excepturi, nobis ducimus dolorum tenetur repellendus praesentium in
dicta atque velit voluptatum quia. Placeat culpa aliquid ab natus
quaerat non quasi cupiditate reprehenderit soluta, unde repellendus
illum, praesentium distinctio blanditiis quod magnam laborum excepturi
iusto molestiae accusamus dolorem nihil. Voluptatum, molestias
debitis? Ipsum veritatis iure suscipit, saepe alias aliquam enim,
officiis deleniti soluta ratione tempora maxime ab beatae autem
accusamus nemo sit, porro dolore illum esse hic. Repudiandae expedita
iste, inventore, officia, ut voluptatibus unde ullam sint debitis enim
ipsa dolorum ducimus quos. Suscipit tenetur ratione sed iure! Tempora
maxime, et neque natus dolores aliquam hic magni commodi quod a vel
delectus quisquam aperiam cupiditate eaque aspernatur tempore atque
tenetur modi? Exercitationem repellat hic officiis atque aperiam
repellendus et eos quisquam ratione, quidem enim quae sint facere
laudantium amet iure? Dolorum esse autem corrupti explicabo laborum
eum at distinctio dicta aut molestias sunt, totam ab eligendi
possimus. Ipsa, dolorem numquam sint doloribus reprehenderit
laboriosam aperiam alias, culpa recusandae minima assumenda tempore
placeat sunt nesciunt, dolores quidem repudiandae dolor. Ipsa illo, ex
repellat iusto ea fugit sapiente hic, adipisci nam, soluta numquam
error eum neque quos commodi quae a architecto voluptas perspiciatis?
Velit impedit libero ut sit minima exercitationem delectus nobis
quibusdam ab excepturi, soluta maxime ipsum, maiores laudantium iste?
Atque corrupti cupiditate non deserunt alias deleniti delectus numquam
repellendus soluta obcaecati fugit veniam, porro asperiores nesciunt
sed hic esse iusto ipsam provident est praesentium nam eveniet neque
at. Eaque aliquid ipsam vitae. Impedit quas est asperiores sunt
recusandae, iure beatae accusantium quidem quos iste sint sed
architecto eum perferendis dolorum tempora nihil odio error.
</p>
</div>
</main>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: null -->
If you remove the main tag, it should work
Related
So, This is a very specific problem:
I want you to run the code, and open it in a full window.
Now please inspect the following code, and toggle the responsive mode.
Now, change the dimensions to something small, until you can see a hamburger.
Now click the hamburger. Works fine?
Now close the hamburger.
Scroll until the end of the page, in this mobile view.
Now try opening the hamburger. Most probably it won't work.
Now scroll to about just below the top of the page in the responsive mobile view. Here open the hamburger. You should be able to see a glitched out half menu like included in the image.
I don't know why or how this is happening. Could someone please reslove this? Any help will be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Navbar</title>
<link rel="stylesheet" href="styles/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;800&family=Quicksand:wght#300&family=Roboto:wght#900&display=swap" rel="stylesheet">
<style>
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
#font-face {
font-family: AstroSpace;
src: url(/fonts/AstroSpace.ttf);
}
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
background-color: #212c3b;
}
header {
background-color: #141b25;
position: sticky;
top: 0;
right: 0;
width: 100%;
}
.main-nav {
height: 90px;
}
.logo {
color: white;
line-height: 90px;
font-size: 30px;
font-weight: 900 ;
text-decoration: none;
margin-left: 30px;
font-family: "Roboto ", sans-serif;
}
.navlinks {
list-style: none;
float: right;
line-height: 90px;
margin: 0;
padding: 0;
}
.navlinks li {
display: inline-block;
margin: 0px 20px;
}
.navlinks li a {
color: white;
text-decoration: none;
font-size: 18px;
transition: all 0.3s linear 0s;
text-transform: uppercase;
}
.navlinks li a:hover {
color: #7ebcb9;
padding-bottom: 7px;
border-bottom: 2px solid #7ebcb9;
}
li a.contact {
background-color: #00adb5;
padding: 9px 20px;
border-radius: 50px;
transition: all 0.3s ease 0s;
border-bottom: none;
}
li a.contact:hover {
background-color: #047e85;
color: white;
border-bottom: none;
}
#check {
display: none;
}
.menu-btn {
font-size: 25px;
color: white;
float: right;
line-height: 90px;
margin-right: 40px;
display: none;
cursor: pointer;
}
#media (max-width: 800px) {
.navlinks {
top: 90px;
position: fixed;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
background: #222831;
}
.navlinks li {
display: block;
}
.navlinks li a {
font-size: 20px;
}
.navlinks li a:hover {
border-bottom: none;
}
.menu-btn {
display: block;
}
#check:checked ~ .navlinks {
right: 0;
}
}
#media (max-width: 360px) {
.logo {
margin-left: 10px;
font-size: 25px;
}
.menu-btn {
margin-right: 10px;
font-size: 25px;
}
.menu-btn:focus {
color: blue;
}
}
</style>
</head>
<body>
<header>
<nav class="main-nav">
<input type="checkbox" id="check" />
<label for="check" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
Nikita Gada
<ul class="navlinks">
<li>About Me</li>
<li>Education</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</header>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus,
</body>
</html>
I set a top : 80px on your navlinks in your #media (max-width: 800px) and it seems to be working. Take a look.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Navbar</title>
<link rel="stylesheet" href="styles/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;800&family=Quicksand:wght#300&family=Roboto:wght#900&display=swap" rel="stylesheet">
<style>
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
#font-face {
font-family: AstroSpace;
src: url(/fonts/AstroSpace.ttf);
}
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
background-color: #212c3b;
}
header {
background-color: #141b25;
position: sticky;
top: 0;
right: 0;
width: 100%;
}
.main-nav {
height: 90px;
}
.logo {
color: white;
line-height: 90px;
font-size: 30px;
font-weight: 900 ;
text-decoration: none;
margin-left: 30px;
font-family: "Roboto ", sans-serif;
}
.navlinks {
list-style: none;
float: right;
line-height: 90px;
margin: 0;
padding: 0;
}
.navlinks li {
display: inline-block;
margin: 0px 20px;
}
.navlinks li a {
color: white;
text-decoration: none;
font-size: 18px;
transition: all 0.3s linear 0s;
text-transform: uppercase;
}
.navlinks li a:hover {
color: #7ebcb9;
padding-bottom: 7px;
border-bottom: 2px solid #7ebcb9;
}
li a.contact {
background-color: #00adb5;
padding: 9px 20px;
border-radius: 50px;
transition: all 0.3s ease 0s;
border-bottom: none;
}
li a.contact:hover {
background-color: #047e85;
color: white;
border-bottom: none;
}
#check {
display: none;
}
.menu-btn {
font-size: 25px;
color: white;
float: right;
line-height: 90px;
margin-right: 40px;
display: none;
cursor: pointer;
}
#media (max-width: 800px) {
.navlinks {
position: fixed;
/* line I added */
top:90px;;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
background: #222831;
}
.navlinks li {
display: block;
}
.navlinks li a {
font-size: 20px;
}
.navlinks li a:hover {
border-bottom: none;
}
.menu-btn {
display: block;
}
#check:checked ~ .navlinks {
right: 0;
}
}
#media (max-width: 360px) {
.logo {
margin-left: 10px;
font-size: 25px;
}
.menu-btn {
margin-right: 10px;
font-size: 25px;
}
.menu-btn:focus {
color: blue;
}
}
</style>
</head>
<body>
<header>
<nav class="main-nav">
<input type="checkbox" id="check" />
<label for="check" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
Nikita Gada
<ul class="navlinks">
<li>About Me</li>
<li>Education</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</header>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus,
</body>
</html>
Well, The problem is you never define the top property of the .navlinks. Please check the snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Navbar</title>
<link rel="stylesheet" href="styles/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;800&family=Quicksand:wght#300&family=Roboto:wght#900&display=swap" rel="stylesheet">
<style>
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
#font-face {
font-family: AstroSpace;
src: url(/fonts/AstroSpace.ttf);
}
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
background-color: #212c3b;
}
header {
background-color: #141b25;
position: sticky;
top: 0;
right: 0;
width: 100%;
}
.main-nav {
height: 90px;
}
.logo {
color: white;
line-height: 90px;
font-size: 30px;
font-weight: 900 ;
text-decoration: none;
margin-left: 30px;
font-family: "Roboto ", sans-serif;
}
.navlinks {
list-style: none;
float: right;
line-height: 90px;
margin: 0;
padding: 0;
}
.navlinks li {
display: inline-block;
margin: 0px 20px;
}
.navlinks li a {
color: white;
text-decoration: none;
font-size: 18px;
transition: all 0.3s linear 0s;
text-transform: uppercase;
}
.navlinks li a:hover {
color: #7ebcb9;
padding-bottom: 7px;
border-bottom: 2px solid #7ebcb9;
}
li a.contact {
background-color: #00adb5;
padding: 9px 20px;
border-radius: 50px;
transition: all 0.3s ease 0s;
border-bottom: none;
}
li a.contact:hover {
background-color: #047e85;
color: white;
border-bottom: none;
}
#check {
display: none;
}
.menu-btn {
font-size: 25px;
color: white;
float: right;
line-height: 90px;
margin-right: 40px;
display: none;
cursor: pointer;
}
#media (max-width: 800px) {
.navlinks {
position: fixed;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
background: #222831;
top: 90px;
}
.navlinks li {
display: block;
}
.navlinks li a {
font-size: 20px;
}
.navlinks li a:hover {
border-bottom: none;
}
.menu-btn {
display: block;
}
#check:checked ~ .navlinks {
right: 0;
}
}
#media (max-width: 360px) {
.logo {
margin-left: 10px;
font-size: 25px;
}
.menu-btn {
margin-right: 10px;
font-size: 25px;
}
.menu-btn:focus {
color: blue;
}
}
</style>
</head>
<body>
<header>
<nav class="main-nav">
<input type="checkbox" id="check" />
<label for="check" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
Nikita Gada
<ul class="navlinks">
<li>About Me</li>
<li>Education</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</header>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus,
</body>
</html>
just add top: 90px; to #media (max-width: 800px) { .navlinks {top: 90px;}}
<style>
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
#font-face {
font-family: AstroSpace;
src: url(/fonts/AstroSpace.ttf);
}
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
background-color: #212c3b;
}
header {
background-color: #141b25;
position: sticky;
top: 0;
right: 0;
width: 100%;
}
.main-nav {
height: 90px;
}
.logo {
color: white;
line-height: 90px;
font-size: 30px;
font-weight: 900 ;
text-decoration: none;
margin-left: 30px;
font-family: "Roboto ", sans-serif;
}
.navlinks {
list-style: none;
float: right;
line-height: 90px;
margin: 0;
padding: 0;
}
.navlinks li {
display: inline-block;
margin: 0px 20px;
}
.navlinks li a {
color: white;
text-decoration: none;
font-size: 18px;
transition: all 0.3s linear 0s;
text-transform: uppercase;
}
.navlinks li a:hover {
color: #7ebcb9;
padding-bottom: 7px;
border-bottom: 2px solid #7ebcb9;
}
li a.contact {
background-color: #00adb5;
padding: 9px 20px;
border-radius: 50px;
transition: all 0.3s ease 0s;
border-bottom: none;
}
li a.contact:hover {
background-color: #047e85;
color: white;
border-bottom: none;
}
#check {
display: none;
}
.menu-btn {
font-size: 25px;
color: white;
float: right;
line-height: 90px;
margin-right: 40px;
display: none;
cursor: pointer;
}
#media (max-width: 800px) {
.navlinks {
position: fixed;
top: 90px;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
background: #222831;
}
.navlinks li {
display: block;
}
.navlinks li a {
font-size: 20px;
}
.navlinks li a:hover {
border-bottom: none;
}
.menu-btn {
display: block;
}
#check:checked ~ .navlinks {
right: 0;
}
}
#media (max-width: 360px) {
.logo {
margin-left: 10px;
font-size: 25px;
}
.menu-btn {
margin-right: 10px;
font-size: 25px;
}
.menu-btn:focus {
color: blue;
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Navbar</title>
<link rel="stylesheet" href="styles/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;800&family=Quicksand:wght#300&family=Roboto:wght#900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav class="main-nav">
<input type="checkbox" id="check" />
<label for="check" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
Nikita Gada
<ul class="navlinks">
<li>About Me</li>
<li>Education</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</header>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus,
</body>
</html>
Please add CSS property in .navlink class. i have added " top:90px; " in this class. when applying position fixed to any element add specific two side values like left and top, Or top and right, Or right and bottom, Or left and bottom.
.navlinks {
position: fixed;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
top: 90px;
background: #222831;
}
position: sticky is not working in my code
I have tried different properties but nothing seems to work
codepen: https://codepen.io/iabzeet/pen/qBmGyLb
help me solve this problem
#title{
font-family: 'Inknut Antiqua', sans-serif;
color: rgb(243, 30, 112);
font-size: 12px;
position: relative;
top: 24px;
display: flex;
flex-direction: row;
}
.logo{
width: 4%;
position: relative;
top: 20px;
display: flex;
flex-direction: row;
}
.top-container {
padding: 60px 30px 30px 30px;
margin: -80px -6px 0px -30px;
background-color: #f1f1f1;
display: flex;
justify-content: center;
position: relative;
background-image: linear-gradient(-45deg,blue,white,yellow);
}
body{
box-sizing: border-box;
}
#header-img{
width: 3%;
padding: 0;
display: flex;
position: relative;
top: 2px;
}
nav {
position: sticky;
top: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 20%;
background-color: #333;
width: 100%;
display: flex;
justify-content: center;
overflow: hidden;
}
li {
list-style: none;
margin-right: 70px;
font-size: 25px;
font-weight: bold;
}
li a {
display: block;
color: white;
text-align: center;
padding: 3px 10px;
text-decoration: none;
}
li a:hover {
background-color: #04AA6D;
border-radius: 5px;
}
ul {
list-style-type: none;
margin: -48px -6px 0px -10px;
padding: 9px;
display: flex;
flex-direction: row;
}
#cover{
margin: 0.5px -10px 0px -10px;
position: fixed;
top: 0px;
display: grid;
width: 100%;
margin-right: -98px;
height: 550px;
object-fit: cover;
align-self: center;
z-index: -1;
opacity: 0.8;
}
.container {
height: 100%;
padding: 0.01em 16px;
padding-top: 0.01em;
padding-right: 0px;
padding-bottom: 0.01em;
padding-left: 0px;
display: grid;
position: relative;
justify-items: center;
}
#sml{
position: absolute;
display: grid;
color: white;
transform: translate(0px, 150px);
}
#text{
position: absolute;
display: grid;
color: whitesmoke;
transform: translate(0px, 150px);
z-index: 2;
font-size: 50px;
}
.policies{
margin-top: 0px;
background-image: whitesmoke;
display: flex;
position: relative;
}
#prod{
background-image: url("https://images.unsplash.com/photo-1524230572899-a752b3835840?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1952&q=80");
margin-right: -7px;
margin-left: -7px;
position: absolute;
top: 390px;
font-size: large;
}
/* .centered{
position: absolute;
color: rgb(228, 56, 56);
top: 30%;
left: 50%;
transform: translate(-50%,-50%);
} */
<!DOCTYPE html>
<html>
<body>
<head>
<title>Giovanni's Guitars</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght#300&display=swap"
type='text/css'>
</head>
<div class="top-container">
<img class="logo" src="logo1.svg" alt="a logo">
<div id="title">
<h1>Giovanni's Guitars</h1>
</div>
</div>
<header id="header">
<img id="header-img" src="logo2.svg" alt="a logo">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<div class="container">
<video autoplay muted loop id="cover">
<source src="https://cdn.videvo.net/videvo_files/video/free/2021-05/small_watermarked/210512_01_Music_4k_009_preview.webm" type="video/mp4">
</video>
<p id="sml">Since 1961</p>
<div id="text">
<h4>Guitars and Basses.</h4>
</div>
</div>
<section class="policies">
<h5 id="prod">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel sint fugiat placeat mollitia necessitatibus enim quae at illo rem! Fuga tempore dicta ut repudiandae quis quaerat facere sit odit! Fugiat perspiciatis, accusamus voluptate itaque incidunt reprehenderit perferendis nemo. Consequuntur vero ipsum modi excepturi facilis id nemo, porro animi beatae est recusandae officia, repudiandae velit necessitatibus possimus nam maiores quo corporis laboriosam obcaecati repellat sit! Explicabo eveniet fugiat iste, minima facere ipsum aliquam fuga dignissimos amet aperiam atque excepturi, adipisci distinctio minus laudantium. Provident obcaecati tenetur rerum! Eveniet quo, nulla debitis, reiciendis hic fugiat perferendis vel consequatur eligendi amet assumenda totam? Ullam ipsa illum fugit, dolor est hic ex sequi laudantium odio consectetur vitae nihil unde, quibusdam necessitatibus. Quae placeat dolorum eos suscipit! Quo necessitatibus in ab delectus doloremque et ipsum dolorem, quod, accusantium voluptas, obcaecati possimus. Dolores dolor accusamus ex aspernatur! Porro quo laboriosam est blanditiis incidunt, quis accusantium necessitatibus distinctio dolorem enim ipsam accusamus ut odit officia rerum, praesentium ab voluptas fuga explicabo fugit dolorum ea cum animi in? Iusto veniam corporis doloremque, necessitatibus ipsam dolore! Quam sequi reprehenderit ex fugiat soluta facilis illum laudantium omnis assumenda quisquam, incidunt, deserunt officia nostrum perspiciatis. Labore veniam reiciendis quia eos veritatis sequi velit numquam unde molestias, adipisci, eligendi quisquam, quae quo modi porro harum commodi consequatur aliquid nobis. Natus quidem voluptate ratione fugiat, dolores quo culpa fuga fugit. Aperiam dolore, velit ullam repellat unde delectus eos aliquid, asperiores itaque impedit in sapiente, quasi facilis. Libero iusto cumque esse rerum quis, suscipit voluptatibus nihil soluta facere magni, nesciunt praesentium dolore consectetur et sapiente corrupti reprehenderit fuga facilis animi odio asperiores quod tempore? Possimus numquam mollitia nemo amet quod ut facere maxime facilis cupiditate optio, cum quisquam culpa accusantium harum dicta iste autem. Illo provident minima dolorum excepturi culpa perferendis laboriosam, fugiat reprehenderit magnam adipisci. Minus cumque magni harum! Minus earum aliquam porro explicabo fugiat fuga ipsa aut hic autem rerum ad provident corrupti, repellendus quam assumenda repudiandae? Quos inventore nam aliquam fugit totam modi fugiat asperiores cumque cum reprehenderit. Laborum iusto culpa facere velit inventore aperiam quia nisi, amet dolorem autem possimus explicabo enim vel dolore. Aut iusto amet consequatur saepe velit aliquam nihil nisi, quo iure veniam doloribus ducimus! Adipisci quisquam alias nisi eveniet! Repudiandae officia perspiciatis, neque accusantium cum suscipit fuga alias explicabo, corporis facere voluptatem assumenda fugiat incidunt dignissimos dicta ex tenetur magni sint ipsam ipsum. Provident suscipit quod asperiores labore esse sapiente nesciunt, iusto blanditiis aut distinctio sint rerum optio. Distinctio aspernatur eum natus assumenda! Molestias omnis fuga natus vitae eius ea, eligendi odit magni laboriosam id quis reprehenderit aspernatur expedita sunt. Ex praesentium facilis at, hic minus voluptatem laborum eaque, voluptatum ipsa incidunt tempora. Tempora vel dignissimos aspernatur rerum optio officia excepturi delectus, commodi ex itaque ab velit eaque pariatur sapiente placeat reprehenderit earum ipsum necessitatibus ullam! Hic maxime assumenda provident praesentium animi corrupti laboriosam dolores explicabo voluptas iure, quasi error dolore doloremque voluptatem molestias et accusamus officia id reprehenderit repellat quia ipsam, quo repudiandae. At, repudiandae aut! Itaque rerum natus nulla aperiam veniam et fugit ipsa, at reiciendis eos consectetur unde officia, impedit earum facere placeat nemo praesentium quos deserunt temporibus, nesciunt doloribus culpa ad? Eius repellat vel fugit, labore reprehenderit nesciunt tenetur maxime debitis tempore veniam, non et quibusdam deleniti laborum explicabo! Architecto quo perferendis doloribus ut magnam inventore alias temporibus voluptatem qui ratione neque itaque ex est atque, debitis quod voluptates error dolorum sapiente excepturi magni. Quis modi molestiae laborum magni odio maxime laudantium id sed labore enim facere est veritatis distinctio, quos asperiores minus delectus ratione earum ipsum a quo? Atque aliquid molestiae repellat veritatis corporis optio voluptas, sunt impedit eum nobis laboriosam expedita magni sed doloribus consectetur, quos ratione maxime saepe! Sapiente ea eligendi libero alias laborum voluptatem repellat consequuntur mollitia perspiciatis non dolorum, quas et repellendus. Repellat, doloribus alias quas rerum eveniet quo velit ullam dolorem quidem nesciunt ipsum cum exercitationem magni numquam provident neque nemo odio perferendis, sapiente ipsam sunt.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, minima. Dolore quod quam similique, odio facere necessitatibus quas officia libero non eveniet sit ipsum consectetur sunt distinctio omnis dolor, doloremque quaerat, labore quia fugiat porro facilis inventore! Nulla magnam labore assumenda laboriosam incidunt nisi dignissimos maxime repudiandae, maiores ipsa quod eligendi, at nesciunt quos. Commodi vitae blanditiis ratione assumenda. Voluptatem placeat provident illum officia fugit sequi vero nisi quam. Ipsum rerum eius ratione ea asperiores possimus praesentium commodi fuga, minima eum laudantium suscipit nostrum eveniet perferendis deserunt laboriosam blanditiis neque, alias, voluptatem eligendi dolorum vitae quae! Aut amet aliquid libero pariatur, blanditiis harum atque. Necessitatibus, iure? Odio quae magnam aliquid incidunt officia error perspiciatis illum voluptatum hic? Quas alias nemo accusantium temporibus error? Provident fuga fugiat eius enim totam soluta saepe beatae accusantium asperiores sunt nesciunt ipsa, eaque dolorum et perspiciatis dignissimos sequi? Adipisci dolorem doloremque facere pariatur inventore fuga cupiditate vel quidem enim a quia, ab odio, eveniet dignissimos dolores aliquid tenetur autem, quis nam quibusdam. Vel, quam excepturi. Fugit maxime voluptatum nam maiores delectus, quo illo consequatur aliquid dolorem excepturi quia sit laudantium quam deserunt numquam adipisci voluptatem eveniet voluptates, sed veniam rem reprehenderit corporis? Blanditiis quod, aut consequuntur commodi nisi, cupiditate dolor nihil aperiam deserunt quaerat molestiae quis nesciunt, laborum unde incidunt culpa! Possimus commodi impedit ullam eius aut veritatis expedita voluptatum nam deserunt ipsa, eum consequatur iusto doloribus enim voluptas labore ut nobis obcaecati illo perspiciatis quam similique provident. Culpa, quos sint eveniet eaque sequi doloremque mollitia nesciunt alias maiores debitis natus soluta. Explicabo dolorum ipsum dolores quaerat doloribus ad commodi nulla cupiditate doloremque. Quas iusto velit pariatur voluptatibus labore? Assumenda, cumque! Dicta molestias, harum officiis aperiam velit temporibus optio obcaecati nemo sint quam debitis nostrum. Esse, dolor. Excepturi provident ea ab, quas fugiat, dolores magni sapiente ipsum, accusantium commodi ex itaque enim! Beatae odio ipsa quisquam enim eius expedita obcaecati doloribus libero illum minima dolor asperiores accusantium, saepe suscipit facilis consequatur laboriosam, optio nemo cupiditate commodi necessitatibus aperiam. Enim perferendis ullam cum beatae soluta quas aspernatur labore itaque veniam delectus dolor debitis, voluptatibus veritatis deserunt nihil blanditiis velit ex obcaecati necessitatibus officiis minima omnis odit. Explicabo est consequuntur, ea nemo asperiores placeat nisi cum fugiat reiciendis repudiandae unde ipsum, distinctio nesciunt eos eligendi. Quo provident atque aperiam nemo numquam quaerat aliquid! Quibusdam culpa obcaecati quaerat excepturi veniam! Ut aliquam dolorum vitae praesentium reprehenderit? Unde hic consequatur officia, amet doloremque expedita! Voluptas accusamus animi ipsum quisquam atque et, ducimus est sequi quos quibusdam, nulla omnis, magnam debitis molestiae sit eius soluta impedit iusto esse voluptatem minus fugiat dolor provident? Adipisci ipsam eos, id ad accusamus voluptates accusantium maiores quas quos nobis, optio culpa assumenda similique voluptatum rem dolorum veniam doloremque ducimus quasi sit. Quos blanditiis natus in nisi sint illo unde inventore repudiandae, beatae eius ut vero ex at veritatis dolor itaque obcaecati adipisci. Itaque beatae omnis tempora et eos debitis, amet incidunt consequuntur aut aliquid, porro distinctio expedita repellat tempore. Similique iste dolores excepturi esse laborum ad, asperiores voluptate. Cum harum aliquid alias qui perferendis magnam maiores eligendi expedita et sapiente quibusdam animi unde minus, mollitia nihil repellat delectus cupiditate, architecto eveniet! Modi iusto vero molestiae laudantium, corporis optio a vel perspiciatis quisquam alias maiores ratione, ea ipsam id quam dolorem quis consequuntur. Excepturi at explicabo doloremque asperiores cupiditate? Cum sunt dolorem similique eveniet eligendi, obcaecati nesciunt vel perspiciatis delectus magnam, illum doloribus aut amet ipsam veritatis laboriosam quidem alias illo saepe rerum! Et dicta quo tempore eos dolore? Iste hic recusandae, blanditiis cumque veniam quas architecto. Repudiandae aliquam necessitatibus magni rerum quisquam eum atque dolorum placeat dignissimos. A qui cumque voluptates sint optio voluptatibus vitae harum tenetur reiciendis id eos quidem tempore laborum in error obcaecati odit ex et ratione, eaque assumenda aut eius! Impedit, quis. Nulla inventore neque omnis qui eveniet molestias eius sint vel voluptas! Tempora, animi? Sequi veniam iure quibusdam repellat, dolorum, id earum accusamus reiciendis at possimus adipisci a similique?</h5>
</section>
</body>
</html>
Reference: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
Working Demo: https://codepen.io/shalinimandal/pen/dyWEgpg
Add the following CSS in your code:
nav {
z-index: 10;
}
.sticky {
position: fixed;
top: 50px;
width: 100%;
}
Add this Javascript code to add sticky class on scroll
window.onscroll = function() {myFunction()};
// Get the navbar
var navbar = document.getElementById("nav-bar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
You can try to remove position: fixed from #cover and position: absolute from #prod
#title{
font-family: 'Inknut Antiqua', sans-serif;
color: rgb(243, 30, 112);
font-size: 12px;
position: relative;
top: 24px;
display: flex;
flex-direction: row;
}
.logo{
width: 4%;
position: relative;
top: 20px;
display: flex;
flex-direction: row;
}
.top-container {
padding: 60px 30px 30px 30px;
margin: -80px -6px 0px -30px;
background-color: #f1f1f1;
display: flex;
justify-content: center;
position: relative;
background-image: linear-gradient(-45deg,blue,white,yellow);
}
body{
box-sizing: border-box;
}
body, header, .container {
display:initial;
}
#header-img{
width: 3%;
padding: 0;
display: flex;
position: relative;
top: 2px;
}
nav {
position: sticky;
top: 0;
position: -webkit-sticky;
z-index: 10;
}
ul {
list-style-type: none;
margin: 0;
padding: 20%;
background-color: #333;
width: 100%;
display: flex;
justify-content: center;
overflow: hidden;
}
li {
list-style: none;
margin-right: 70px;
font-size: 25px;
font-weight: bold;
}
li a {
display: block;
color: white;
text-align: center;
padding: 3px 10px;
text-decoration: none;
}
li a:hover {
background-color: #04AA6D;
border-radius: 5px;
}
ul {
list-style-type: none;
margin: -48px -6px 0px -10px;
padding: 9px;
display: flex;
flex-direction: row;
}
#cover{
margin: 0.5px -10px 0px -10px;
/*position: fixed;*/
top: 0px;
display: grid;
width: 100%;
margin-right: -98px;
height: 550px;
object-fit: cover;
align-self: center;
z-index: -1;
opacity: 0.8;
}
.container {
height: 100%;
padding: 0.01em 16px;
padding-top: 0.01em;
padding-right: 0px;
padding-bottom: 0.01em;
padding-left: 0px;
display: grid;
position: relative;
justify-items: center;
}
#sml{
position: absolute;
display: grid;
color: white;
transform: translate(0px, 150px);
}
#text{
position: absolute;
display: grid;
color: whitesmoke;
transform: translate(0px, 150px);
z-index: 2;
font-size: 50px;
}
.policies{
margin-top: 0px;
background-image: whitesmoke;
display: flex;
position: relative;
}
#prod{
background-image: url("https://images.unsplash.com/photo-1524230572899-a752b3835840?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1952&q=80");
margin-right: -7px;
margin-left: -7px;
/*position: absolute;*/
top: 390px;
font-size: large;
}
/* .centered{
position: absolute;
color: rgb(228, 56, 56);
top: 30%;
left: 50%;
transform: translate(-50%,-50%);
} */
<body>
<div class="top-container">
<img class="logo" src="logo1.svg" alt="a logo">
<div id="title">
<h1>Giovanni's Guitars</h1>
</div>
</div>
<header id="header">
<img id="header-img" src="logo2.svg" alt="a logo">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<div class="container">
<video autoplay muted loop id="cover">
<source src="https://cdn.videvo.net/videvo_files/video/free/2021-05/small_watermarked/210512_01_Music_4k_009_preview.webm" type="video/mp4">
</video>
<p id="sml">Since 1961</p>
<div id="text">
<h4>Guitars and Basses.</h4>
</div>
</div>
<section class="policies">
<h5 id="prod">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel sint fugiat placeat mollitia necessitatibus enim quae at illo rem! Fuga tempore dicta ut repudiandae quis quaerat facere sit odit! Fugiat perspiciatis, accusamus voluptate itaque incidunt reprehenderit perferendis nemo. Consequuntur vero ipsum modi excepturi facilis id nemo, porro animi beatae est recusandae officia, repudiandae velit necessitatibus possimus nam maiores quo corporis laboriosam obcaecati repellat sit! Explicabo eveniet fugiat iste, minima facere ipsum aliquam fuga dignissimos amet aperiam atque excepturi, adipisci distinctio minus laudantium. Provident obcaecati tenetur rerum! Eveniet quo, nulla debitis, reiciendis hic fugiat perferendis vel consequatur eligendi amet assumenda totam? Ullam ipsa illum fugit, dolor est hic ex sequi laudantium odio consectetur vitae nihil unde, quibusdam necessitatibus. Quae placeat dolorum eos suscipit! Quo necessitatibus in ab delectus doloremque et ipsum dolorem, quod, accusantium voluptas, obcaecati possimus. Dolores dolor accusamus ex aspernatur! Porro quo laboriosam est blanditiis incidunt, quis accusantium necessitatibus distinctio dolorem enim ipsam accusamus ut odit officia rerum, praesentium ab voluptas fuga explicabo fugit dolorum ea cum animi in? Iusto veniam corporis doloremque, necessitatibus ipsam dolore! Quam sequi reprehenderit ex fugiat soluta facilis illum laudantium omnis assumenda quisquam, incidunt, deserunt officia nostrum perspiciatis. Labore veniam reiciendis quia eos veritatis sequi velit numquam unde molestias, adipisci, eligendi quisquam, quae quo modi porro harum commodi consequatur aliquid nobis. Natus quidem voluptate ratione fugiat, dolores quo culpa fuga fugit. Aperiam dolore, velit ullam repellat unde delectus eos aliquid, asperiores itaque impedit in sapiente, quasi facilis. Libero iusto cumque esse rerum quis, suscipit voluptatibus nihil soluta facere magni, nesciunt praesentium dolore consectetur et sapiente corrupti reprehenderit fuga facilis animi odio
</h5>
</section>
</body>
I think position: sticky doesn't work the way you think it does. The element with the position: sticky will only be "stuck" as long as its parent is visible. In your case nav parent is header and header has roughly the same height than nav.
In other words if you want an element to stick it needs to be the child of the element you're scrolling into.
The problem in your case is that so many elements are positioned with absolute or fixed at the end your body has the same height as the header wich means no overflow and no "stickiness"
My advise would be to start over if possible, avoid position: absolute or position: fixed for the layout (I usually recommend display: grid but when I see the final result display: block should do) and apply position: sticky to the header
As I said in comment of your question:
Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned. Source Mozilla
It does solve entirely your problem:
First I took out the nav from the header to make the position:sticky work because it wont work if it is not directly under body in this case.
Second I just commented your position:fixed on your #cover to show where that it can work otherwise it will always cancel your sticky as per documentation
Third I added z-index:1000; /* ADDED */ on your nav
Fourth comment postion on .policies and #prod
Now you just need to align correctly your video, as it seems to have a lot of different margin for no reason
DEMO:
#title{
font-family: 'Inknut Antiqua', sans-serif;
color: rgb(243, 30, 112);
font-size: 12px;
position: relative;
top: 24px;
display: flex;
flex-direction: row;
}
.logo{
width: 4%;
position: relative;
top: 20px;
display: flex;
flex-direction: row;
}
.top-container {
padding: 60px 30px 30px 30px;
margin: -80px -6px 0px -30px;
background-color: #f1f1f1;
display: flex;
justify-content: center;
position: relative;
background-image: linear-gradient(-45deg,blue,white,yellow);
}
body{
box-sizing: border-box;
}
#header-img{
width: 3%;
padding: 0;
display: flex;
position: relative;
top: 2px;
}
nav {
position: sticky;
top: 0;
z-index:1000; /* ADDED */
}
ul {
list-style-type: none;
margin: 0;
padding: 20%;
background-color: #333;
width: 100%;
display: flex;
justify-content: center;
overflow: hidden;
}
li {
list-style: none;
margin-right: 70px;
font-size: 25px;
font-weight: bold;
}
li a {
display: block;
color: white;
text-align: center;
padding: 3px 10px;
text-decoration: none;
}
li a:hover {
background-color: #04AA6D;
border-radius: 5px;
}
ul {
list-style-type: none;
margin: -48px -6px 0px -10px;
padding: 9px;
display: flex;
flex-direction: row;
}
#cover{
margin: 0.5px -10px 0px -10px;
/*position: fixed;*/
top: 0px;
display: grid;
width: 100%;
margin-right: -98px;
height: 550px;
object-fit: cover;
align-self: center;
z-index: -1;
opacity: 0.8;
}
.container {
height: 100%;
padding: 0.01em 16px;
padding-top: 0.01em;
padding-right: 0px;
padding-bottom: 0.01em;
padding-left: 0px;
display: grid;
position: relative;
justify-items: center;
}
#sml{
position: absolute;
display: grid;
color: white;
transform: translate(0px, 150px);
}
#text{
position: absolute;
display: grid;
color: whitesmoke;
transform: translate(0px, 150px);
z-index: 2;
font-size: 50px;
}
.policies{
margin-top: 0px;
background-image: whitesmoke;
display: flex;
/*position: relative;*/
}
#prod{
background-image: url("https://images.unsplash.com/photo-1524230572899-a752b3835840?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1952&q=80");
margin-right: -7px;
margin-left: -7px;
/*position: absolute;*/
top: 390px;
font-size: large;
}
/* .centered{
position: absolute;
color: rgb(228, 56, 56);
top: 30%;
left: 50%;
transform: translate(-50%,-50%);
} */
<!DOCTYPE html>
<html>
<body>
<head>
<title>Giovanni's Guitars</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght#300&display=swap"
type='text/css'>
</head>
<div class="top-container">
<img class="logo" src="logo1.svg" alt="a logo">
<div id="title">
<h1>Giovanni's Guitars</h1>
</div>
</div>
<header id="header">
<img id="header-img" src="logo2.svg" alt="a logo">
</header>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
<div class="container">
<video autoplay muted loop id="cover">
<source src="https://cdn.videvo.net/videvo_files/video/free/2021-05/small_watermarked/210512_01_Music_4k_009_preview.webm" type="video/mp4">
</video>
<p id="sml">Since 1961</p>
<div id="text">
<h4>Guitars and Basses.</h4>
</div>
</div>
<section class="policies">
<h5 id="prod">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel sint fugiat placeat mollitia necessitatibus enim quae at illo rem! Fuga tempore dicta ut repudiandae quis quaerat facere sit odit! Fugiat perspiciatis, accusamus voluptate itaque incidunt reprehenderit perferendis nemo. Consequuntur vero ipsum modi excepturi facilis id nemo, porro animi beatae est recusandae officia, repudiandae velit necessitatibus possimus nam maiores quo corporis laboriosam obcaecati repellat sit! Explicabo eveniet fugiat iste, minima facere ipsum aliquam fuga dignissimos amet aperiam atque excepturi, adipisci distinctio minus laudantium. Provident obcaecati tenetur rerum! Eveniet quo, nulla debitis, reiciendis hic fugiat perferendis vel consequatur eligendi amet assumenda totam? Ullam ipsa illum fugit, dolor est hic ex sequi laudantium odio consectetur vitae nihil unde, quibusdam necessitatibus. Quae placeat dolorum eos suscipit! Quo necessitatibus in ab delectus doloremque et ipsum dolorem, quod, accusantium voluptas, obcaecati possimus. Dolores dolor accusamus ex aspernatur! Porro quo laboriosam est blanditiis incidunt, quis accusantium necessitatibus distinctio dolorem enim ipsam accusamus ut odit officia rerum, praesentium ab voluptas fuga explicabo fugit dolorum ea cum animi in? Iusto veniam corporis doloremque, necessitatibus ipsam dolore! Quam sequi reprehenderit ex fugiat soluta facilis illum laudantium omnis assumenda quisquam, incidunt, deserunt officia nostrum perspiciatis. Labore veniam reiciendis quia eos veritatis sequi velit numquam unde molestias, adipisci, eligendi quisquam, quae quo modi porro harum commodi consequatur aliquid nobis. Natus quidem voluptate ratione fugiat, dolores quo culpa fuga fugit. Aperiam dolore, velit ullam repellat unde delectus eos aliquid, asperiores itaque impedit in sapiente, quasi facilis. Libero iusto cumque esse rerum quis, suscipit voluptatibus nihil soluta facere magni, nesciunt praesentium dolore consectetur et sapiente corrupti reprehenderit fuga facilis animi odio asperiores quod tempore? Possimus numquam mollitia nemo amet quod ut facere maxime facilis cupiditate optio, cum quisquam culpa accusantium harum dicta iste autem. Illo provident minima dolorum excepturi culpa perferendis laboriosam, fugiat reprehenderit magnam adipisci. Minus cumque magni harum! Minus earum aliquam porro explicabo fugiat fuga ipsa aut hic autem rerum ad provident corrupti, repellendus quam assumenda repudiandae? Quos inventore nam aliquam fugit totam modi fugiat asperiores cumque cum reprehenderit. Laborum iusto culpa facere velit inventore aperiam quia nisi, amet dolorem autem possimus explicabo enim vel dolore. Aut iusto amet consequatur saepe velit aliquam nihil nisi, quo iure veniam doloribus ducimus! Adipisci quisquam alias nisi eveniet! Repudiandae officia perspiciatis, neque accusantium cum suscipit fuga alias explicabo, corporis facere voluptatem assumenda fugiat incidunt dignissimos dicta ex tenetur magni sint ipsam ipsum. Provident suscipit quod asperiores labore esse sapiente nesciunt, iusto blanditiis aut distinctio sint rerum optio. Distinctio aspernatur eum natus assumenda! Molestias omnis fuga natus vitae eius ea, eligendi odit magni laboriosam id quis reprehenderit aspernatur expedita sunt. Ex praesentium facilis at, hic minus voluptatem laborum eaque, voluptatum ipsa incidunt tempora. Tempora vel dignissimos aspernatur rerum optio officia excepturi delectus, commodi ex itaque ab velit eaque pariatur sapiente placeat reprehenderit earum ipsum necessitatibus ullam! Hic maxime assumenda provident praesentium animi corrupti laboriosam dolores explicabo voluptas iure, quasi error dolore doloremque voluptatem molestias et accusamus officia id reprehenderit repellat quia ipsam, quo repudiandae. At, repudiandae aut! Itaque rerum natus nulla aperiam veniam et fugit ipsa, at reiciendis eos consectetur unde officia, impedit earum facere placeat nemo praesentium quos deserunt temporibus, nesciunt doloribus culpa ad? Eius repellat vel fugit, labore reprehenderit nesciunt tenetur maxime debitis tempore veniam, non et quibusdam deleniti laborum explicabo! Architecto quo perferendis doloribus ut magnam inventore alias temporibus voluptatem qui ratione neque itaque ex est atque, debitis quod voluptates error dolorum sapiente excepturi magni. Quis modi molestiae laborum magni odio maxime laudantium id sed labore enim facere est veritatis distinctio, quos asperiores minus delectus ratione earum ipsum a quo? Atque aliquid molestiae repellat veritatis corporis optio voluptas, sunt impedit eum nobis laboriosam expedita magni sed doloribus consectetur, quos ratione maxime saepe! Sapiente ea eligendi libero alias laborum voluptatem repellat consequuntur mollitia perspiciatis non dolorum, quas et repellendus. Repellat, doloribus alias quas rerum eveniet quo velit ullam dolorem quidem nesciunt ipsum cum exercitationem magni numquam provident neque nemo odio perferendis, sapiente ipsam sunt.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, minima. Dolore quod quam similique, odio facere necessitatibus quas officia libero non eveniet sit ipsum consectetur sunt distinctio omnis dolor, doloremque quaerat, labore quia fugiat porro facilis inventore! Nulla magnam labore assumenda laboriosam incidunt nisi dignissimos maxime repudiandae, maiores ipsa quod eligendi, at nesciunt quos. Commodi vitae blanditiis ratione assumenda. Voluptatem placeat provident illum officia fugit sequi vero nisi quam. Ipsum rerum eius ratione ea asperiores possimus praesentium commodi fuga, minima eum laudantium suscipit nostrum eveniet perferendis deserunt laboriosam blanditiis neque, alias, voluptatem eligendi dolorum vitae quae! Aut amet aliquid libero pariatur, blanditiis harum atque. Necessitatibus, iure? Odio quae magnam aliquid incidunt officia error perspiciatis illum voluptatum hic? Quas alias nemo accusantium temporibus error? Provident fuga fugiat eius enim totam soluta saepe beatae accusantium asperiores sunt nesciunt ipsa, eaque dolorum et perspiciatis dignissimos sequi? Adipisci dolorem doloremque facere pariatur inventore fuga cupiditate vel quidem enim a quia, ab odio, eveniet dignissimos dolores aliquid tenetur autem, quis nam quibusdam. Vel, quam excepturi. Fugit maxime voluptatum nam maiores delectus, quo illo consequatur aliquid dolorem excepturi quia sit laudantium quam deserunt numquam adipisci voluptatem eveniet voluptates, sed veniam rem reprehenderit corporis? Blanditiis quod, aut consequuntur commodi nisi, cupiditate dolor nihil aperiam deserunt quaerat molestiae quis nesciunt, laborum unde incidunt culpa! Possimus commodi impedit ullam eius aut veritatis expedita voluptatum nam deserunt ipsa, eum consequatur iusto doloribus enim voluptas labore ut nobis obcaecati illo perspiciatis quam similique provident. Culpa, quos sint eveniet eaque sequi doloremque mollitia nesciunt alias maiores debitis natus soluta. Explicabo dolorum ipsum dolores quaerat doloribus ad commodi nulla cupiditate doloremque. Quas iusto velit pariatur voluptatibus labore? Assumenda, cumque! Dicta molestias, harum officiis aperiam velit temporibus optio obcaecati nemo sint quam debitis nostrum. Esse, dolor. Excepturi provident ea ab, quas fugiat, dolores magni sapiente ipsum, accusantium commodi ex itaque enim! Beatae odio ipsa quisquam enim eius expedita obcaecati doloribus libero illum minima dolor asperiores accusantium, saepe suscipit facilis consequatur laboriosam, optio nemo cupiditate commodi necessitatibus aperiam. Enim perferendis ullam cum beatae soluta quas aspernatur labore itaque veniam delectus dolor debitis, voluptatibus veritatis deserunt nihil blanditiis velit ex obcaecati necessitatibus officiis minima omnis odit. Explicabo est consequuntur, ea nemo asperiores placeat nisi cum fugiat reiciendis repudiandae unde ipsum, distinctio nesciunt eos eligendi. Quo provident atque aperiam nemo numquam quaerat aliquid! Quibusdam culpa obcaecati quaerat excepturi veniam! Ut aliquam dolorum vitae praesentium reprehenderit? Unde hic consequatur officia, amet doloremque expedita! Voluptas accusamus animi ipsum quisquam atque et, ducimus est sequi quos quibusdam, nulla omnis, magnam debitis molestiae sit eius soluta impedit iusto esse voluptatem minus fugiat dolor provident? Adipisci ipsam eos, id ad accusamus voluptates accusantium maiores quas quos nobis, optio culpa assumenda similique voluptatum rem dolorum veniam doloremque ducimus quasi sit. Quos blanditiis natus in nisi sint illo unde inventore repudiandae, beatae eius ut vero ex at veritatis dolor itaque obcaecati adipisci. Itaque beatae omnis tempora et eos debitis, amet incidunt consequuntur aut aliquid, porro distinctio expedita repellat tempore. Similique iste dolores excepturi esse laborum ad, asperiores voluptate. Cum harum aliquid alias qui perferendis magnam maiores eligendi expedita et sapiente quibusdam animi unde minus, mollitia nihil repellat delectus cupiditate, architecto eveniet! Modi iusto vero molestiae laudantium, corporis optio a vel perspiciatis quisquam alias maiores ratione, ea ipsam id quam dolorem quis consequuntur. Excepturi at explicabo doloremque asperiores cupiditate? Cum sunt dolorem similique eveniet eligendi, obcaecati nesciunt vel perspiciatis delectus magnam, illum doloribus aut amet ipsam veritatis laboriosam quidem alias illo saepe rerum! Et dicta quo tempore eos dolore? Iste hic recusandae, blanditiis cumque veniam quas architecto. Repudiandae aliquam necessitatibus magni rerum quisquam eum atque dolorum placeat dignissimos. A qui cumque voluptates sint optio voluptatibus vitae harum tenetur reiciendis id eos quidem tempore laborum in error obcaecati odit ex et ratione, eaque assumenda aut eius! Impedit, quis. Nulla inventore neque omnis qui eveniet molestias eius sint vel voluptas! Tempora, animi? Sequi veniam iure quibusdam repellat, dolorum, id earum accusamus reiciendis at possimus adipisci a similique?</h5>
</section>
</body>
</html>
I tested a bit and I think the problem is not with the position sticky but with where your nav is located in the html.
if you move it outside the header you will see that it already sticks a little. The problem is that it can only stick to the top of its container as long as it doesn't touch the bottom of the container. So the height of the container should be bigger for you nav to be able to move.
Could you add some more detail on how you want the desired design to behave.
Do you wish to have the navbar stop when it hits to the top of the page? If so you will likely require some JavaScript. In which case, this may be what you are looking for...
https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
If you simply wish for the navbar to stay where it is whilst the rest of the page moves behind it, then try this...
nav {
position: fixed;
}
I have 2 div inside parent. One is text content and another is layer over that text. I am trying to make that layer full of text content.
You can check in example below that blue layer is not full of it's parent.
* { box-sizing: border-box; }
.any-children {
width: 700px;
}
.scrollable-wrapper {
border: solid 1px black;
position: relative;
overflow: auto;
height: 300px;
max-width: 500px;
}
.display-content-wrapper {
position: relative;
}
.markers-layer {
color: red;
border: 3px solid green;
opacity: 0.7;
background: blue;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="scrollable-wrapper">
<div class="display-content-wrapper">
<div class="any-children">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.
</div>
<div class="markers-layer">
*
</div>
</div>
</div>
JSFIddle
Not sure how can i fix it. Any help would be greatly appreciated.
Please find the code attached below. I have just used flex(display: flex) for (.display-content-wrapper) class and given width and height
as auto for (.scrollable-wrapper) class which would also provide
responsiveness.
for (.any-children) class.
<html>
<head>
<style>
* { box-sizing: border-box; }
.any-children {
width: 100%;
}
.scrollable-wrapper {
border: solid 1px black;
position: relative;
overflow: auto;
height: auto;
width: auto;
}
.display-content-wrapper {
position: relative;
display: flex;
padding: 10px;
}
.markers-layer {
color: red;
border: 3px solid green;
opacity: 0.7;
background: blue;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="scrollable-wrapper">
<div class="display-content-wrapper">
<div class="any-children">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.</p>
</div>
<div class="markers-layer">*</div>
</div>
</div>
</body>
</html>
You need to display: inline-block (or inline-flex / inline-grid / inline-table) to .display-content-wrapper so that it stretches over .any-children:
body {
margin: 0;
font-family: monospace;
}
p {
margin: 0;
}
p + p {
margin-top: 8px;
}
.scrollable-wrapper {
position: relative;
overflow: auto;
height: 100vh;
width: 100vw;
}
.display-content-wrapper {
position: relative;
display: inline-block;
box-sizing: border-box;
padding: 8px;
}
.any-children {
width: 150vw;
}
.markers-layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: blue;
color: red;
border: 8px solid green;
opacity: 0.7;
overflow: hidden;
}
<div class="scrollable-wrapper">
<div class="display-content-wrapper">
<div class="any-children">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.</p>
</div>
<div class="markers-layer">*</div>
</div>
</div>
I am building my very first website.The slide-in and slide-down animations were working properly until I set the navigation bar (nav-bar) position fixed then the animation got ruined I fixed the slide down animation of .welcome-text but could fix the slide-in animation of #intro.
I would like that slide-in animation slides-in without distorting the other pages - here is the code below;
//HTML
'''<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Deborah Palm Tree</title>
<link rel="stylesheet" href="profile.css">
<link rel="stylesheet" href="work.css">
<link rel="stylesheet" href="about.css">
</head>
<section class="Home" id="#Home">
<nav class="nav-bar" id="#nav-bar">
<ul>
<li>Home </li>
<li>Work</li>
<li>About </li>
</ul>
</nav>
<body>
<section id="#Home">
<h1 class="welcome-text"> Welcome to my page! </h1>
<div id="intro" class="page-intro">
<a name="Home">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A modi veniam
repellendus nesciunt
nemoquam Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas
mollitia placeat
perspiciatis
expedita! Explicabo hic expedita soluta eos ullam. Incidunt vitae
laboriosam temporibus iusto
iste maiores dolorum soluta, ipsa minus optio repudiandae adipisci aut
deserunt vel atque
deleniti facere, sint, quas earum a. Ipsum neque, explicabo fuga, expedita
error sequi ratione
atque et fugit adipisci harum ad dolorum! Deleniti similique, reiciendis
ipsam blanditiis a
neque, iste obcaecati, soluta eveniet nostrum praesentium porro culpa
asperiores quisquam unde
sapiente ad dolorum architecto voluptatum? Officia nihil saepe iste
excepturi distinctio
exercitationem veniam, voluptates laudantium repellendus, eligendi omnis
molestiae impedit
necessitatibus incidunt consectetur debitis quisquam assumenda deleniti
quam molestias nemo.
Perspiciatis aperiam sit fugit provident mollitia. Nostrum, fuga quaerat praesentium excepturi
iste impedit consectetur architecto odio blanditiis ducimus aliquid sit! Doloremque, obcaecati
laudantium, quia alias repellendus quos suscipit, modi corporis quidem corrupti incidunt
consequatur laborum necessitatibus eaque perspiciatis quod repudiandae qui! Deserunt, quo error
dolor provident ipsum nostrum dolore nihil veritatis ad quibusdam ducimus suscipit doloremque
neque incidunt nisi temporibus. Atque ipsa labore magni, exercitationem, laudantium nostrum
Officiis deserunt qu quaera dicta eaque vitae, nulla doloribus minima praesentium aliquid
nesciunt. Cumque rem
aspernatur id repellat s placeat corrupti eum eos quidem aliquid. Hic numquam quos sequi est
dignissimos magnam
voluptatibus maiores excepturi ratione reiciendis quia fugiat ipsa voluptatem nobis accusamus
sint asperiores neque,
animi nemo eminus sapiente! Culpa temporibus illum ullam rem quae aspernatur doloribus ut
voluptatum nihil
quo laborum, a provident. Iste ratione inventore saepe architecto recusandae.
</p>
</a>
EXPLORE
</div>
</section>
<section class="Work" id="#Work">
<h2 class="h2-Work"> WORK </h2>
<a name="Work">
<p class="p-Work">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam nobis ex veritatis nostrum harum sit,
cupiditate aliquid tempore, suipit neque eveniet quisquam sed, ratione blanditiis eaque nemo quibusdam.
debitis numquam cum odio dicta ducimus pariatur ullam! Nesciunt facere reprehenderit cupiditate aperiam
repudiandae autem blanditiis magni ea, odit molestiae quo ad vero ratione cumque beatae voluptatem porro
ipsum, ducimus dignissimos eaque quibusdam quod. Velit facilis ipsum, harum amet quaerat perferendis
suscipit officiis recusandae voluptatibus cum numquam quisquam alias? Vero deserunt commodi ea dolores. Fuga
debitis inventore temporibus harum porro! Atque maxime iste hic aperiam sunt reprehenderit, dignissimos
dolorem perferendis possimus exercitationem iure commodi modi repellendus at esse labore magnam quia
quibusdam maiores, quaerat nesciunt nobis! Eius saepe, quo itaque rem quia quae sequi tempora, ratione
eveniet, possimus sunt! Tempore nemo, quia reprehenderit dolorum totam quae? Magnam non ratione esse,
laudantium ducimus ullam officiis! In placeat ut libero rem consectetur dolorem ullam consequatur suscipit
amet sunt voluptas, harum dolorum quaerat similique, perspiciatis, ratione officia id obcaecati ipsa
perferendis repellendus. Explicabo animi repellat a vel in, doloremque eum officiis reiciendis ipsam quis
deleniti assumenda quibusdam fuga recusandae impedit asperiores eos cum aperiam labore vero molestiae? Odio
aut laboriosam perspiciatis aspernatur blanditiis excepturi provident consectetur beatae.
perferendis neque minima a labore excepturi recusandae earum ut alias, culpa molestias voluptate est iste
reiciendis! Velit, debitis quasi sit commodi dicta sunt, minus vel modi dolores repellat laudantium,
suscipit Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ullam ducimus velit quisquam
provident. Saepe, dolores suscipit harum adipisci dicta obcaecati officiis voluptatibus, cupiditate iure
nostrum, nemo voluptatem facere cum. Exercitationem ipsam ab est et porro, debitis, sapiente nam recusandae,
illo delectus ea. Consequuntur provident exercitationem dolore numquam repellendus nam voluptas at modi
repellat non dolores nemo laborum molestiae aliquid eaque, similique id voluptate. Omnis unde est saepe
asperiores, delectus ipsum dolore. Dicta repellat odit, debitis temporibus incidunt omnis saepe ipsam
consequuntur obcaecati, sit laudantium ratione. Sapiente, reiciendis cumque, exercitationem voluptates,
alias fuga enim consequuntur dolorem consequatur repudiandae modi? Quibusdam.
temporibus vero ducimus reprehenderit quod labore tempora tenetur provident perferendis cumque.
</p>
</a>
</section>
<section class="About" id="#About">
<h3 class="h3-About"> ABOUT </h3>
<a name="About">
<p class="p-About">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam nobis ex veritatis nostrum harum sit,
cupiditate aliquid tempore, suscipit neque eveniet quisquam sed, ratione blanditiis eaque nemo quibusdam.
Soluta Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam repudiandae minima architecto quibusdam
dolore optio nihil assumenda, laboriosam facilis repellat totam dolorem impedit mollitia at nisi a ipsum
aliquam explicabo. perferendis neque minima a labore excepturi recusandae earum ut alias, culpa molestias
voluptate est iste
reiciendis! Velit, debitis quasi sit commodi dicta sunt, minus vel modi dolores repellat laudantium, Lorem
ipsum dolor sit amet consectetur, adipisicing elit. Minima aliquam eligendi culpa, fugit non voluptatem quia
aspernatur optio assumenda dignissimos excepturi, expedita cum voluptates error omnis earum praesentium quas
quidem ipsam doloribus. Beatae, quos. Quam, maxime itaque tenetur repudiandae modi libero nihil nemo qui
temporibus sed impedit minima doloremque earum excepturi accusamus culpa vel sit natus dolor velit, hic,
sapiente ea ut quae. In placeat velit excepturi iste temporibus, illum dignissimos optio repellat totam
asperiores animi voluptatem illo voluptas, odit et molestias pariatur quas! Impedit aut odio similique
vero ducimus reprehenderit quod labore tempora tenetur provident perferendis cumque.
</p>
</a>
</section>
<section class="footer" id="#footer">
<footer>
© Website designed by Deborah Palm Tree.
</footer>
</section>
</body>
</html> '''
//CSS -The HTML has 3 nav-bar items I set the nav-bar position to fixed and its top to
zero to ensure the nav-bar is static as I scroll down the page this affected the slide-
animation of the Home
''' * {
margin: 0;
padding: 0;
}
body {
background-color: black;
text-align: center;
}
.page-intro {
max-width: 960px;
margin: auto;
padding: 0 30px;
}
.welcome-text {
height: 80px;
}
nav.nav-bar {
position: fixed;
top: 0;
background-color: darkolivegreen;
min-width: 100%;
height: 8vh;
}
nav li {
display: inline-block;
margin-right: 5%;
}
nav ul {
list-style: none;
display: flex;
justify-content: flex-end;
}
nav li a {
text-decoration: none;
color: whitesmoke;
}
h1,
.page-intro {
color: whitesmoke;
}
h1.welcome-text {
font-size: 50px;
line-height: 1.3;
animation: slide-down 3s forwards;
}
.h2-Work,.h3-About{
font-size: 25px;
color: antiquewhite;
text-align: center;
padding: 30px 30px 0px 30px;
}
#keyframes slide-down {
0% {
margin-top: -20px;
}
100% {
margin-top: 80px;
}
}
#intro {
animation: slide-in 3s forwards;
}
#keyframes slide-in {
0% {
margin-left: -50%;
}
100% {
margin: 0;
}
}
.btn {
display: inline-block;
color: #fff;
text-decoration: none;
padding: 1rem 2rem;
border: #fff 1px solid;
margin-top: 40px;
opacity: 0;
animation: btn 3s 3s forwards;
transition: transform 1s;
}
.btn:hover {
transform: rotateY(180deg);
}
#keyframes btn {
0% {
bottom: 10%;
opacity: 0;
}
100% {
bottom: 5%;
opacity: 1;
}
}
.p-Work {
color: antiquewhite;
text-align: center;
}
.p-About {
color: antiquewhite;
text-align: center;
}
.footer {
color: antiquewhite;
background-color: cadetblue;
min-width: 100%;
}'''
#intro {
animation: slide-in 3s forwards;
transform: translate(-50%);
position: relative;
left: 50%;
}
position: relative;
This is allowing the element to retain its size in-line with the parent element i.e. it is relative to the box modle of its perant
left: 50%;
This is centering the possition of the element to the middle but
transform: translate(-50%);
By default, all the elements have their center point in the top left of the page and this means that you need to shift that to the center, which is where the transform translate comes into play
Hope this helps
Based on the above all you need is to keep the changes made in my answer above as well as adding the navbar to being fixed:
nav.nav-bar {
position: fixed; (<<<< the nav bar will stay at the top of the page)
top: 0;
background-color: darkolivegreen;
min-width: 100%;
height: 8vh;
z-index: 5; (<<<<<< the content goes under the nav)
}
Z-index is the position of elements, if a z-index is higher than another elements then it will apear infront the the element (this only works for possitioned elements - so it will work here as the possition is set to fixed)
More info here:
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
For point 3) intro text should slide in from left side -
This is currently doing so correctly from the code I can see and have edited:
#intro {
animation: slide-in 3s forwards;
transform: translate(-50%);
position: relative;
left: 50%;
}
If there is an issue here let me know :)
My CSS is messed up, I've tried to fix it for the last 4 hours and I couldn't fix that.. I got a div inside another divs which are all under the same section.
The '.app' div gets out the of the section and moving down over another section
Here is a picture to explain better:
html:
<section id="portfolio" data-aos="fade-right">
<h1 data-aos="slide-right">My Projects</h1>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="app">
<div class="image">
<img src="../assets/images/coupon.jpg" alt="" />
</div>
<ul>
<li><span> Name: </span> Coupon System</li>
<li><span>Description:</span> Final project in studies</li>
<li><span>Back-end:</span> Java,Spring Framework, Hibernate</li>
<li><span>Front-end:</span> Angular, CSS, Html</li>
<li><span>Database:</span> MySQL</li>
<li>
<span>Link:</span>
<button
onclick="window.open('http://coupon1.us-east-2.elasticbeanstalk.com','_blank')"
>
click here
</button>
</li>
</ul>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</section>
css:
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
}
#portfolio {
background: #00ff40;
padding: 30px 10px 30px 10px;
}
.app {
position: absolute;
display: flex;
flex-wrap: wrap;
height: 100%;
background-color: #bc2a8d;
}
.app .image {
display: flex;
flex-direction: column;
min-width: 100%;
justify-content: center;
align-items: center;
height: 30%;
}
.app .image img {
flex-grow: 1;
max-width: 100%;
max-height: 100%;
}
As you can also see there is a big space between the picture and the text inside the main div which I would like to remove.
thanks by heart!
Update: to make it easier to fix I removed the '.app' div and used a new one with only paragraph inside:
<div class="swiper-container">
<div class="swiper-wrapper">
<div>
<p>
facilis nobis atque quod eum maxime non aspernatur, consequatur
ad. Ad, fuga vero? Aut pariatur deserunt nulla incidunt. Possimus
nesciunt vel at enim. Ea, iste. Doloremque, blanditiis explicabo
atque perferendis laboriosam excepturi cum consequuntur deleniti?
Cumque adipisci asperiores doloremque saepe optio nam temporibus
labore totam. Provident, amet officiis? Numquam dicta officia
nulla autem blanditiis ratione. Nam placeat doloribus veniam
perspiciatis corrupti ratione, odio deserunt repellat, adipisci
recusandae incidunt culpa fuga aspernatur et temporibus illum
suscipit reiciendis saepe quam. Iusto illo culpa veritatis
consequuntur alias quo a nulla soluta eveniet reprehenderit
sapiente veniam nam, commodi est officiis porro aliquid.
Laboriosam debitis eaque commodi nesciunt earum ipsam voluptates,
quo ab. Adipisci consequuntur ut hic repellendus? Eligendi
mollitia, voluptatum sed magni quo aliquam officiis blanditiis qui
tempore adipisci quasi deserunt, nam reiciendis, non nostrum nemo
doloremque eius quisquam eos ad corrupti. Labore accusantium totam
eaque natus iste incidunt praesentium? Voluptatum numquam dolorem
vitae mollitia quae! Molestias laboriosam, sapiente, earum
accusantium unde aperiam itaque corrupti culpa pariatur maiores
obcaecati sint illo veniam. Architecto optio minus voluptas
voluptatum quibusdam, neque odit nihil ex officiis explicabo
voluptates quod. Omnis, ab consequuntur! Quam inventore ut non
odio velit doloribus rem, cum amet iusto quia suscipit? Culpa
minus fuga harum saepe voluptatum ipsum non unde, nemo, deleniti
illo enim mollitia quaerat officia commodi optio laborum
blanditiis corporis laboriosam, tempora obcaecati ipsam eligendi
quam! A, inventore accusantium. Totam quibusdam quam dignissimos
quisquam reprehenderit quidem tenetur fuga voluptates minus
praesentium iste dicta illo eveniet rem eum, sunt omnis quae natus
ea! Quasi enim voluptatibus non. Doloribus, minus odit. Atque in
minus quidem sit, consectetur fugiat obcaecati veritatis,
architecto aperiam eaque sed delectus vero debitis accusantium
laboriosam corporis nemo exercitationem ex ad. Esse consequuntur,
provident non iusto dolorem inventore. Excepturi explicabo
quisquam qui commodi corporis dolore. Minima, beatae alias
perferendis quaerat deserunt, obcaecati eveniet consectetur, odio
quos dolor repellat? Aliquid, impedit quasi ratione blanditiis
ipsam esse odit soluta doloribus. Iste, harum repellendus quaerat
vel iusto ducimus ratione cumque a magni ipsa nihil, fugiat itaque
cupiditate quae non incidunt. Modi nesciunt fugiat quam ipsa magni
officia quasi a error accusamus? Cumque ad, iure necessitatibus
excepturi animi ipsum debitis distinctio maxime, cupiditate
impedit vel quis quo explicabo error deleniti accusamus autem
quae, rerum exercitationem deserunt illo repellat. Enim distinctio
reprehenderit quas? Quos reiciendis nemo provident porro adipisci
quam magni perferendis vero error necessitatibus, reprehenderit
corrupti labore deleniti ea non cumque nobis harum incidunt?
Commodi ratione quis obcaecati vel eligendi excepturi quasi.
Libero quae earum neque consequuntur vero tempora! Aliquid
officiis architecto sunt pariatur maiores consectetur officia
doloribus iste provident soluta ab, distinctio vel illum
voluptates nulla ea doloremque odio nemo voluptas.
</p>
</div>
result is still the same though:
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-container-multirow > .swiper-wrapper {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
}
#portfolio {
background: #00ff40;
padding: 30px 10px 30px 10px;
}
#portfolio h1 {
margin-bottom: 0px;
margin: 0;
text-align: center;
font-size: 20px;
border-bottom: 3px solid rgb(223, 0, 0);
}
.app {
position: absolute;
display: flex;
flex-wrap: wrap;
height: 100%;
background-color: #bc2a8d;
}
.app .image {
display: flex;
flex-direction: column;
min-width: 100%;
justify-content: center;
align-items: center;
height: 30%;
}
.app .image img {
flex-grow: 1;
max-width: 100%;
max-height: 100%;
}
<section id="portfolio" data-aos="fade-right">
<h1 data-aos="slide-right">My Projects</h1>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div>
<p>
facilis nobis atque quod eum maxime non aspernatur, consequatur
ad. Ad, fuga vero? Aut pariatur deserunt nulla incidunt. Possimus
nesciunt vel at enim. Ea, iste. Doloremque, blanditiis explicabo
atque perferendis laboriosam excepturi cum consequuntur deleniti?
Cumque adipisci asperiores doloremque saepe optio nam temporibus
labore totam. Provident, amet officiis? Numquam dicta officia
nulla autem blanditiis ratione. Nam placeat doloribus veniam
perspiciatis corrupti ratione, odio deserunt repellat, adipisci
recusandae incidunt culpa fuga aspernatur et temporibus illum
suscipit reiciendis saepe quam. Iusto illo culpa veritatis
consequuntur alias quo a nulla soluta eveniet reprehenderit
sapiente veniam nam, commodi est officiis porro aliquid.
Laboriosam debitis eaque commodi nesciunt earum ipsam voluptates,
quo ab. Adipisci consequuntur ut hic repellendus? Eligendi
mollitia, voluptatum sed magni quo aliquam officiis blanditiis qui
tempore adipisci quasi deserunt, nam reiciendis, non nostrum nemo
doloremque eius quisquam eos ad corrupti. Labore accusantium totam
eaque natus iste incidunt praesentium? Voluptatum numquam dolorem
vitae mollitia quae! Molestias laboriosam, sapiente, earum
accusantium unde aperiam itaque corrupti culpa pariatur maiores
obcaecati sint illo veniam. Architecto optio minus voluptas
voluptatum quibusdam, neque odit nihil ex officiis explicabo
voluptates quod. Omnis, ab consequuntur! Quam inventore ut non
odio velit doloribus rem, cum amet iusto quia suscipit? Culpa
minus fuga harum saepe voluptatum ipsum non unde, nemo, deleniti
illo enim mollitia quaerat officia commodi optio laborum
blanditiis corporis laboriosam, tempora obcaecati ipsam eligendi
quam! A, inventore accusantium. Totam quibusdam quam dignissimos
quisquam reprehenderit quidem tenetur fuga voluptates minus
praesentium iste dicta illo eveniet rem eum, sunt omnis quae natus
ea! Quasi enim voluptatibus non. Doloribus, minus odit. Atque in
minus quidem sit, consectetur fugiat obcaecati veritatis,
architecto aperiam eaque sed delectus vero debitis accusantium
laboriosam corporis nemo exercitationem ex ad. Esse consequuntur,
provident non iusto dolorem inventore. Excepturi explicabo
quisquam qui commodi corporis dolore. Minima, beatae alias
perferendis quaerat deserunt, obcaecati eveniet consectetur, odio
quos dolor repellat? Aliquid, impedit quasi ratione blanditiis
ipsam esse odit soluta doloribus. Iste, harum repellendus quaerat
vel iusto ducimus ratione cumque a magni ipsa nihil, fugiat itaque
cupiditate quae non incidunt. Modi nesciunt fugiat quam ipsa magni
officia quasi a error accusamus? Cumque ad, iure necessitatibus
excepturi animi ipsum debitis distinctio maxime, cupiditate
impedit vel quis quo explicabo error deleniti accusamus autem
quae, rerum exercitationem deserunt illo repellat. Enim distinctio
reprehenderit quas? Quos reiciendis nemo provident porro adipisci
quam magni perferendis vero error necessitatibus, reprehenderit
corrupti labore deleniti ea non cumque nobis harum incidunt?
Commodi ratione quis obcaecati vel eligendi excepturi quasi.
Libero quae earum neque consequuntur vero tempora! Aliquid
officiis architecto sunt pariatur maiores consectetur officia
doloribus iste provident soluta ab, distinctio vel illum
voluptates nulla ea doloremque odio nemo voluptas.
</p>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</section>
I think is the position in your CSS is causing overlapping.
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.
.
.
.app {
position: absolute;
display: flex;
flex-wrap: wrap;
height: 100%;
background-color: #bc2a8d;
}
Try to add another div outside the class .app that have the hight match the content.
Or Just remove the position.
I'm not sure why you use the position here, so I can't give you an alternative.
If you just want to center it, you can try to use margin.