Related
I am having a problem with the taskbar on my webpage. It is "sticky" on scroll down on a laptop screen, even when I resize the window to a size where the nav menu goes into a toggle.
However when I use the inspector to view it on IPhone or any screen type using the chrome inspector the "sticky" nav doesn't work until I scroll halfway down the page and then back up.
I would also appreciate any corrections to help me improve my work so far, I am a total beginner.
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
const navLogo = document.querySelector("li.nav-logo");
const navbar = document.querySelector('.main-nav');
const sticky = navbar.offsetTop;
window.addEventListener("scroll", stickyNav);
function stickyNav() {
if (window.scrollY >= sticky) {
// document.body.style.paddingTop = navbar.offsetHeight + 'px';
document.body.style.paddingTop = 0;
navbar.classList.add('sticky');
} else {
navbar.classList.remove('sticky');
document.body.style.paddingTop = 0;
}
}
burger.addEventListener("click", () => {
// Toggle Nav
nav.classList.toggle("nav-active");
//Animate navLinks
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ''
navLogo.style.display = 'flex';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.45}s`;
navLogo.style.display = 'none';
}
});
//Burger animation
burger.classList.toggle('toggle');
});
}
navSlide();
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
caret-color: transparent;
font-family: 'Roboto', sans-serif;
}
/* --------------------------------- Nav -------------------------------------------- */
/*Nav bar*/
/* Nav bar size and position */
.main-nav {
display: flex;
width: 100%;
transition: all 0.5s linear;
z-index: 1;
font-family: 'Roboto', sans-serif;
}
/*List on the task bar*/
.nav-links {
display: flex;
justify-content: space-around;
width: 100%;
align-items: center;
list-style: none;
transition: all 0.05s linear;
padding: 2px;
}
/*links on the task bar*/
.nav-links a {
color: #0C3D8D;
text-decoration: none;
letter-spacing: 2px;
font-weight: bold;
font-size: 18px;
position: relative;
}
/*Hover change*/
.nav-links a:hover {
color: #95989A;
font-size: 18px;
}
/* ------------------------------------- Sticky nav logo ---------------------------------------- */
/*Nav bar logo hidden*/
li.nav-logo {
padding-top: 5px;
padding-bottom: 5px;
max-width: 0px;
overflow: hidden;
transition: all 0.3s linear;
}
/* visible on sticky nav bar */
.sticky li.nav-logo {
display: flex;
max-width: 200px;
}
/* ----------------------------------- Sticky scroll ------------------------------------------ */
/*Stick Nav bar on scroll*/
/* Changes to task bar when scrolling */
.sticky {
position: sticky;
top: 0;
width: 100%;
background-color: rgba(234, 234, 234, 0.895);
}
/* ----------------------------------- Language flags ------------------------------------------ */
/* Language flag information */
.languageFlag {
height: 20px;
width: 40px;
transition: all 0.2s linear;
}
/* Padding for flags*/
.language>* {
padding: 2px;
}
/* Hover change of flag icons */
.languageFlag:hover {
filter: grayscale(70%)
}
/* ----------------------------------------------------------------------------- */
/* Logo and spaceing from the top for logo*/
.logo {
display: flex;
justify-content: center;
padding-bottom: 1.5vh;
padding-top: 2vh;
}
.burger {
padding-top: 20px;
padding-left: 20px;
padding-bottom: 10px;
display: none;
cursor: pointer;
}
.burger div {
background-color: #0C3D8D;
width: 25px;
height: 3px;
margin: 5px;
transition: all 0.3s ease;
}
#media all and (max-width:1024px) {
.nav-links {
display: flex;
justify-content: space-evenly;
width: 100%;
height: 100%;
}
#banner {
display: none;
}
}
#media all and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 0vh;
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.languages {
order: -2;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
.logo-hide {
display: none;
}
.column {
display: flex;
align-items: center;
}
.column>* {
flex-basis: 100%;
padding: 2%;
}
.topImage {
display: flex;
max-width: 100%;
}
#aboutUsTitle {
text-align: center;
color: #0C3D8D;
margin-bottom: 2vh;
font-size: 2rem;
letter-spacing: 1px;
}
#promise {
text-align: center;
font-size: 1.2rem;
}
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Monza</title>
</head>
<body>
<header class="logo">
<img src="Images\logo.png" alt="" width="auto" height="auto">
</header>
<nav class="main-nav">
<ul class="nav-links">
<li class="nav-logo">
<img src="Images\logo.png" alt="" width="200px" height="auto">
</li>
<li>
Home
</li>
<li>
About us
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li class="language">
<img src="Images\de.png" alt="" srcset="" class="languageFlag" id="languageFlagOne">
<img src="Images\gb.png" alt="" srcset="" class="languageFlag" id="languageFlagTwo">
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="navbar.js"></script>
<script src="app.js"></script>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, cupiditate id beatae mollitia quibusdam repellat modi dignissimos dolorem pariatur accusantium officiis suscipit temporibus inventore debitis sapiente, repudiandae sint fugit unde illo quis
soluta dolorum ipsam! Doloribus adipisci neque nam reiciendis officia dolore placeat consequuntur. Ab tempora dicta fugiat commodi qui fuga totam ipsa eaque. Corrupti, nesciunt sit alias doloremque officia, accusantium officiis veritatis, eaque repellendus
saepe facilis. Illum mollitia eos quia? Aliquam porro beatae praesentium delectus ullam ad ex consequuntur ratione! Adipisci reiciendis iste laudantium voluptatum id nulla distinctio optio architecto placeat omnis, incidunt ea enim minus, magnam nihil
rem autem ducimus laboriosam esse totam labore, officia repellendus numquam quo. Harum expedita in veritatis officia qui! Sint quisquam enim ducimus molestiae ipsa est illo vero sequi cum facere, eligendi quibusdam repellat numquam et cumque iste
velit iusto laboriosam. Hic, enim consequatur sequi laborum placeat dolor maxime natus ducimus nobis quas error iusto veritatis eligendi inventore accusantium ipsam in cum quasi tempore reprehenderit aliquam illum quia. At numquam autem obcaecati,
odit, saepe dolorem, consequatur corporis optio mollitia eveniet fugit in minus quod veniam unde quos illum itaque similique architecto nesciunt impedit. Laboriosam, recusandae asperiores inventore magnam facilis soluta deserunt ratione sequi molestiae
debitis nesciunt mollitia nobis praesentium animi odit beatae hic optio ab nisi dolorum labore minus tenetur aliquam! Eveniet magnam vitae aliquid officia officiis quod sequi sed est, magni recusandae corporis rem et beatae, maxime accusamus quasi
unde amet? Quibusdam maxime minima illum ipsa, corporis beatae rem numquam, distinctio enim voluptas ea quae, vitae odit excepturi. Distinctio amet libero est repellat eaque. Voluptates corrupti vero ex nulla hic quam recusandae, optio aliquid ipsum
voluptas praesentium laborum. Vero odit nihil, omnis praesentium labore sunt ducimus iste consectetur dolorem? Tempora debitis dignissimos neque perferendis excepturi quasi repudiandae, tempore sapiente consequuntur nostrum porro doloremque magnam,
et dolores ipsum unde facere fugit quas cumque! Quae sint recusandae modi architecto natus, corrupti saepe, sit qui inventore consequuntur nam autem, impedit fugiat fugit debitis est cumque dicta optio. Autem modi quia laboriosam explicabo iure, voluptatum
provident, cum, aut accusantium harum quaerat. Qui, tempore autem provident doloribus atque iusto corrupti ea, dolorum, deleniti quaerat numquam! Voluptatem aliquam asperiores, aut quibusdam delectus aliquid saepe quam dolores pariatur repudiandae
porro quia perferendis cum, beatae facilis quisquam nemo, quidem omnis quos! Eius nam nisi, sequi autem ullam libero illo? Repellat nulla perferendis minus laboriosam animi eligendi commodi ipsam laudantium aliquid mollitia facilis nobis earum aspernatur,
consectetur sint reprehenderit non fugiat quos amet itaque facere accusamus cupiditate obcaecati. Odio aliquid architecto ipsum quo eveniet. Quis, numquam dolorum voluptas aspernatur ducimus magni ipsum unde veritatis nulla omnis nihil quaerat sit
officiis maiores facilis laudantium eligendi consequuntur repellendus nemo et? Officia autem aliquid, quia eius mollitia totam repudiandae cumque fugit quae. Obcaecati fuga placeat architecto necessitatibus accusantium, aperiam fugit cum quibusdam
dignissimos maxime? Tempore iure minus aspernatur animi voluptates ea accusantium, impedit deleniti dolorem, dicta totam consectetur magni consequatur cupiditate eos assumenda doloribus, autem exercitationem nemo tenetur tempora aut eum numquam! Quidem
aut ea quos voluptate, autem unde recusandae, minima qui necessitatibus tenetur illum eius error quibusdam nisi repudiandae hic fugiat, aspernatur deleniti. Et fugit, voluptate similique minus impedit repudiandae nobis officia velit, commodi eos,
deserunt architecto earum. Temporibus necessitatibus quasi voluptatum saepe deleniti dolorem laborum tenetur sed debitis excepturi! Expedita ea exercitationem animi doloremque eveniet ipsam, labore saepe explicabo corporis iste laboriosam voluptas
voluptates repellat sed, assumenda consequatur voluptatum atque. Iste, quidem, ducimus accusamus doloremque optio, odit laudantium odio illum nemo facere quaerat modi. Veniam blanditiis possimus optio explicabo. Vero quibusdam ipsa aliquam in illo!
Cumque explicabo dicta numquam placeat soluta? At itaque autem quo officia. Aliquam fugiat dicta quidem tempora voluptas, voluptate pariatur officia omnis sequi quo tenetur veritatis exercitationem, perspiciatis aspernatur incidunt sit iure repudiandae.
Reprehenderit, ipsa expedita consectetur, nesciunt asperiores debitis repudiandae ullam porro eum temporibus perferendis necessitatibus nisi nostrum eos possimus cupiditate error. Id nihil, exercitationem veniam delectus, placeat quisquam facere recusandae
dolorum ducimus labore similique cumque. Sapiente quam id aperiam similique ut enim delectus pariatur earum. Ipsum reiciendis ex eius, explicabo nostrum modi, quae sapiente non quo accusamus eos distinctio repudiandae culpa mollitia, qui veniam porro.
Repudiandae sed fugiat unde. Iusto incidunt soluta excepturi vitae dolore. Animi, at deserunt veritatis quam nihil laborum odio voluptatum perspiciatis praesentium illum harum, delectus eveniet nisi, quis est numquam architecto non necessitatibus.
Pariatur, ipsum iusto! Minus sequi error deleniti in nulla officia quae amet ex, quos pariatur, excepturi dicta corporis velit ullam, quam illo blanditiis libero? Distinctio voluptatum quas alias ad accusantium nihil numquam enim rerum doloribus non
eaque aut quae suscipit libero eveniet tempore vel provident deserunt animi, a autem ex in ut magni. Explicabo a commodi similique aspernatur quaerat officia quos numquam, quasi hic eligendi dolorum vero recusandae minima deserunt dolor quis error
tempora. Libero sed nihil consequatur quisquam deserunt! Modi est ducimus labore provident, expedita alias minus doloribus quisquam repudiandae culpa qui perspiciatis eos sint quod! Provident cumque unde nihil ducimus quos excepturi officia quasi
dolor, debitis commodi in eos eveniet nesciunt amet libero neque facere voluptatem! Nobis libero voluptas tenetur nostrum optio, fuga commodi nihil aut aspernatur quasi neque veritatis modi nemo, praesentium vero labore iure! Vero iste accusantium
officiis et dolores, quo, non commodi, alias deserunt cumque corporis illo iure asperiores accusamus aspernatur corrupti magni quibusdam soluta totam id dicta. Cum optio minus velit nostrum placeat impedit veniam harum nesciunt inventore. Nisi, id
veritatis dolorem odit numquam vero laudantium, ullam, impedit ratione assumenda adipisci alias neque ut repellendus quam cupiditate est nam quidem libero nostrum explicabo. Commodi, repellendus velit. Neque, laboriosam? Incidunt quasi cum natus esse
illum soluta neque possimus nemo dolores recusandae ullam, non a ut doloribus necessitatibus officia cumque aut similique! Quidem soluta voluptatem sequi praesentium, obcaecati enim, eum, perferendis non minus voluptatum fuga provident id ex distinctio!
Praesentium, similique! Sed facilis ipsa reiciendis impedit unde quis deleniti suscipit porro. Dolore, nemo officia aut quae voluptas cum molestiae. Adipisci distinctio quam ratione fuga sunt tempore, animi sint, voluptatum ea assumenda id est earum
dolorem.
</p>
</body>
</html>
It's actually because of your logo. When the screen reduces, you're not doing anything with it in your media query so it sticks to the top of the header as you've written it. If you add the logo class to your media query and style it appropriately, you can prevent it from breaking the sticky nav. See snippet, make sure you view it on a mobile device too.
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
const navLogo = document.querySelector("li.nav-logo");
const navbar = document.querySelector('.main-nav');
const sticky = navbar.offsetTop;
window.addEventListener("scroll", stickyNav);
function stickyNav() {
if (window.scrollY >= sticky) {
// document.body.style.paddingTop = navbar.offsetHeight + 'px';
document.body.style.paddingTop = 0;
navbar.classList.add('sticky');
} else {
navbar.classList.remove('sticky');
document.body.style.paddingTop = 0;
}
}
burger.addEventListener("click", () => {
// Toggle Nav
nav.classList.toggle("nav-active");
//Animate navLinks
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ''
navLogo.style.display = 'flex';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.45}s`;
navLogo.style.display = 'none';
}
});
//Burger animation
burger.classList.toggle('toggle');
});
}
navSlide();
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
caret-color: transparent;
font-family: 'Roboto', sans-serif;
}
/* --------------------------------- Nav -------------------------------------------- */
/*Nav bar*/
/* Nav bar size and position */
.main-nav {
display: flex;
width: 100%;
transition: all 0.5s linear;
z-index: 1;
font-family: 'Roboto', sans-serif;
}
/*List on the task bar*/
.nav-links {
display: flex;
justify-content: space-around;
width: 100%;
align-items: center;
list-style: none;
transition: all 0.05s linear;
padding: 2px;
}
/*links on the task bar*/
.nav-links a {
color: #0C3D8D;
text-decoration: none;
letter-spacing: 2px;
font-weight: bold;
font-size: 18px;
position: relative;
}
/*Hover change*/
.nav-links a:hover {
color: #95989A;
font-size: 18px;
}
/* ------------------------------------- Sticky nav logo ---------------------------------------- */
/*Nav bar logo hidden*/
li.nav-logo {
padding-top: 5px;
padding-bottom: 5px;
max-width: 0px;
overflow: hidden;
transition: all 0.3s linear;
}
/* visible on sticky nav bar */
.sticky li.nav-logo {
display: flex;
max-width: 200px;
}
/* ----------------------------------- Sticky scroll ------------------------------------------ */
/*Stick Nav bar on scroll*/
/* Changes to task bar when scrolling */
.sticky {
position: sticky;
top: 0;
width: 100%;
background-color: rgba(234, 234, 234, 0.895);
}
/* ----------------------------------- Language flags ------------------------------------------ */
/* Language flag information */
.languageFlag {
height: 20px;
width: 40px;
transition: all 0.2s linear;
}
/* Padding for flags*/
.language>* {
padding: 2px;
}
/* Hover change of flag icons */
.languageFlag:hover {
filter: grayscale(70%)
}
/* ----------------------------------------------------------------------------- */
/* Logo and spaceing from the top for logo*/
.logo {
display: block;
margin: 0 auto;
padding-bottom: 1.5vh;
padding-top: 2vh;
width: 200px;
height: auto;
}
.burger {
padding-top: 20px;
padding-left: 20px;
padding-bottom: 10px;
display: none;
cursor: pointer;
}
.burger div {
background-color: #0C3D8D;
width: 25px;
height: 3px;
margin: 5px;
transition: all 0.3s ease;
}
#media all and (max-width:1024px) {
.nav-links {
display: flex;
justify-content: space-evenly;
width: 100%;
height: 100%;
}
#banner {
display: none;
}
}
#media all and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 0vh;
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.languages {
order: -2;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
.logo {
position: fixed;
top: 0;
right: 0;
z-index: 10;
height: 59px;
width: auto;
padding-bottom: 0;
padding-top: 0;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
.logo-hide {
display: none;
}
.column {
display: flex;
align-items: center;
}
.column>* {
flex-basis: 100%;
padding: 2%;
}
.topImage {
display: flex;
max-width: 100%;
}
#aboutUsTitle {
text-align: center;
color: #0C3D8D;
margin-bottom: 2vh;
font-size: 2rem;
letter-spacing: 1px;
}
#promise {
text-align: center;
font-size: 1.2rem;
}
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Monza</title>
</head>
<body>
<header>
<img class="logo" src="https://i.imgur.com/xXZB3Hv.png" alt="">
</header>
<nav class="main-nav">
<ul class="nav-links">
<li class="nav-logo">
<img class="logo" src="https://i.imgur.com/xXZB3Hv.png" alt="">
</li>
<li>
Home
</li>
<li>
About us
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li class="language">
<img src="Images\de.png" alt="" srcset="" class="languageFlag" id="languageFlagOne">
<img src="Images\gb.png" alt="" srcset="" class="languageFlag" id="languageFlagTwo">
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="navbar.js"></script>
<script src="app.js"></script>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, cupiditate id beatae mollitia quibusdam repellat modi dignissimos dolorem pariatur accusantium officiis suscipit temporibus inventore debitis sapiente, repudiandae sint fugit unde illo quis
soluta dolorum ipsam! Doloribus adipisci neque nam reiciendis officia dolore placeat consequuntur. Ab tempora dicta fugiat commodi qui fuga totam ipsa eaque. Corrupti, nesciunt sit alias doloremque officia, accusantium officiis veritatis, eaque repellendus
saepe facilis. Illum mollitia eos quia? Aliquam porro beatae praesentium delectus ullam ad ex consequuntur ratione! Adipisci reiciendis iste laudantium voluptatum id nulla distinctio optio architecto placeat omnis, incidunt ea enim minus, magnam nihil
rem autem ducimus laboriosam esse totam labore, officia repellendus numquam quo. Harum expedita in veritatis officia qui! Sint quisquam enim ducimus molestiae ipsa est illo vero sequi cum facere, eligendi quibusdam repellat numquam et cumque iste
velit iusto laboriosam. Hic, enim consequatur sequi laborum placeat dolor maxime natus ducimus nobis quas error iusto veritatis eligendi inventore accusantium ipsam in cum quasi tempore reprehenderit aliquam illum quia. At numquam autem obcaecati,
odit, saepe dolorem, consequatur corporis optio mollitia eveniet fugit in minus quod veniam unde quos illum itaque similique architecto nesciunt impedit. Laboriosam, recusandae asperiores inventore magnam facilis soluta deserunt ratione sequi molestiae
debitis nesciunt mollitia nobis praesentium animi odit beatae hic optio ab nisi dolorum labore minus tenetur aliquam! Eveniet magnam vitae aliquid officia officiis quod sequi sed est, magni recusandae corporis rem et beatae, maxime accusamus quasi
unde amet? Quibusdam maxime minima illum ipsa, corporis beatae rem numquam, distinctio enim voluptas ea quae, vitae odit excepturi. Distinctio amet libero est repellat eaque. Voluptates corrupti vero ex nulla hic quam recusandae, optio aliquid ipsum
voluptas praesentium laborum. Vero odit nihil, omnis praesentium labore sunt ducimus iste consectetur dolorem? Tempora debitis dignissimos neque perferendis excepturi quasi repudiandae, tempore sapiente consequuntur nostrum porro doloremque magnam,
et dolores ipsum unde facere fugit quas cumque! Quae sint recusandae modi architecto natus, corrupti saepe, sit qui inventore consequuntur nam autem, impedit fugiat fugit debitis est cumque dicta optio. Autem modi quia laboriosam explicabo iure, voluptatum
provident, cum, aut accusantium harum quaerat. Qui, tempore autem provident doloribus atque iusto corrupti ea, dolorum, deleniti quaerat numquam! Voluptatem aliquam asperiores, aut quibusdam delectus aliquid saepe quam dolores pariatur repudiandae
porro quia perferendis cum, beatae facilis quisquam nemo, quidem omnis quos! Eius nam nisi, sequi autem ullam libero illo? Repellat nulla perferendis minus laboriosam animi eligendi commodi ipsam laudantium aliquid mollitia facilis nobis earum aspernatur,
consectetur sint reprehenderit non fugiat quos amet itaque facere accusamus cupiditate obcaecati. Odio aliquid architecto ipsum quo eveniet. Quis, numquam dolorum voluptas aspernatur ducimus magni ipsum unde veritatis nulla omnis nihil quaerat sit
officiis maiores facilis laudantium eligendi consequuntur repellendus nemo et? Officia autem aliquid, quia eius mollitia totam repudiandae cumque fugit quae. Obcaecati fuga placeat architecto necessitatibus accusantium, aperiam fugit cum quibusdam
dignissimos maxime? Tempore iure minus aspernatur animi voluptates ea accusantium, impedit deleniti dolorem, dicta totam consectetur magni consequatur cupiditate eos assumenda doloribus, autem exercitationem nemo tenetur tempora aut eum numquam! Quidem
aut ea quos voluptate, autem unde recusandae, minima qui necessitatibus tenetur illum eius error quibusdam nisi repudiandae hic fugiat, aspernatur deleniti. Et fugit, voluptate similique minus impedit repudiandae nobis officia velit, commodi eos,
deserunt architecto earum. Temporibus necessitatibus quasi voluptatum saepe deleniti dolorem laborum tenetur sed debitis excepturi! Expedita ea exercitationem animi doloremque eveniet ipsam, labore saepe explicabo corporis iste laboriosam voluptas
voluptates repellat sed, assumenda consequatur voluptatum atque. Iste, quidem, ducimus accusamus doloremque optio, odit laudantium odio illum nemo facere quaerat modi. Veniam blanditiis possimus optio explicabo. Vero quibusdam ipsa aliquam in illo!
Cumque explicabo dicta numquam placeat soluta? At itaque autem quo officia. Aliquam fugiat dicta quidem tempora voluptas, voluptate pariatur officia omnis sequi quo tenetur veritatis exercitationem, perspiciatis aspernatur incidunt sit iure repudiandae.
Reprehenderit, ipsa expedita consectetur, nesciunt asperiores debitis repudiandae ullam porro eum temporibus perferendis necessitatibus nisi nostrum eos possimus cupiditate error. Id nihil, exercitationem veniam delectus, placeat quisquam facere recusandae
dolorum ducimus labore similique cumque. Sapiente quam id aperiam similique ut enim delectus pariatur earum. Ipsum reiciendis ex eius, explicabo nostrum modi, quae sapiente non quo accusamus eos distinctio repudiandae culpa mollitia, qui veniam porro.
Repudiandae sed fugiat unde. Iusto incidunt soluta excepturi vitae dolore. Animi, at deserunt veritatis quam nihil laborum odio voluptatum perspiciatis praesentium illum harum, delectus eveniet nisi, quis est numquam architecto non necessitatibus.
Pariatur, ipsum iusto! Minus sequi error deleniti in nulla officia quae amet ex, quos pariatur, excepturi dicta corporis velit ullam, quam illo blanditiis libero? Distinctio voluptatum quas alias ad accusantium nihil numquam enim rerum doloribus non
eaque aut quae suscipit libero eveniet tempore vel provident deserunt animi, a autem ex in ut magni. Explicabo a commodi similique aspernatur quaerat officia quos numquam, quasi hic eligendi dolorum vero recusandae minima deserunt dolor quis error
tempora. Libero sed nihil consequatur quisquam deserunt! Modi est ducimus labore provident, expedita alias minus doloribus quisquam repudiandae culpa qui perspiciatis eos sint quod! Provident cumque unde nihil ducimus quos excepturi officia quasi
dolor, debitis commodi in eos eveniet nesciunt amet libero neque facere voluptatem! Nobis libero voluptas tenetur nostrum optio, fuga commodi nihil aut aspernatur quasi neque veritatis modi nemo, praesentium vero labore iure! Vero iste accusantium
officiis et dolores, quo, non commodi, alias deserunt cumque corporis illo iure asperiores accusamus aspernatur corrupti magni quibusdam soluta totam id dicta. Cum optio minus velit nostrum placeat impedit veniam harum nesciunt inventore. Nisi, id
veritatis dolorem odit numquam vero laudantium, ullam, impedit ratione assumenda adipisci alias neque ut repellendus quam cupiditate est nam quidem libero nostrum explicabo. Commodi, repellendus velit. Neque, laboriosam? Incidunt quasi cum natus esse
illum soluta neque possimus nemo dolores recusandae ullam, non a ut doloribus necessitatibus officia cumque aut similique! Quidem soluta voluptatem sequi praesentium, obcaecati enim, eum, perferendis non minus voluptatum fuga provident id ex distinctio!
Praesentium, similique! Sed facilis ipsa reiciendis impedit unde quis deleniti suscipit porro. Dolore, nemo officia aut quae voluptas cum molestiae. Adipisci distinctio quam ratione fuga sunt tempore, animi sint, voluptatum ea assumenda id est earum
dolorem.
</p>
</body>
</html>
While scrolling my background video is stuck on the screen. I have set the position to fixed but I want it to stop acting when the next container starts.
I also want the text of that video container to go sliding up through the video while scrolling and the same with the next container texts
I have tried replacing the position: fixed with background-poistion: fixed with no desirable changes
#title {
font-family: 'Inknut Antiqua', sans-serif;
color: rgb(243, 30, 112);
font-size: 12px;
top: 0;
display: flex;
flex-direction: row;
}
.logo {
width: 4%;
top: 6px;
display: flex;
flex-direction: row;
}
.top-container {
padding: 60px 30px 30px 30px;
margin: -80px -8px -40px -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 {
position: sticky;
top: 0;
;
}
#header-img {
width: 3%;
padding: 0;
display: flex;
position: relative;
top: 2px;
}
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;
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: 1;
font-size: 50px;
}
.policies {
margin-top: 0px;
background-color: whitesmoke;
display: grid;
position: relative;
}
#prod {
margin-top: 30px;
position: absolute;
top: 860px;
}
/* .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. 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>
do you want something like this? If you want this, simply delete the html in the video section and use the code snippet.
var video = document.querySelector('#ds');
window.onscroll = () => {
if (document.querySelector('.hd-a').getBoundingClientRect().bottom < 0) {
video.pause();
} else {
if (!video.play()) {
video.play();
}
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.hd-a {
position: relative;
width: 100%;
height: 100vh;
background-color: red;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hd-a #ds {
min-width: 100vw;
position: absolute;
}
.hd-a .desc {
position: absolute;
z-index: 99;
color: #fff;
text-align: center;
padding-left: 50px;
padding-right: 50px;
}
.desc p {
margin-top: 50px;
}
<div class="hd-a">
<div class="desc">
<h1>Lorquasi, velit, quam sit ipsa officia illo veritatis expedita</h1>
<p>Loremque adipisci sequi animi dicta!</p>
</div>
<video autoplay muted loop id="ds">
<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>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem amet officia mollitia repudiandae autem, voluptates cupiditate consequuntur aspernatur repellat atque eum error dolorum quos numquam natus! Officia laborum facere earum iste molestias dignissimos
laboriosam, aliquam vel incidunt fuga. Dolorem doloribus veritatis magni expedita voluptas sit earum laudantium blanditiis reprehenderit quis! Impedit excepturi consequuntur porro tempore atque sequi eaque unde ut neque rerum odio nisi repellendus veniam
voluptates veritatis doloribus cumque consequatur sunt beatae aperiam quasi, non sapiente! Praesentium, eaque aut! Amet illo nostrum non qui blanditiis repellat fugiat, voluptatum reiciendis, asperiores totam harum aliquid facere consectetur, corporis
laboriosam porro impedit delectus quas natus! Sequi deserunt aliquid veritatis ea doloribus quasi neque molestias atque, itaque dicta corrupti, necessitatibus a quaerat, quia explicabo quisquam iste est aut deleniti id. Sed blanditiis nemo eos debitis
perferendis suscipit hic nesciunt, illo ducimus praesentium laborum quaerat eum. Voluptate, cum obcaecati? Voluptatem perferendis in animi sit repellat! At dolor eveniet dolores iure est sunt dolorem magnam illum ea, numquam sapiente atque eius voluptates
veniam, nihil expedita laborum quis ipsam labore officiis animi. Exercitationem, qui possimus nesciunt maxime id voluptates maiores, error unde modi debitis similique nihil temporibus! Quae eius iure minus ut eaque architecto quaerat similique incidunt
modi illum, expedita natus tenetur. Similique possimus quam vero quia sit doloremque tempore. Beatae ipsa similique voluptatibus maiores perspiciatis excepturi voluptates? Doloribus impedit dolor debitis quibusdam qui quidem! Incidunt itaque, vitae
laboriosam, optio impedit aliquid at cumque fugiat consequuntur praesentium vel excepturi nihil omnis animi voluptatum officiis voluptatem vero aspernatur aliquam? Omnis itaque ratione ducimus inventore debitis, pariatur, similique iste cumque nobis
exercitationem rem consequatur possimus veniam soluta, praesentium ut repellat illum. Nemo odio, quaerat numquam, expedita obcaecati saepe culpa esse amet provident ratione unde officiis. Quod aperiam molestiae ex quaerat animi iusto autem tempora,
neque consectetur nostrum assumenda mollitia natus tempore, dolorum soluta asperiores vel ipsam facilis non aliquam! Doloribus, adipisci at praesentium accusantium laborum aut dicta cum atque dolore qui quis magnam fuga delectus cumque error enim esse
eum? Nulla doloribus quis voluptas repellat molestias cupiditate est quibusdam. Expedita tempore corporis non iure animi, amet esse quaerat error impedit aliquam ipsum, et odio, accusamus earum ratione ut. Omnis ipsam iure error ullam ducimus sunt consequatur
neque itaque culpa aliquid hic quo, ratione nulla a amet earum quae iste minus fuga reiciendis nam dolore debitis molestiae. Qui, sapiente. Et illo vel voluptas nioluptas hic eum modi, sint temporibus officia assumenda est corrupti sed quisquam minus
ab inventore eveniet eos sequi consequatur. Labore, delectus doloribus iure id odit nemo accusantium fugit exercitationem odio nobis consequatur error placeat assumenda pariatur adipisci libero nesciunt voluptas laborum ratione minima. Eius, facere,
recusandae pore voluptatem quaerat fugit cumque quam ex eaque, dolores, repellendus earum officia sapiente magnam aliquam optio! Alias quia autem debitis consequuntur temporibus ipsam quam placeat eum iste atque ea quod nobis labore non impedit voluptas
dolor recusandae eaque nam omnis fugit, at, delectus quae? Porro error aut rem at earum, officiis placeat magnam magni eius. Quasi eveniet ex quaerat dolorem impedit corporis aspernatur, non consequuntur.</p>
I would like to ask you a question. I hope that when the yellow block is displayed, when the mouse hovers over the yellow block stone, the original blue block can be displayed again!
But I still can't achieve the effect after trying it for an afternoon. Would you like to ask everyone to help me see if there is a problem?
Thank you all for your help.
$(document).scroll(function(){
var scrollH=$(document).scrollTop();
if(scrollH > 60){
$('.nav').addClass('up');
$('.nav2').addClass('down');
}else if(scrollH < 90){
$('.nav').removeClass('up');
$('.nav2').removeClass('down');
}
})
.header {
padding: 10px;
text-align: center;
height: 60px;
background-color: red;
color: #fff;
font-size: 60px;
position: sticky;
top: 0;
left: 0;
z-index: 2;
}
.nav2 {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #e5d549;
color: #222;
padding: 20px;
position: fixed;
top: 80px;
left: 0px;
right: 0px;
opacity: 0;
margin-bottom: 10px;
}
.nav2.down {
-webkit-animation: fadeIn 1s forwards;
animation: fadeIn 1s forwards;
}
.nav2 .breadcrumb {
display: flex;
}
.nav2 .breadcrumb .item::after {
content: ">";
padding: 0px 8px;
}
.nav2 .breadcrumb .item::after:last-child {
display: none;
}
.nav2 .search {
display: flex;
align-items: center;
border: 1px solid #222;
padding: 3px;
order: 3;
}
.nav2 .search .fas {
color: #fff;
padding: 6px;
}
.nav2 .search .btn {
display: inline-block;
padding: 2px;
text-decoration: none;
background-color: #e5d549;
color: #222;
border-radius: 4px;
margin-left: 3px;
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.nav {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background-color: #1768ac;
padding: 20px;
z-index: -1;
margin-bottom: 10px;
}
.nav.up {
-webkit-animation: fadeout 1s forwards;
animation: fadeout 1s forwards;
}
.nav .filter {
display: flex;
width: 100%;
order: 1;
color: #fff;
padding-left: 10px;
padding-bottom: 20px;
}
.nav .filter .item {
margin: 10px;
padding-bottom: 10px;
border-bottom: 2px solid #fff;
}
.nav .category {
display: flex;
order: 2;
}
.nav .category .item {
color: #fff;
margin-left: 20px;
}
.nav .search {
display: flex;
align-items: center;
border: 1px solid #ccc;
padding: 3px;
order: 3;
}
.nav .search .fas {
color: #fff;
padding: 6px;
}
.nav .search .btn {
display: inline-block;
padding: 2px;
text-decoration: none;
background-color: #e5d549;
color: #222;
border-radius: 4px;
margin-left: 3px;
}
#-webkit-keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.content {
padding: 20px;
background-color: #222;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="header">LOGO</div>
<div class="nav">
<ul class="filter">
<li class="item">HOT</li>
<li class="item">NEW</li>
</ul>
<ul class="category">
<li class="item">title</li>
<li class="item">title</li>
<li class="item">title</li>
<li class="item">title</li>
<li class="item">title</li>
<li class="item">title</li>
</ul>
<div class="search">
<label><i class="fas fa-search"></i></label>
<input class="search_input" type="text" >
<a class="btn" href="javascript:;">BTN</a>
</div>
</div>
<div class="nav2">
<ul class="breadcrumb">
<li class="item">index</li>
<li class="item">item</li>
<li class="item">item</li>
</ul>
<div class="search">
<label><i class="fas fa-search"></i></label>
<input class="search_input" type="text" >
<a class="btn" href="javascript:;">BTN</a>
</div>
</div>
<div class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.lorem100Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.
</div>
</div>
When the mouse touches the yellow block, the blue block will be displayed and return to the displayed height.
Just add the following jquery :
$(function() {
$(".nav2").on("mouseover", function() {
window.scrollTo(0, 0);
});
})
Here is the example code: https://jsfiddle.net/9e2s18a0/19/
I am having some issues with offseting the footer ID with javascript
Transform creates a new local coordinate system(W3C Spec), position: fixed is fixed to the origin of scrollbar content container ( main ), i.e. the left: 0, top: 0 point.
This is why I need to register a scroll listener and apply offsets to the fixed elements.
The problem I'm having is that the footer only appears on scroll, I want it to be in position on load like my header - otherwise everything works perfectly
I am still a beginner with Javascript, hoping for some suggestions
var fixedElem = document.getElementById('fixed');
var scrollbar = Scrollbar.init(
document.getElementById('scroll'),
);
scrollbar.addListener(function(status) {
var offset = status.offset;
fixed.style.top = offset.y + 'px';
fixed.style.left = offset.x + 'px';
footer.style.top = (offset.y + document.getElementById('scroll').clientHeight - footer.clientHeight) + 'px';
});
* {
padding: 0;
margin: 0;
}
#scroll {
width: 500px;
height: 100vh;
}
#fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: skyblue;
text-align: center;
}
#footer {
position: fixed;
top: 100%;
left: 0;
width: 100%;
background: skyblue;
text-align: center;
}
#content {
padding: 40px 0;
font-size: 2rem;
height: 100vh;
background: orange;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/idiotWu/smooth-scrollbar/master/dist/smooth-scrollbar.js"></script>
</head>
<body>
<main id="scroll">
<header id="fixed">
<h1>A fixed header</h1>
</header>
<article id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio amet, laudantium et ex, maiores labore minima quis incidunt quam magnam molestias, temporibus commodi! Laborum ipsam et aut quibusdam veniam animi.</p>
<p>Illo, obcaecati modi laudantium, impedit ab dolorem optio sint fuga nisi, est earum, aliquam! Nam officia doloribus ad, facere architecto voluptatem labore, minima dicta dignissimos cumque ut assumenda, natus et!</p>
<p>Odio velit vitae nisi consectetur molestiae repudiandae nemo quia qui in voluptatibus rerum iusto minus atque accusamus, autem, expedita incidunt magni voluptate itaque iure et cupiditate? Praesentium consectetur nesciunt at!</p>
<p>Hic obcaecati laboriosam impedit doloribus numquam officia atque quia voluptatem deleniti sint ipsum debitis excepturi modi non tenetur corporis maxime magni aliquid, facere, saepe omnis, iusto architecto, aspernatur iste. Quae?</p>
<p>Iste voluptatum rerum atque nesciunt sequi, dolore dicta error. Voluptas, quidem. Quasi aspernatur, culpa aliquid aperiam maxime sed voluptatum, saepe quis perferendis nulla sint possimus cumque, magnam voluptates hic accusantium?</p>
<p>Ipsum, voluptates rerum repellendus illo fugiat, non aspernatur iure accusamus ullam recusandae quos? Veritatis accusantium, laudantium possimus rem, pariatur maxime itaque mollitia eos sapiente illum dolor adipisci ratione laborum iure.</p>
<p>Laboriosam eius ipsum recusandae fuga aut nobis aperiam, veritatis ullam quod voluptatibus voluptatem voluptates labore quisquam ut tempora blanditiis cum, eaque illo nam sapiente autem debitis! Unde, quod necessitatibus cum?</p>
<p>Sapiente iure distinctio vel qui enim, molestiae rerum fugit at non voluptate numquam doloremque a, obcaecati fugiat et debitis, magni alias eveniet cupiditate veritatis natus voluptates nostrum reprehenderit. Quidem, quam.</p>
<p>Id fugiat at tenetur, architecto enim inventore accusamus asperiores quod! Dicta modi omnis sunt, laboriosam expedita et, ullam vel culpa odit consequuntur nobis provident id excepturi. Distinctio veniam, fuga temporibus?</p>
<p>Voluptate soluta, sapiente quaerat, nulla iste similique adipisci natus amet. Deleniti perspiciatis, qui saepe, reprehenderit vero excepturi quo beatae at autem sed repellendus maxime repudiandae, tempore obcaecati similique! Distinctio, consequuntur!</p>
</article>
<footer id="footer">
<h1>A fixed footer</h1>
</footer>
</main>
</body>
</html>
You are setting the top offset of the footer initially to 100%. That way, the footer just disappears just right below the bottom. Substract the height from the view height and you'll see it.
#footer {
...
top: calc(100vh - 37px);
...
}
Another way is to initialize the offset yourself manually:
function setOffset(status) {
var offset = status.offset;
fixed.style.top = offset.y + 'px';
fixed.style.left = offset.x + 'px';
footer.style.top = (offset.y + document.getElementById('scroll').clientHeight - footer.clientHeight) + 'px';
}
scrollbar.addListener(setOffset);
setOffset({ offset: { y: 0 }});
Nevertheless there is also position: sticky;, which is quite useful for headers and footers. In that case you would only need to set the scrollbar to the #content. I didn't get it to work properly in combination with the scrollbar, but maybe you want to think about it. (SEE EDIT)
var fixedElem = document.getElementById('fixed');
var scrollbar = Scrollbar.init(
document.getElementById('scroll'),
);
function setOffset(status) {
var offset = status.offset;
fixed.style.top = offset.y + 'px';
fixed.style.left = offset.x + 'px';
footer.style.top = (offset.y + document.getElementById('scroll').clientHeight - footer.clientHeight) + 'px';
}
scrollbar.addListener(setOffset);
//setOffset({ offset: { y: 0 }});
* {
padding: 0;
margin: 0;
}
#scroll {
width: 500px;
height: 100vh;
}
#fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: skyblue;
text-align: center;
}
#footer {
position: fixed;
top: calc(100vh - 37px);
left: 0;
width: 100%;
background: skyblue;
text-align: center;
}
#content {
padding: 40px 0;
font-size: 2rem;
height: 100vh;
background: orange;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/idiotWu/smooth-scrollbar/master/dist/smooth-scrollbar.js"></script>
</head>
<body>
<main id="scroll">
<header id="fixed">
<h1>A fixed header</h1>
</header>
<article id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio amet, laudantium et ex, maiores labore minima quis incidunt quam magnam molestias, temporibus commodi! Laborum ipsam et aut quibusdam veniam animi.</p>
<p>Illo, obcaecati modi laudantium, impedit ab dolorem optio sint fuga nisi, est earum, aliquam! Nam officia doloribus ad, facere architecto voluptatem labore, minima dicta dignissimos cumque ut assumenda, natus et!</p>
<p>Odio velit vitae nisi consectetur molestiae repudiandae nemo quia qui in voluptatibus rerum iusto minus atque accusamus, autem, expedita incidunt magni voluptate itaque iure et cupiditate? Praesentium consectetur nesciunt at!</p>
<p>Hic obcaecati laboriosam impedit doloribus numquam officia atque quia voluptatem deleniti sint ipsum debitis excepturi modi non tenetur corporis maxime magni aliquid, facere, saepe omnis, iusto architecto, aspernatur iste. Quae?</p>
<p>Iste voluptatum rerum atque nesciunt sequi, dolore dicta error. Voluptas, quidem. Quasi aspernatur, culpa aliquid aperiam maxime sed voluptatum, saepe quis perferendis nulla sint possimus cumque, magnam voluptates hic accusantium?</p>
<p>Ipsum, voluptates rerum repellendus illo fugiat, non aspernatur iure accusamus ullam recusandae quos? Veritatis accusantium, laudantium possimus rem, pariatur maxime itaque mollitia eos sapiente illum dolor adipisci ratione laborum iure.</p>
<p>Laboriosam eius ipsum recusandae fuga aut nobis aperiam, veritatis ullam quod voluptatibus voluptatem voluptates labore quisquam ut tempora blanditiis cum, eaque illo nam sapiente autem debitis! Unde, quod necessitatibus cum?</p>
<p>Sapiente iure distinctio vel qui enim, molestiae rerum fugit at non voluptate numquam doloremque a, obcaecati fugiat et debitis, magni alias eveniet cupiditate veritatis natus voluptates nostrum reprehenderit. Quidem, quam.</p>
<p>Id fugiat at tenetur, architecto enim inventore accusamus asperiores quod! Dicta modi omnis sunt, laboriosam expedita et, ullam vel culpa odit consequuntur nobis provident id excepturi. Distinctio veniam, fuga temporibus?</p>
<p>Voluptate soluta, sapiente quaerat, nulla iste similique adipisci natus amet. Deleniti perspiciatis, qui saepe, reprehenderit vero excepturi quo beatae at autem sed repellendus maxime repudiandae, tempore obcaecati similique! Distinctio, consequuntur!</p>
</article>
<footer id="footer">
<h1>A fixed footer</h1>
</footer>
</main>
</body>
</html>
EDIT:
I made the experience it's a good choice to always prefer css solutions to js solutions, since it's a lot less buggy and annoying. So here I added a solo css solution for the header and footer problem. NOTE: I also edited the html to do so:
var scrollbar = Scrollbar.init(
document.getElementById('scroll'),
);
* {
padding: 0;
margin: 0;
}
body {
overflow: hidden;
}
.container {
width: 500px;
height: 100vh;
}
header {
position: sticky;
height: 40px;
top: 0;
background: skyblue;
text-align: center;
z-index: 99;
}
footer {
position: sticky;
height: 40px;
bottom: 0;
background: skyblue;
text-align: center;
}
main {
font-size: 2rem;
/* substract header and footer size */
height: calc(100% - 80px);
overflow: auto;
background: orange;
}
article {
padding: 40px 0;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/idiotWu/smooth-scrollbar/master/dist/smooth-scrollbar.js"></script>
</head>
<body>
<div class="container">
<header>
<h1>A fixed header</h1>
</header>
<main id="scroll">
<article id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio amet, laudantium et ex, maiores labore minima quis incidunt quam magnam molestias, temporibus commodi! Laborum ipsam et aut quibusdam veniam animi.</p>
<p>Illo, obcaecati modi laudantium, impedit ab dolorem optio sint fuga nisi, est earum, aliquam! Nam officia doloribus ad, facere architecto voluptatem labore, minima dicta dignissimos cumque ut assumenda, natus et!</p>
<p>Odio velit vitae nisi consectetur molestiae repudiandae nemo quia qui in voluptatibus rerum iusto minus atque accusamus, autem, expedita incidunt magni voluptate itaque iure et cupiditate? Praesentium consectetur nesciunt at!</p>
<p>Hic obcaecati laboriosam impedit doloribus numquam officia atque quia voluptatem deleniti sint ipsum debitis excepturi modi non tenetur corporis maxime magni aliquid, facere, saepe omnis, iusto architecto, aspernatur iste. Quae?</p>
<p>Iste voluptatum rerum atque nesciunt sequi, dolore dicta error. Voluptas, quidem. Quasi aspernatur, culpa aliquid aperiam maxime sed voluptatum, saepe quis perferendis nulla sint possimus cumque, magnam voluptates hic accusantium?</p>
<p>Ipsum, voluptates rerum repellendus illo fugiat, non aspernatur iure accusamus ullam recusandae quos? Veritatis accusantium, laudantium possimus rem, pariatur maxime itaque mollitia eos sapiente illum dolor adipisci ratione laborum iure.</p>
<p>Laboriosam eius ipsum recusandae fuga aut nobis aperiam, veritatis ullam quod voluptatibus voluptatem voluptates labore quisquam ut tempora blanditiis cum, eaque illo nam sapiente autem debitis! Unde, quod necessitatibus cum?</p>
<p>Sapiente iure distinctio vel qui enim, molestiae rerum fugit at non voluptate numquam doloremque a, obcaecati fugiat et debitis, magni alias eveniet cupiditate veritatis natus voluptates nostrum reprehenderit. Quidem, quam.</p>
<p>Id fugiat at tenetur, architecto enim inventore accusamus asperiores quod! Dicta modi omnis sunt, laboriosam expedita et, ullam vel culpa odit consequuntur nobis provident id excepturi. Distinctio veniam, fuga temporibus?</p>
<p>Voluptate soluta, sapiente quaerat, nulla iste similique adipisci natus amet. Deleniti perspiciatis, qui saepe, reprehenderit vero excepturi quo beatae at autem sed repellendus maxime repudiandae, tempore obcaecati similique! Distinctio, consequuntur, END!</p>
</article>
</main>
<footer>
<h1>A fixed footer</h1>
</footer>
</div>
</body>
</html>
i have created a side menu bar with some bit of css and java script but when i tried to edit my list elements to fit the width of the side bar they just start far from the margin. where did i go wrong or what have i missed?
// JavaScript Document//
$('.nav-side .nav-toggle').on('click', function(e){
e.preventDefault();
$(this).parent().toggleClass('nav-open');
});
#charset "utf-8";
body
{
font: 16px "Helvetica",sans-serif;
line-height: 1.4;
font-weight: 200;
background-color: #563838;
}
.wrapper
{
margin: 0 auto;
width: 1160px;
text-align: center;
position: relative;
top: 230px;
}
.nav-side
{
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
max-width: 250px;
background-color: rgba(8, 120, 164, 0.9);
box-sizing: border-box;
color: brown;
margin-left: -250px;
transition: margin 600ms ease-in-out;
}
.nav-side.nav-open
{
margin-left: 0;
box-shadow: 1px 1px 3px rgba(0,0,0,.1);
}
.nav-side ul
{
list-style: none
}
.nav-side ul li
{
height: 70px;
background-color: antiquewhite;
left: 0;
}
.nav-toggle
{
position: absolute;
right: -70px;
top: 10px;
width: 70px;
height: 70px;
background-color: rgba(30, 207, 214, 0.1);
line-height: 70px;
text-decoration: none;
text-align: center;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
box-shadow: 1px 0 3px rgba(0,0,0, .1);
}
.nav-toggle:hover
{
background-color: #1ecfd6;
cursor: pointer;
}
.nav-toggle:before
{
content: "🙇";
font-weight:900;
color: white;
font-size: 32px;
padding-left: 5px;
}
.nav-side.nav-open .nav-toggle:before
{
content: "🙆";
right: 0;
}
.logo
{
width: 100%;
height: 225px;
text-align: center;
position: fixed;
background-color: #272424;
top: 0;
left: 0;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flavour Dome</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa iure, voluptatum sequi dolorem numquam ullam! Tempore error quos, nobis sapiente porro nihil ia ut optio! Animi modi, totam magnam adipisci minus, nesciunt quam cum repudiandae aspernatur. Quod, dolor veritatis perferendis repellat pariatur quae! Molestiae repudiandae maxime impedit ad, eum est!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit aliquam id fugiat, velit veritatis esse! Ipsa tempore quasi fugit, incidunt, dignissimos rerum deserunt possimus aspernatur corporis iusto eligendi numquam aliquam repellat alias magni ullam, nobis, placeat a. Similique odio, nesciunt est officiis ratione voluptatem tempora dicta quod vero. Amet sequi quas repellat aliquam illo totam dolorum, dolore eaque porro commodi odio vitae ex! Odit debitis excepturi necessitatibus esse, velit rerum? Molestiae, earum illum rem quas maiores provident adipisci perspiciatis porro? Consequuntur ratione, velit doloribus unde, necessitatibus corrupti sunt iusto numquam, architecto ex provident hic rem. Aspernatur a amet expedita, ad repellat voluptatem laboriosam, blanditiis deserunt quis molestiae quae, hic perferendis in totam optio vero. Accusamus aut beatae id sed, omnis dicta rerum repudiandae nostrum minus, illum nemo non accusantium perferendis ratione enim ea quas veritatis vero odit distinctio facilis assumenda harum. Atque at ex ut ipsum fugit deserunt inventore, excepturi. Consequuntur, iure tempore nisi, similique, harum dignissimos, vitae temporibus blanditiis veritatis saepe rerum repellat. Incidunt sequi, voluptate asperiores quaerat dolores numquam esse obcaecati saepe unde aliquid beatae odio mollitia vero. Numquam voluptate provident molestiae error labore, fugit consequatur incidunt saepe maxime quis, molestias perspiciatis libero eaque ipsum impedit! Asperiores, doloremque!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis minus itaque odit atque, accusamus amet, nulla magnam beatae quidem quasi, earum. Praesentium facilis enim maxime aspernatur cumque repellendus dolore alias facere magni, unde incidunt explicabo minima culpa, modi voluptate ad.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa iure, voluptatum sequi dolorem numquam ullam! Tempore error quos, nobis sapiente porro nihil mollitia ut optio! Animi modi, totam magnam adipisci minus, nesciunt quam cum repudiandae aspernatur. Quod, dolor veritatis perferendis repellat pariatur quae! Molestiae repudiandae maxime impedit ad, eum est!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit aliquam id fugiat, velit veritatis esse! Ipsa tempore quasi fugit, incidunt, dignissimos rerum deserunt possimus aspernatur corporis iusto eligendi numquam aliquam repellat alias magni ullam, nobis, placeat a. Similique odio, nesciunt est officiis ratione voluptatem tempora dicta quod vero. Amet sequi quas repellat aliquam illo totam dolorum, dolore eaque porro commodi odio vitae ex! Odit debitis excepturi necessitatibus esse, velit rerum? Molestiae, earum illum rem quas maiores provident adipisci perspiciatis porro? Consequuntur ratione, velit doloribus unde, necessitatibus corrupti sunt iusto numquam, architecto ex provident hic rem. Aspernatur a amet expedita, ad repellat voluptatem laboriosam, blanditiis deserunt quis molestiae quae, hic perferendis in totam optio vero. Accusamus aut beatae id sed, omnis dicta rerum repudiandae nostrum minus, illum nemo non accusantium perferendis ratione enim ea quas veritatis vero odit distinctio facilis assumenda harum. Atque at ex ut ipsum fugit deserunt inventore, excepturi. Consequuntur, iure tempore nisi, similique, harum dignissimos, vitae temporibus blanditiis veritatis saepe rerum repellat. Incidunt sequi, voluptate asperiores quaerat dolores numquam esse obcaecati saepe unde aliquid beatae odio mollitia vero. Numquam voluptate provident molestiae error labore, fugit consequatur incidunt saepe maxime quis, molestias perspiciatis libero eaque ipsum impedit! Asperiores, doloremque!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis minus itaque odit atque, accusamus amet, nulla magnam beatae quidem quasi, earum. Praesentium facilis enim maxime aspernatur cumque repellendus dolore alias facere magni, unde incidunt explicabo minima culpa, modi voluptate ad.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa iure, voluptatum sequi dolorem numquam ullam! Tempore error quos, nobis sapiente porro nihil mollitia ut optio! Animi modi, totam magnam adipisci minus, nesciunt quam cum repudiandae aspernatur. Quod, dolor veritatis perferendis repellat pariatur quae! Molestiae repudiandae maxime impedit ad, eum est!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit aliquam id fugiat, velit veritatis esse! Ipsa tempore quasi fugit, incidunt, dignissimos rerum deserunt possimus aspernatur corporis iusto eligendi numquam aliquam repellat alias magni ullam, nobis, placeat a. Similique odio, nesciunt est officiis ratione voluptatem tempora dicta quod vero. Amet sequi quas repellat aliquam illo totam dolorum, dolore eaque porro commodi odio vitae ex! Odit debitis excepturi necessitatibus esse, velit rerum? Molestiae, earum illum rem quas maiores provident adipisci perspiciatis porro? Consequuntur ratione, velit doloribus unde, necessitatibus corrupti sunt iusto numquam, architecto ex provident hic rem. Aspernatur a amet expedita, ad repellat voluptatem laboriosam, blanditiis deserunt quis molestiae quae, hic perferendis in totam optio vero. Accusamus aut beatae id sed, omnis dicta rerum repudiandae nostrum minus, illum nemo non accusantium perferendis ratione enim ea quas veritatis vero odit distinctio facilis assumenda harum. Atque at ex ut ipsum fugit deserunt inventore, excepturi. Consequuntur, iure tempore nisi, similique, harum dignissimos, vitae temporibus blanditiis veritatis saepe rerum repellat. Incidunt sequi, voluptate asperiores quaerat dolores numquam esse obcaecati saepe unde aliquid beatae odio mollitia vero. Numquam voluptate provident molestiae error labore, fugit consequatur incidunt saepe maxime quis, molestias perspiciatis libero eaque ipsum impedit! Asperiores, doloremque!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis minus itaque odit atque, accusamus amet, nulla magnam beatae quidem quasi, earum. Praesentium facilis enim maxime aspernatur cumque repellendus dolore alias facere magni, unde incidunt explicabo minima culpa, modi voluptate ad.</p>
</div>
<div class="logo"><img src="../../Pictures/fd logo.png" alt="Flavour Dome"/></div>
<nav class="nav-side" nav-open>
<ul>
<li>
Home
</li>
<li>
Menu
</li>
<li>
Store
</li>
<li>
Account
</li>
<li>
Shopping Cart
</li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
How can i get my list elements fitting the width of my side menu instead of them starting far from the left margin?
Remove default padding and margin from ul tag, most of tags consist of default styling same here ul tag has default styling for both margin and padding and that's why your menu has that spacing.
Default ul styling,
ul{
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
Make this changes in your code.
.nav-side ul {
list-style: none;
padding:0; /* Add this */
margin:0;
}
You need work on little bit on CSS styling, modify the following selector as suggested.
.nav-side ul
{
list-style: none;
padding:10px;
margin: 0;
background-color: antiquewhite;
}