How can I add a slide animation in that code - javascript

I'm new to JavaScript so with the help of the community I manage to create that code but I want the slide down when I click on a project to have a smooth animation but I don't know where to put the animation code transition: all .5s ease-in-out; in the CSS or I don't know if I can do it with the JavaScript code directly.
const projectContain = document.querySelectorAll(".projet-contain");
projectContain.forEach((elm) => {
elm.addEventListener("click", function() {
let projectContent = elm.querySelector(".project-content");
let arrow = elm.querySelector(".arrow-down");
if (projectContent.style.display !== "none") {
projectContent.style.display = "none";
arrow.classList.toggle('rotate-arrow')
} else {
projectContent.style.display = "flex";
arrow.classList.toggle('rotate-arrow')
}
});
});
body {
background-color: purple;
}
.projet-contain {
display: flex;
flex-direction: column;
margin-bottom: 50px;
width: auto;
height: auto;
background: radial-gradient(circle, rgba(238, 174, 202, 0.200) 0%, rgba(148, 188, 233, 0.200) 100%);
;
border-radius: 10px 10px 10px 10px;
padding: 10px;
user-select: none;
}
.preview {
display: flex;
justify-content: space-between;
align-items: center;
}
section>div>div>a {
text-decoration: none;
color: white;
}
.convertigo {
width: 10vw;
}
.arrow-down {
transition: transform 0.5s;
width: 1.5vw;
-webkit-filter: invert(100%);
/* safari 6.0 - 9.0 */
filter: invert(100%);
}
.rotate-arrow {
transform: rotate(180deg);
}
.project-content {
justify-content: center;
}
<section>
<div class="projet-contain">
<div class="preview">
<a>Projet Convertigo</a>
<img class="arrow-down" src="images/down-arrow-svgrepo-com.svg" alt="ꜜ">
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div class="project-content" style="display:none;">
<a>c'est la div 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum quo iure culpa libero? Dolor incidunt, adipisci, dignissimos sunt odio expedita ullam sapiente officiis, architecto culpa reiciendis voluptatum ut dolorum ipsa vero nihil? Earum voluptate molestiae nemo! Iste, sit neque. Accusantium, sed aliquam omnis ut laboriosam maxime obcaecati libero natus eius perferendis ipsum ipsam. Nostrum facilis blanditiis voluptas ipsa molestiae inventore consequatur unde velit quas quod, quo obcaecati commodi praesentium? Earum cumque velit vero a facilis voluptatem quis debitis molestiae tenetur consequuntur, commodi architecto beatae id quas rerum unde rem alias itaque amet sed explicabo. Ad rem, quod possimus dignissimos deleniti molestiae natus magni ducimus sit quis dicta voluptatibus itaque quasi reprehenderit facilis fuga soluta alias! Quasi suscipit soluta dignissimos nulla iusto dolores amet temporibus, molestias debitis voluptate praesentium similique distinctio corrupti. Provident numquam cum nostrum aut commodi incidunt ipsam quibusdam laudantium mollitia aspernatur, magni ab perspiciatis inventore exercitationem consequuntur, laborum autem dolorum doloremque omnis voluptatibus illo nesciunt? Ipsam voluptas atque blanditiis alias facere laudantium error doloremque maiores magni enim deserunt iste architecto, voluptatem, porro quisquam quas, deleniti tempore. Sed tempore nulla, perspiciatis natus temporibus debitis maiores ipsam illum esse ut maxime quia in consequuntur ratione error veritatis, quod aut! Enim.</a>
<div>
<img src="images/matete.webp" alt="">
</div>
</div>
</div>
<div class="projet-contain">
<div class="preview">
<a>Projet Convertigo</a>
<img class="arrow-down" src="images/down-arrow-svgrepo-com.svg" alt="ꜜ">
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div class="project-content" style="display:none;">
<a>c'est la div 2</a>
</div>
</div>
<div class="projet-contain">
<div class="preview">
<a>Projet Convertigo</a>
<img class="arrow-down" src="images/down-arrow-svgrepo-com.svg" alt="ꜜ">
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div class="project-content" style="display:none;">
<a>c'est la div 3</a>
</div>
</div>
</section>


Is this what you're looking for?
const projectContain = document.querySelectorAll(".projet-contain");
projectContain.forEach((elm) => {
elm.addEventListener("click", function() {
let projectContent = elm.querySelector(".project-content");
let arrow = elm.querySelector(".arrow-down");
arrow.classList.toggle('rotate-arrow');
projectContent.classList.toggle("display");
});
});
body {
background-color: purple;
}
.projet-contain {
display: flex;
flex-direction: column;
margin-bottom: 50px;
width: auto;
height: auto;
background: radial-gradient(circle, rgba(238, 174, 202, 0.200) 0%, rgba(148, 188, 233, 0.200) 100%);
;
border-radius: 10px 10px 10px 10px;
padding: 10px;
user-select: none;
}
.preview {
display: flex;
justify-content: space-between;
align-items: center;
}
section>div>div>a {
text-decoration: none;
color: white;
}
.convertigo {
width: 10vw;
}
.arrow-down {
transition: transform 0.5s;
width: 1.5vw;
-webkit-filter: invert(100%);
/* safari 6.0 - 9.0 */
filter: invert(100%);
}
.rotate-arrow {
transform: rotate(180deg);
}
.project-content {
justify-content: center;
max-height: 0;
overflow: hidden;
transition: max-height 500ms ease-out;
}
.display {
max-height: 100vh;
}
<section>
<div class="projet-contain">
<div class="preview">
<a>Projet Convertigo</a>
<img class="arrow-down" src="images/down-arrow-svgrepo-com.svg" alt="ꜜ">
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div class="project-content">
<a>c'est la div 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum quo iure culpa libero? Dolor
incidunt, adipisci, dignissimos sunt odio expedita ullam sapiente officiis, architecto culpa reiciendis
voluptatum ut dolorum ipsa vero nihil? Earum voluptate molestiae nemo! Iste, sit neque. Accusantium, sed
aliquam omnis ut laboriosam maxime obcaecati libero natus eius perferendis ipsum ipsam. Nostrum facilis
blanditiis voluptas ipsa molestiae inventore consequatur unde velit quas quod, quo obcaecati commodi
praesentium? Earum cumque velit vero a facilis voluptatem quis debitis molestiae tenetur consequuntur, commodi
architecto beatae id quas rerum unde rem alias itaque amet sed explicabo. Ad rem, quod possimus dignissimos
deleniti molestiae natus magni ducimus sit quis dicta voluptatibus itaque quasi reprehenderit facilis fuga
soluta alias! Quasi suscipit soluta dignissimos nulla iusto dolores amet temporibus, molestias debitis
voluptate praesentium similique distinctio corrupti. Provident numquam cum nostrum aut commodi incidunt ipsam
quibusdam laudantium mollitia aspernatur, magni ab perspiciatis inventore exercitationem consequuntur, laborum
autem dolorum doloremque omnis voluptatibus illo nesciunt? Ipsam voluptas atque blanditiis alias facere
laudantium error doloremque maiores magni enim deserunt iste architecto, voluptatem, porro quisquam quas,
deleniti tempore. Sed tempore nulla, perspiciatis natus temporibus debitis maiores ipsam illum esse ut maxime
quia in consequuntur ratione error veritatis, quod aut! Enim.</a>
<div>
<img src="images/matete.webp" alt="">
</div>
</div>
</div>
<div class="projet-contain">
<div class="preview">
<a>Projet Convertigo</a>
<img class="arrow-down" src="images/down-arrow-svgrepo-com.svg" alt="ꜜ">
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div class="project-content">
<a>c'est la div 2</a>
</div>
</div>
<div class="projet-contain">
<div class="preview">
<a>Projet Convertigo</a>
<img class="arrow-down" src="images/down-arrow-svgrepo-com.svg" alt="ꜜ">
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div class="project-content">
<a>c'est la div 3</a>
</div>
</div>
</section>

Related

Responsive nav bar not sticking on some screens

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>

How to use CSS to maintain a 10px spacing between the yellow block and the black block below after the layout changes?

I am a self-learner of programming, and my English is not very good!
But there is a problem, I still try to describe the problem I encountered, I hope someone can help me.
At present, I have realized that when the mouse is scrolled to the specified position, the layout is converted, but I hope that when I switch to the yellow layout, the yellow block can still reserve a 10px distance from the black block below, but I have been in nav2, which is yellow Margin-bottom:10px is set in the block; I don’t know why the effect cannot be rendered!
Can someone tell me where I should set it?
Or is my CSS concept wrong?
Thank you for helping me. I want to thank you all for your attention to this issue.
$(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>

This behaviour is because nav2 is a position:fixed element. When you mention an element as fixed, they are removed from the flow of the document and gets placed relative to the document based on top,left,right,bottom values.
That said, in-order to achieve the gap, you can place margin to the next element
.content {
padding: 20px;
background-color: #222;
color: #fff;
margin-top: 10px;
}

How to use jquery or CSS to display the blue block after touching the yellow block?

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/

How to disable auto-scroll in javascript accordion

I came across this accordion I would like to use for my site:
http://jsfiddle.net/subhranild/u5d35La7/1/
<div class="accordion">
<div class="accorfion-section">
<a class="accordion-section-title" href="#accordion-1">Accordion section #1</a>
<div id="accordion-1" class="accordion-section-content">
<p>This is first accordion section</p>
</div>
<a class="accordion-section-title" href="#accordion-2">Accordion section #2</a>
<div id="accordion-2" class="accordion-section-content">
<p> this is second accordian section</p>
</div>
<a class="accordion-section-title" href="#accordion-3">Accordion section #3</a>
<div id="accordion-3" class="accordion-section-content">
<p> this is third accordian section</p>
</div>
</div>
</div>
$(document).ready(function(){
$('.accordion-section-title').click(function(e){
var currentAttrvalue = $(this).attr('href');
if($(e.target).is('.active')){
$(this).removeClass('active');
$('.accordion-section-content:visible').slideUp(300);
} else {
$('.accordion-section-title').removeClass('active').filter(this).addClass('active');
$('.accordion-section-content').slideUp(300).filter(currentAttrvalue).slideDown(300);
}
});
});
however, whenever one of the headers is opened, the scroll moves to have the opened content at the top of the page. How can I edit this code to disable the auto-scroll?
I've seen some people online saying change the href to equal #, but when I do that the accordion no longer works.
Thanks.

Just by adding e.preventDefault(); on the click function in your Javascript as below working example.
$(document).ready(function() {
$('.accordion-section-title').click(function(e) {
e.preventDefault();
var currentAttrvalue = $(this).attr('href');
if($(e.target).is('.active')) {
$(this).removeClass('active');
$('.accordion-section-content:visible').slideUp(300);
} else {
$('.accordion-section-title').removeClass('active').filter(this).addClass('active');
$('.accordion-section-content').slideUp(300).filter(currentAttrvalue).slideDown(300);
}
});
});
.wrapper {
height: 100%;
}
.accordion
{
overflow:hidden;
border-radius:4px;
background:#f7f7f7;
}
.accordion-section-title
{
width:100%;
padding:15px;
}
.accordion-section-title
{
width: 100%;
padding: 15px;
display: inline-block;
background-color: #333;
border-bottom: 1px solid #1a1a1a;
font-size: 1.2em;
color: #fff;
transition: all linear 0.5s;
text-decoration:none;
}
.accordion-section-title.active
{
background-color:#4c4c4c;
text-decoration:none;
}
.accordion-section-title:hover
{
background-color:grey;
text-decoration:none;
}
.accordion-section:last-child .accordion-section-title
{
border-bottom:none;
}
.accordion-section-content
{
padding:15px;
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium voluptates earum facilis eveniet mollitia assumenda aperiam, ex temporibus neque aspernatur similique eligendi est harum obcaecati, ipsam velit, quis doloremque expedita, hic! Soluta, omnis itaque optio, inventore, assumenda totam adipisci vel eius, distinctio amet dolorem tempore sit. Accusamus, voluptas! Quam animi, esse soluta porro nesciunt incidunt nisi autem distinctio corrupti, dolores impedit obcaecati. Sequi sit facilis, accusamus neque quod tempore, amet ratione, veritatis commodi, velit necessitatibus dolorum maxime. Facere qui esse, rerum quo nihil, accusamus sint assumenda. Eaque asperiores recusandae, dolores omnis tempore laborum sequi ipsa unde in ipsam dolore maxime.
</p>
<div class="accordion">
<div class="accorfion-section">
<a class="accordion-section-title" href="#accordion-1">Accordion section #1</a>
<div id="accordion-1" class="accordion-section-content">
<p>This is first accordion section</p>
</div>
<a class="accordion-section-title" href="#accordion-2">Accordion section #2</a>
<div id="accordion-2" class="accordion-section-content">
<p> this is second accordian section</p>
</div>
<a class="accordion-section-title" href="#accordion-3">Accordion section #3</a>
<div id="accordion-3" class="accordion-section-content">
<p> this is third accordian section</p>
</div>
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium voluptates earum facilis eveniet mollitia assumenda aperiam, ex temporibus neque aspernatur similique eligendi est harum obcaecati, ipsam velit, quis doloremque expedita, hic! Soluta, omnis itaque optio, inventore, assumenda totam adipisci vel eius, distinctio amet dolorem tempore sit. Accusamus, voluptas! Quam animi, esse soluta porro nesciunt incidunt nisi autem distinctio corrupti, dolores impedit obcaecati. Sequi sit facilis, accusamus neque quod tempore, amet ratione, veritatis commodi, velit necessitatibus dolorum maxime. Facere qui esse, rerum quo nihil, accusamus sint assumenda. Eaque asperiores recusandae, dolores omnis tempore laborum sequi ipsa unde in ipsam dolore maxime.
</p>
</div>

columns not resizing properly for mobile view

When I resize the window for mobile view (below 550px width), I want the columns to stretch width according to the window size. Instead, the blue column is slightly smaller than the viewport width and yellow, red and green columns shrink way too much.
this is the result i'm getting:
https://imgur.com/Hl60iiy
this is the result i want:
https://imgur.com/cksNN7B
body{
margin:0;
padding: 0;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
p{
font-size: 10px;
}
.inBody{
height: 100vh;
width: 100vw;
display: flex;
flex-direction: row-reverse;
}
.forAll{
height: inherit;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
}
.verticalOption{
transform: rotate(270deg);
white-space: nowrap;
display: flex;
align-items:center;
}
.verticalOption a{
text-decoration: none;
color: white;
font-size: 20px;
width: 200px;
line-height: 5px;
}
.content{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
}
.opened{
display: none;
}
.close{
display: none;
}
#media (max-width: 550px){
.inBody{
height: 100vh;
width: 100%;
flex-direction: column-reverse;
}
.verticalOption {
transform: rotate(0);
}
.forAll{
height: 100vh;
width: 100%;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="no-gutters">
<div class="fluid-container inBody">
<div class="container col-xl-9 col-sm-9 col-9 col1 forAll bg-primary">
<h2 class="verticalOption opened" id="menuHome">Sample</h2>
<div class="container content allContent" id="homeContent">
<h1>HOME</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores
consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae
mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam
voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores
pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque
consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni
maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt
temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p>
</div>
</div>
<div class="container col-xl-1 col-sm-1 col-1 col2 forAll bg-warning">
<h2 class="verticalOption" id="menuAbout">Sample</h2>
<div class="container content close allContent" id="aboutContent">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores
consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae
mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam
voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores
pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque
consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni
maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt
temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p>
</div>
</div>
<div class="container col-xl-1 col-sm-1 col-1 col3 forAll bg-danger">
<h2 class="verticalOption" id="menuContact">Contact Me</h2>
<div class="container content allContent close" id="contactContent">
<h1>Sample</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores
consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae
mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam
voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores
pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque
consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni
maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt
temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p>
</div>
</div>
<div class="container col-xl-1 col-sm1 col-1 col4 forAll bg-success">
<h2 class="verticalOption" id="menuPortfolio">Sample</h2>
<div class="container content allContent close" id="portfolioContent">
<h1>Portfolio</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores
consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae
mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam
voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores
pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque
consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni
maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt
temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p>
</div>
</div>
</div>
</div>
</body>
<script src="main.js"></script>
</html>

Remove col-1 class, according to Bootstrap 4+ col-* is used to set the width in small devices source
body{
margin:0;
padding: 0;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
p{
font-size: 10px;
}
.inBody{
height: 100vh;
width: 100vw;
display: flex;
flex-direction: row-reverse;
}
.forAll{
height: inherit;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
}
.verticalOption{
transform: rotate(270deg);
white-space: nowrap;
display: flex;
align-items:center;
}
.verticalOption a{
text-decoration: none;
color: white;
font-size: 20px;
width: 200px;
line-height: 5px;
}
.content{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
}
.opened{
display: none;
}
.close{
display: none;
}
#media (max-width: 550px){
.inBody{
height: 100vh;
width: 100%;
flex-direction: column-reverse;
}
.verticalOption {
transform: rotate(0);
}
.forAll{
height: 100vh;
width: 100%;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="no-gutters">
<div class="fluid-container inBody">
<div class="container col-xl-9 col-sm-9 col-9 col1 forAll bg-primary">
<h2 class="verticalOption opened" id="menuHome">Sample</h2>
<div class="container content allContent" id="homeContent">
<h1>HOME</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores
consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae
mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam
voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores
pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque
consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni
maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt
temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p>
</div>
</div>
<div class="container col-xl-1 col-sm-1 col2 forAll bg-warning">
<h2 class="verticalOption" id="menuAbout">Sample</h2>
<div class="container content close allContent" id="aboutContent">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores
consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae
mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam
voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores
pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque
consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni
maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt
temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p>
</div>
</div>
<div class="container col-xl-1 col-sm-1 col3 forAll bg-danger">
<h2 class="verticalOption" id="menuContact">Contact Me</h2>
<div class="container content allContent close" id="contactContent">
<h1>Sample</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores
consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae
mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam
voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores
pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque
consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni
maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt
temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p>
</div>
</div>
<div class="container col-xl-1 col-sm1 col4 forAll bg-success">
<h2 class="verticalOption" id="menuPortfolio">Sample</h2>
<div class="container content allContent close" id="portfolioContent">
<h1>Portfolio</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores
consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae
mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam
voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores
pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque
consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni
maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt
temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p>
</div>
</div>
</div>
</div>
</body>
<script src="main.js"></script>
</html>

This seems to be caused by the col-1 which is means the default size of the columns is 1/12. You can solve the size by changing col-1 to col for 12/12 (100%) width as default (smallest breakpoint) to achieve the desired width. You might have to set an height though.
Codepen: https://codepen.io/jesprj/pen/xeGgpG

Try to addcol-xs-12 bootstrap class to each container and remove col-1
<div class="container col-xl-1 col-sm-1 col-xs-12 col2 forAll bg-warning">
Herre the js-fiddle : https://jsfiddle.net/bodybow/odtL97n1/1/

Just change width:100% to max-width:100% for .forAll class in media query
#media (max-width: 550px) {
.inBody {
height: 100vh;
width: 100%;
flex-direction: column-reverse;
}
.verticalOption {
transform: rotate(0);
}
.forAll {
height: 100vh;
max-width: 100%;
}
}

Categories

Resources