We Keep Coding

In a custom dropdown, how to push down content below? - javascript

In this custom dropdown menu, when I click on the top dropdown, I want to push down the dropdown menu below it.
Here is a Codepen if it helps.
Currently, it starts like this:
and opens like this (overlaps the content below it):
But, when clicked I want it to look like this:
I know this has something to do with positioning, but I'm not sure where it should be applied.
for (const dropdown of document.querySelectorAll(".custom__select-wrapper:not(.clearFilter)")) {
dropdown.addEventListener("click", function() {
this.querySelector(".custom__select").classList.toggle("open");
});
}
for (const option of document.querySelectorAll(".custom__option")) {
option.addEventListener("click", function() {
if (!this.classList.contains("selected")) {
this.parentNode
.querySelector(".custom__option.selected")
.classList.remove("selected");
this.classList.add("selected");
this.closest(".custom__select").querySelector(
".custom__select-trigger h6"
).textContent = this.textContent;
if (this.getAttribute("data-year")) {
current_year = this.dataset["year"];
yearFilter(this.dataset["year"]);
} else {
current_story = this.dataset["type"];
storyFilter(this.dataset["type"]);
}
}
});
}
window.addEventListener("click", function(e) {
for (const select of document.querySelectorAll(".custom__select")) {
if (!select.contains(e.target)) {
select.classList.remove("open");
}
}
});
#selectedFilter {
color: #005fec;
}
.filter {
padding-right: 15px;
padding-left: 15px;
margin-top: 3rem;
display: flex;
flex-direction: column;
}
#media (min-width: 768px) {
.filter__settings {
display: flex;
flex-direction: row;
border-top: 1px solid #E0E5EC;
border-bottom: 1px solid #E0E5EC;
}
}
.custom__select {
position: relative;
display: flex;
flex-direction: column;
}
.custom__select-wrapper {
position: relative;
user-select: none;
padding: 0;
border-bottom: 1px solid #E0E5EC;
}
.custom__select-wrapper:last-child {
border: 0;
}
.custom__select-wrapper.clearFilter {
display: flex;
flex-direction: column;
justify-content: center;
height: 40px;
}
#media (min-width: 768px) {
.custom__select-wrapper {
padding: 0 2em;
border: 0;
display: flex;
justify-content: center;
align-items: center;
}
.custom__select-wrapper:last-child {
margin-left: auto;
}
.custom__select-wrapper:first-child,
.custom__select-wrapper:last-child {
padding: 0;
}
}
.custom__select-wrapper h6 {
padding: 20px 3px;
color: #62668C;
font-weight: 300;
}
.custom__select-trigger {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
cursor: pointer;
}
#media (min-width: 768px) {
.custom__select-trigger {
justify-content: space-evenly;
margin-right: auto;
}
}
.custom__select-wrapper h6,
.custom__select-trigger h6 {
font-size: .75rem;
line-height: .75rem;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 0;
}
.custom__select-trigger h6 {
color: #005fec;
font-weight: 900;
}
.custom__select-wrapper #selectedFilter {
font-size: 12px;
line-height: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: #005fec;
font-weight: 800;
padding: 0;
}
.custom__options {
position: absolute;
background-color: #005fec;
top: 100%;
left: 0;
right: 0;
border-top: 0;
transition: all 0.5s;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 2;
}
.custom__options:before,
.custom__options:after {
content: "";
position: absolute;
bottom: 100%;
left: 11px;
border: 11px solid transparent;
border-bottom-color: #005fec;
}
.custom__options.active {
display: block;
visibility: visible;
opacity: 1;
z-index: 10;
}
.custom__select-trigger,
.custom__option {
letter-spacing: 1px;
font-weight: 800;
color: #005fec;
border: 0;
background: transparent;
}
/* #media (min-width: 768px) {
.custom__select.open .custom__options {
opacity: 1;
visibility: visible;
pointer-events: all;
color: #fff;
min-width: 15rem;
}
} */
.custom__select.open .custom__options {
opacity: 1;
visibility: visible;
pointer-events: all;
color: #fff;
min-width: 15rem;
}
.custom__option {
position: relative;
display: block;
padding: 0 22px 0 20px;
font-weight: 300;
color: #fff;
cursor: pointer;
transition: all 0.5s;
font-size: 1.25rem;
line-height: 1.25rem;
margin: 1.5em 0;
}
.custom__option:hover {
cursor: pointer;
}
.custom__option.selected {
color: #ffffff;
}
.custom__option.selected::before {
content: "•";
margin-left: -12px;
padding-right: 8px;
}
/* arrow */
.arrow {
position: relative;
height: 8px;
width: 5px;
margin-left: 2em;
}
.arrow::before,
.arrow::after {
content: "";
position: absolute;
bottom: 0px;
width: 0.1rem;
height: 100%;
transition: all 0.5s;
}
.arrow::before {
left: 0;
transform: rotate(45deg);
background-color: #005fec;
}
.arrow::after {
left: -4.5px;
transform: rotate(-45deg);
background-color: #005fec;
}
.open .arrow::before {
left: 0;
transform: rotate(-45deg);
}
.open .arrow::after {
left: -4.5px;
transform: rotate(45deg);
}
<section class="filter">
<div class="filter__settings">
<div class="custom__select-wrapper">
<div class="custom__select story-sel selector">
<div class="custom__select-trigger">
<h6>Story Type</h6>
<div class="arrow"></div>
</div>
<div class="custom__options dropdown story-selector" id="storyFilter">
<span class="custom__option selected" data-type="all">All</span>
<span class="custom__option" data-type="news">News and Media</span>
<span class="custom__option" data-type="analysis">Analysis</span>
</div>
</div>
</div>
<div class="custom__select-wrapper">
<div class="custom__select year-sel selector">
<div class="custom__select-trigger">
<h6>Year</h6>
<div class="arrow"></div>
</div>
<div class="custom__options dropdown year-selector" id="yearFilter">
<span class="custom__option selected" data-year="all">All</span>
<span class="custom__option" data-year="2021">2021</span>
<span class="custom__option" data-year="2020">2020</span>
</div>
</div>
</div>
</div>
</section>

You are using popover. But you should use an Accordion. You should check this
So what is the problem in your code? When your options comes to display it is floating over the screen. But it should contain the space
in the .custom__options class remove the position: absolute and add followig
display: none
It will hide the options.
Now in the .custom__select.open .custom__options do this
display: block;
In the arrow add this
top: 18px;

I added a sample code here, I think you can get some Idea
Sourse :
https://www.w3schools.com/howto/howto_js_accordion.asp
https://www.fileformat.info/info/unicode/char/search.htm
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "grid") {
panel.style.display = "none";
} else {
panel.style.display = "grid";
}
});
}
.accordion{
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.accordion:after {
content: '\2c4';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2c5";
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
display: none;
background-color: cornflowerblue;
overflow: hidden;
}
.custom__option:hover {
cursor: pointer;
background: rgb(170, 204, 255);
}
.custom__option{
margin-left: 35px;
}
<div class="arrow"></div>
<button class="accordion">Story Type</button>
<div class="panel">
<span class="custom__option selected" data-type="all">All</span>
<span class="custom__option" data-type="news">News and Media</span>
<span class="custom__option" data-type="analysis">Analysis</span>
</div>
<button class="accordion">Year</button>
<div class="panel">
<span class="custom__option selected" data-year="all">All</span>
<span class="custom__option" data-year="2021">2021</span>
<span class="custom__option" data-year="2020">2020</span>
</div>

Related

I would like to make the make the menu fill the remaining vertical space without scrolling. I've experimented with position: absolute and heights but nothing seems to work. Anyone have any suggestions? Maybe I need to structure my HTML differently? Any help appreciated (: Sorry for the poor formatting of the question, still quiet new to stackoverflow.
Here is a video showing the functionality of the navigation menu:
https://gyazo.com/809fcd5c6c665f37a9f467164404a297
Here is a image:
Below is my HTML,CSS and JS CODE:
<body>
<header class="header">
<div class="header-section-1 flex flex-jc-sb flex-ai-c">
<a href="#" class="company flex flex-ai-c">
<div class="company-logo"></div>
<div class="logo-text flex flex-d-col flex-ai-c">
<p class="logo-text-main">punitham</p>
<p class="logo-sub-text">disabiltiy service</p>
</div>
</a>
<div class="menu-toggle flex flex-d-col flex-jc-sb">
<span class="one bar"></span>
<span class="two bar"></span>
<span class="three bar"></span>
<span class="four bar"></span>
</div>
</div>
<div class="header-section-2">
<a href="#" class="call-btn flex flex-jc-c flex-ai-c">
<i class="fa-solid fa-phone"></i>
<p class="ph-number">03 4561 2795</p>
</a>
</div>
<nav class="navigation hidden">
<ul class="nav-list">
<li class="nav-item">Home</li>
<li class="nav-item">Services</li>
<li class="nav-item">Careers</li>
<li class="nav-item">About Us</li>
<li class="nav-item">Contact Us</li>
</ul>
</nav>
</header>
<script src="./script.js"></script>
</body>
.flex {
display: flex;
}
.flex-jc-c {
justify-content: center;
}
.flex-jc-sb {
justify-content: space-between;
}
.flex-ai-c {
align-items: center;
}
.flex-d-col {
flex-direction: column;
}
.hidden {
display: none;
}
.header {
background-color: black;
color: white;
}
.header-section-1 {
width: 90%;
margin: 0 auto;
padding: 1.5em 0;
}
.company {
color: white;
text-decoration: none;
}
.company-logo {
height: 30px;
width: 30px;
border-radius: 50%;
background-color: white;
outline: 1px solid black;
outline-offset: -5px;
}
.logo-text {
margin-left: 10px;
}
.logo-text-main {
text-transform: capitalize;
font-weight: 700;
font-size: 1.7rem;
}
.logo-sub-text {
text-transform: uppercase;
font-size: 0.6rem;
font-weight: 400;
letter-spacing: 1px;
margin-top: -10px;
}
.menu-toggle {
height: 20px;
width: 30px;
cursor: pointer;
}
.bar {
display: block;
background-color: white;
height: 3px;
width: 100%;
}
.menu-toggle,
.one,
.two,
.three {
transition-duration: 0.3s;
}
.menu-toggle.on {
transform: rotate(45deg);
}
.menu-toggle.on .one {
opacity: 0;
/* transform: translateY(9px) rotate(90deg); */
}
.menu-toggle.on .two {
opacity: 0;
/* transform: translateY(3px); */
}
.menu-toggle.on .three {
transform: translateY(-3px);
}
.menu-toggle.on .four {
transform: translateY(-9px) rotate(90deg);
}
.header-section-2 {
background-color: lightcoral;
padding: 0.7em 0;
}
.call-btn {
text-decoration: none;
color: white;
}
.ph-number {
font-weight: 600;
margin-left: 10px;
}
.nav-list {
list-style: none;
background-color: lightblue;
text-align: center;
}
.nav-link {
font-weight: 100;
text-decoration: none;
display: block;
color: white;
font-size: 2rem;
transition-delay: 0.4s;
transition: 0.4s;
}
.nav-link:hover,
.nav-link:focus {
color: lightcoral;
}
document.querySelector(".menu-toggle").addEventListener("click", function () {
this.classList.toggle("on");
const callBtn = document.querySelector(".header-section-2");
callBtn.classList.toggle("hidden");
const nav = document.querySelector(".navigation");
nav.classList.toggle("hidden");
});

Just add height: 100vh in .nav-list
.nav-list {
list-style: none;
background-color: lightblue;
text-align: center;
height: 100vh;
}
document.querySelector(".menu-toggle").addEventListener("click", function () {
this.classList.toggle("on");
const callBtn = document.querySelector(".header-section-2");
callBtn.classList.toggle("hidden");
const nav = document.querySelector(".navigation");
nav.classList.toggle("hidden");
});
.flex {
display: flex;
}
.flex-jc-c {
justify-content: center;
}
.flex-jc-sb {
justify-content: space-between;
}
.flex-ai-c {
align-items: center;
}
.flex-d-col {
flex-direction: column;
}
.hidden {
display: none;
}
.header {
background-color: black;
color: white;
}
.header-section-1 {
width: 90%;
margin: 0 auto;
padding: 1.5em 0;
}
.company {
color: white;
text-decoration: none;
}
.company-logo {
height: 30px;
width: 30px;
border-radius: 50%;
background-color: white;
outline: 1px solid black;
outline-offset: -5px;
}
.logo-text {
margin-left: 10px;
}
.logo-text-main {
text-transform: capitalize;
font-weight: 700;
font-size: 1.7rem;
}
.logo-sub-text {
text-transform: uppercase;
font-size: 0.6rem;
font-weight: 400;
letter-spacing: 1px;
margin-top: -10px;
}
.menu-toggle {
height: 20px;
width: 30px;
cursor: pointer;
}
.bar {
display: block;
background-color: white;
height: 3px;
width: 100%;
}
.menu-toggle,
.one,
.two,
.three {
transition-duration: 0.3s;
}
.menu-toggle.on {
transform: rotate(45deg);
}
.menu-toggle.on .one {
opacity: 0;
/* transform: translateY(9px) rotate(90deg); */
}
.menu-toggle.on .two {
opacity: 0;
/* transform: translateY(3px); */
}
.menu-toggle.on .three {
transform: translateY(-3px);
}
.menu-toggle.on .four {
transform: translateY(-9px) rotate(90deg);
}
.header-section-2 {
background-color: lightcoral;
padding: 0.7em 0;
}
.call-btn {
text-decoration: none;
color: white;
}
.ph-number {
font-weight: 600;
margin-left: 10px;
}
.nav-list {
list-style: none;
background-color: lightblue;
text-align: center;
height: 100vh;
}
.nav-link {
font-weight: 100;
text-decoration: none;
display: block;
color: white;
font-size: 2rem;
transition-delay: 0.4s;
transition: 0.4s;
}
.nav-link:hover,
.nav-link:focus {
color: lightcoral;
}
<body>
<header class="header">
<div class="header-section-1 flex flex-jc-sb flex-ai-c">
<a href="#" class="company flex flex-ai-c">
<div class="company-logo"></div>
<div class="logo-text flex flex-d-col flex-ai-c">
<p class="logo-text-main">punitham</p>
<p class="logo-sub-text">disabiltiy service</p>
</div>
</a>
<div class="menu-toggle flex flex-d-col flex-jc-sb">
<span class="one bar"></span>
<span class="two bar"></span>
<span class="three bar"></span>
<span class="four bar"></span>
</div>
</div>
<div class="header-section-2">
<a href="#" class="call-btn flex flex-jc-c flex-ai-c">
<i class="fa-solid fa-phone"></i>
<p class="ph-number">03 4561 2795</p>
</a>
</div>
<nav class="navigation hidden">
<ul class="nav-list">
<li class="nav-item">Home</li>
<li class="nav-item">Services</li>
<li class="nav-item">Careers</li>
<li class="nav-item">About Us</li>
<li class="nav-item">Contact Us</li>
</ul>
</nav>
</header>
<script src="./script.js"></script>
</body>

I have a custom dropdown menu. I've been able to handle most of the accessibility except for one area. When the menu is open and I hit the escape key, I'm unable bring that menu back if I navigate back to it using the keyboard.
Additionally, the pseudo before class doesn't get removed when I hit the escape key. I'm not sure how to target that pseudo class.
How do I bring that menu back if it's navigated back to?
How do I target the before pseudo class?
for (const dropdown of document.querySelectorAll(
".custom__select-wrapper:not(.clearFilter)"
)) {
dropdown.addEventListener("click", function () {
this.querySelector(".custom__select").classList.toggle("open");
});
}
for (const option of document.querySelectorAll(".custom__option")) {
option.addEventListener("click", function () {
if (!this.classList.contains("selected")) {
this.parentNode
.querySelector(".custom__option.selected")
.classList.remove("selected");
this.classList.add("selected");
this.closest(".custom__select").querySelector(
".custom__select-trigger h6"
).textContent = this.textContent;
if (this.getAttribute("data-type")) {
current_story = this.dataset["type"];
}
}
});
}
window.addEventListener("click", function (e) {
for (const select of document.querySelectorAll(".custom__select")) {
if (!select.contains(e.target)) {
select.classList.remove("open");
}
}
});
let dropdownMenu = document.querySelectorAll('.custom__options');
let i;
window.onkeyup = function (event) {
if (event.keyCode == 27) {
for (let i = 0; i < dropdownMenu.length; i++) {
dropdownMenu[i].style.visibility = 'hidden';
}
}
}
#charset "UTF-8";
nav ul {
list-style-type: none;
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-evenly;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
}
button.clear {
border: 0;
background: #fff;
}
#selectedFilter {
color: #005fec;
}
ul {
padding-left: 0;
margin: 0;
}
.filter {
padding-right: 15px;
padding-left: 15px;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
}
#media (min-width: 768px) {
.filter__settings {
display: flex;
flex-direction: row;
border-top: 1px solid #E0E5EC;
border-bottom: 1px solid #E0E5EC;
}
}
.custom__select {
position: relative;
display: flex;
flex-direction: column;
}
#media (min-width: 768px) {
.custom::before, .custom__options {
transition: all 0.2s ease-in;
}
}
.custom__select-wrapper {
position: relative;
user-select: none;
padding: 0;
border-bottom: 1px solid #E0E5EC;
}
.custom__select-wrapper:last-child {
border: 0;
}
.custom__select-wrapper.clearFilter {
display: flex;
flex-direction: column;
justify-content: center;
}
.custom__select-wrapper .selected-clearFilter {
position: relative;
user-select: none;
padding: 1rem 0 !important;
}
#media (min-width: 768px) {
.custom__select-wrapper {
padding: 0 2em;
border: 0;
display: flex;
justify-content: center;
align-items: center;
}
.custom__select-wrapper:first-child, .custom__select-wrapper:last-child {
padding: 0;
}
}
.custom__select-wrapper h6 {
padding: 20px 3px;
color: #62668C;
font-weight: 300;
}
.custom__select-trigger {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
#media (min-width: 768px) {
.custom__select-trigger {
justify-content: space-evenly;
margin-right: auto;
}
}
.custom__select-wrapper h6, .custom__select-trigger h6 {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
padding: 20px 0;
}
.custom__select-trigger h6 {
color: #005fec;
font-weight: 900;
}
.custom__select-wrapper #selectedFilter {
font-size: 12px;
line-height: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: #005fec;
font-weight: 800;
padding: 0;
}
.custom__select button, .custom__option button {
background: transparent;
border-radius: 4px;
border: 0;
}
.custom__select button *, .custom__option button * {
position: relative;
}
.custom__select button:focus, .custom__option button:focus {
outline: none;
}
.custom__select button:before, .custom__option button:before {
content: "";
position: absolute;
border: solid 0px #005fec;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
opacity: 0;
transition: all 150ms;
transition-timing-function: ease-in-out;
border-radius: 4px;
filter: blur(4px);
}
.custom__select button:focus-visible:before, .custom__option button:focus-visible:before {
content: "";
position: absolute;
border: solid 2px #005fec;
top: -8px;
bottom: -8px;
left: -8px;
right: -8px;
opacity: 1;
filter: blur(0px);
}
#media (min-width: 768px) {
.custom__select button, .custom__option button {
color: white;
}
}
.custom__option button::before {
border: solid 0px white;
}
.custom__option button:focus-visible::before {
border: solid 2px white;
}
.custom__options {
display: none;
top: 100%;
left: 0;
right: 0;
border-top: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 2;
color: #E0E5EC;
}
#media (min-width: 768px) {
.custom__options {
display: unset;
position: absolute;
background-color: #005fec;
max-height: 320px;
overflow-y: scroll;
}
.custom__options#storyFilter {
overflow: hidden;
}
}
.custom__options.active {
display: block;
visibility: visible;
opacity: 1;
z-index: 10;
}
.custom__select-trigger, .custom__option {
letter-spacing: 1px;
font-weight: 800;
color: #005fec;
border: 0;
background: transparent;
}
#media (min-width: 768px) {
.custom__select.open::before {
content: "";
position: absolute;
bottom: 0;
left: 11px;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 11px solid #005fec;
}
}
.custom__select .custom__options {
min-width: 15rem;
}
.custom__select.open .custom__options {
display: block;
opacity: 1;
visibility: visible;
pointer-events: all;
color: #fff;
min-width: 15rem;
}
#media (min-width: 768px) {
.custom__select.open .custom__options {
display: unset;
box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
}
}
.custom__option {
position: relative;
display: block;
padding: 0 22px 0 12px;
font-weight: 400;
color: #62668C;
cursor: pointer;
font-size: 1rem;
line-height: 1rem;
margin: 1.5rem 0;
}
#media (min-width: 768px) {
.custom__option {
font-size: 1.25rem;
line-height: 1.25rem;
color: white;
font-weight: 300;
padding: 0 22px 0 20px;
}
}
.custom__option:hover {
cursor: pointer;
}
.custom__option.selected {
color: #005fec;
}
#media (min-width: 768px) {
.custom__option.selected {
color: #ffffff;
}
}
.custom__option.selected::before {
content: "•";
margin-left: -12px;
padding-right: 8px;
}
.empty-state {
width: 100%;
display: flex;
background: #005fec;
padding: 1rem;
border-radius: 4px;
align-items: center;
margin: 2rem 0.5rem;
}
.empty-state h4 {
color: white;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 300;
margin-left: 0.5rem;
}
.empty-state h4 span {
color: white;
text-decoration: underline;
cursor: pointer;
}
.arrow {
position: relative;
height: 5px;
width: 3px;
margin-left: 0.5rem;
margin-bottom: 0.1rem;
}
.arrow::before, .arrow::after {
content: "";
position: absolute;
bottom: 0px;
width: 0.1rem;
height: 100%;
transition: all 0.45s;
}
.arrow::before {
left: 0px;
transform: rotate(45deg);
background-color: #005fec;
}
#media (min-width: 768px) {
.arrow::before {
left: 7px;
}
}
.arrow::after {
left: -2.5px;
transform: rotate(-45deg);
background-color: #005fec;
}
#media (min-width: 768px) {
.arrow::after {
left: 4.5px;
}
}
.open .arrow::before {
left: 0px;
transform: rotate(-45deg);
}
#media (min-width: 768px) {
.open .arrow::before {
left: 7px;
}
}
.open .arrow::after {
left: -2.5px;
transform: rotate(45deg);
}
#media (min-width: 768px) {
.open .arrow::after {
left: 4.5px;
}
}
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Sales</li>
<li>Contact</li>
</ul>
</nav>
<section class="content">
<h2 class="title">Hello World</h2>
<h6 class="subtitle">Lorem ipsum dolor sit amet.</h6>
</section>
<section class="filter">
<div class="filter__settings">
<div class="custom__select-wrapper">
<h6>filter by</h6>
</div>
<div class="custom__select-wrapper">
<div class="custom__select story-sel selector" role="menubar">
<button class="custom__select-trigger" aria-haspopup="true" aria-expanded="false" id="storySelector">
<h6>Story Type</h6>
<div class="arrow"></div>
</button>
<ul class="custom__options dropdown story-selector" id="storyFilter" aria-label="submenu" role="menu" aria-labelledby="custom-dropdown">
<li role="menuitem" class="custom__option selected" data-type="all" id="storyItem_all"><button>All</button>
</li>
<li role="menuitem" class="custom__option" data-type="news" id="storyItem_nm"><button>News and
media</button></li>
<li role="menuitem" class="custom__option" data-type="analysis" id="storyItem_analysis"><button>Analysis</button></li>
<li role="menuitem" class="custom__option" data-type="press" id="storyItem_pr"><button>Press
releases</button></li>
</ul>
</div>
</div>
<div class="custom__select-wrapper">
<div class="custom__select year-sel selector">
<button type="button" class="custom__select-trigger" id="yearSelector">
<h6>Year</h6>
<div class=" arrow"></div>
</button>
<ul class="custom__options dropdown year-selector" id="yearSelection" aria-label="submenu" role="menu" aria-labelledby="custom-dropdown">
<li role="menuitem" class="custom__option selected" data-year="all"><a>All</a></li>
<li role="menuitem" class="custom__option" data-year="2021"><button>2021</button></li>
<li role="menuitem" class="custom__option" data-year="2020"><button>2020</button></li>
<li role="menuitem" class="custom__option" data-year="2019"><button>2019</button></li>
</ul>
</div>
</div>
</div>
</section>
</div>

You should be looping through all selects and removing the open class instead of setting the visibility of all options to hidden.
for (const dropdown of document.querySelectorAll(
".custom__select-wrapper:not(.clearFilter)"
)) {
dropdown.addEventListener("click", function () {
this.querySelector(".custom__select").classList.toggle("open");
});
}
for (const option of document.querySelectorAll(".custom__option")) {
option.addEventListener("click", function () {
if (!this.classList.contains("selected")) {
this.parentNode
.querySelector(".custom__option.selected")
.classList.remove("selected");
this.classList.add("selected");
this.closest(".custom__select").querySelector(
".custom__select-trigger h6"
).textContent = this.textContent;
if (this.getAttribute("data-type")) {
current_story = this.dataset["type"];
}
}
});
}
window.addEventListener("click", function (e) {
for (const select of document.querySelectorAll(".custom__select")) {
if (!select.contains(e.target)) {
select.classList.remove("open");
}
}
});
let dropdownMenu = document.querySelectorAll('.custom__select');
let i;
window.onkeyup = function (event) {
if (event.keyCode == 27) {
for (let i = 0; i < dropdownMenu.length; i++) {
dropdownMenu[i].classList.remove("open");
}
}
}
#charset "UTF-8";
nav ul {
list-style-type: none;
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-evenly;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
}
button.clear {
border: 0;
background: #fff;
}
#selectedFilter {
color: #005fec;
}
ul {
padding-left: 0;
margin: 0;
}
.filter {
padding-right: 15px;
padding-left: 15px;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
}
#media (min-width: 768px) {
.filter__settings {
display: flex;
flex-direction: row;
border-top: 1px solid #E0E5EC;
border-bottom: 1px solid #E0E5EC;
}
}
.custom__select {
position: relative;
display: flex;
flex-direction: column;
}
#media (min-width: 768px) {
.custom::before, .custom__options {
transition: all 0.2s ease-in;
}
}
.custom__select-wrapper {
position: relative;
user-select: none;
padding: 0;
border-bottom: 1px solid #E0E5EC;
}
.custom__select-wrapper:last-child {
border: 0;
}
.custom__select-wrapper.clearFilter {
display: flex;
flex-direction: column;
justify-content: center;
}
.custom__select-wrapper .selected-clearFilter {
position: relative;
user-select: none;
padding: 1rem 0 !important;
}
#media (min-width: 768px) {
.custom__select-wrapper {
padding: 0 2em;
border: 0;
display: flex;
justify-content: center;
align-items: center;
}
.custom__select-wrapper:first-child, .custom__select-wrapper:last-child {
padding: 0;
}
}
.custom__select-wrapper h6 {
padding: 20px 3px;
color: #62668C;
font-weight: 300;
}
.custom__select-trigger {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
#media (min-width: 768px) {
.custom__select-trigger {
justify-content: space-evenly;
margin-right: auto;
}
}
.custom__select-wrapper h6, .custom__select-trigger h6 {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
padding: 20px 0;
}
.custom__select-trigger h6 {
color: #005fec;
font-weight: 900;
}
.custom__select-wrapper #selectedFilter {
font-size: 12px;
line-height: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: #005fec;
font-weight: 800;
padding: 0;
}
.custom__select button, .custom__option button {
background: transparent;
border-radius: 4px;
border: 0;
}
.custom__select button *, .custom__option button * {
position: relative;
}
.custom__select button:focus, .custom__option button:focus {
outline: none;
}
.custom__select button:before, .custom__option button:before {
content: "";
position: absolute;
border: solid 0px #005fec;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
opacity: 0;
transition: all 150ms;
transition-timing-function: ease-in-out;
border-radius: 4px;
filter: blur(4px);
}
.custom__select button:focus-visible:before, .custom__option button:focus-visible:before {
content: "";
position: absolute;
border: solid 2px #005fec;
top: -8px;
bottom: -8px;
left: -8px;
right: -8px;
opacity: 1;
filter: blur(0px);
}
#media (min-width: 768px) {
.custom__select button, .custom__option button {
color: white;
}
}
.custom__option button::before {
border: solid 0px white;
}
.custom__option button:focus-visible::before {
border: solid 2px white;
}
.custom__options {
display: none;
top: 100%;
left: 0;
right: 0;
border-top: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 2;
color: #E0E5EC;
}
#media (min-width: 768px) {
.custom__options {
display: unset;
position: absolute;
background-color: #005fec;
max-height: 320px;
overflow-y: scroll;
}
.custom__options#storyFilter {
overflow: hidden;
}
}
.custom__options.active {
display: block;
visibility: visible;
opacity: 1;
z-index: 10;
}
.custom__select-trigger, .custom__option {
letter-spacing: 1px;
font-weight: 800;
color: #005fec;
border: 0;
background: transparent;
}
#media (min-width: 768px) {
.custom__select.open::before {
content: "";
position: absolute;
bottom: 0;
left: 11px;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 11px solid #005fec;
}
}
.custom__select .custom__options {
min-width: 15rem;
}
.custom__select.open .custom__options {
display: block;
opacity: 1;
visibility: visible;
pointer-events: all;
color: #fff;
min-width: 15rem;
}
#media (min-width: 768px) {
.custom__select.open .custom__options {
display: unset;
box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
}
}
.custom__option {
position: relative;
display: block;
padding: 0 22px 0 12px;
font-weight: 400;
color: #62668C;
cursor: pointer;
font-size: 1rem;
line-height: 1rem;
margin: 1.5rem 0;
}
#media (min-width: 768px) {
.custom__option {
font-size: 1.25rem;
line-height: 1.25rem;
color: white;
font-weight: 300;
padding: 0 22px 0 20px;
}
}
.custom__option:hover {
cursor: pointer;
}
.custom__option.selected {
color: #005fec;
}
#media (min-width: 768px) {
.custom__option.selected {
color: #ffffff;
}
}
.custom__option.selected::before {
content: "•";
margin-left: -12px;
padding-right: 8px;
}
.empty-state {
width: 100%;
display: flex;
background: #005fec;
padding: 1rem;
border-radius: 4px;
align-items: center;
margin: 2rem 0.5rem;
}
.empty-state h4 {
color: white;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 300;
margin-left: 0.5rem;
}
.empty-state h4 span {
color: white;
text-decoration: underline;
cursor: pointer;
}
.arrow {
position: relative;
height: 5px;
width: 3px;
margin-left: 0.5rem;
margin-bottom: 0.1rem;
}
.arrow::before, .arrow::after {
content: "";
position: absolute;
bottom: 0px;
width: 0.1rem;
height: 100%;
transition: all 0.45s;
}
.arrow::before {
left: 0px;
transform: rotate(45deg);
background-color: #005fec;
}
#media (min-width: 768px) {
.arrow::before {
left: 7px;
}
}
.arrow::after {
left: -2.5px;
transform: rotate(-45deg);
background-color: #005fec;
}
#media (min-width: 768px) {
.arrow::after {
left: 4.5px;
}
}
.open .arrow::before {
left: 0px;
transform: rotate(-45deg);
}
#media (min-width: 768px) {
.open .arrow::before {
left: 7px;
}
}
.open .arrow::after {
left: -2.5px;
transform: rotate(45deg);
}
#media (min-width: 768px) {
.open .arrow::after {
left: 4.5px;
}
}
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Sales</li>
<li>Contact</li>
</ul>
</nav>
<section class="content">
<h2 class="title">Hello World</h2>
<h6 class="subtitle">Lorem ipsum dolor sit amet.</h6>
</section>
<section class="filter">
<div class="filter__settings">
<div class="custom__select-wrapper">
<h6>filter by</h6>
</div>
<div class="custom__select-wrapper">
<div class="custom__select story-sel selector" role="menubar">
<button class="custom__select-trigger" aria-haspopup="true" aria-expanded="false" id="storySelector">
<h6>Story Type</h6>
<div class="arrow"></div>
</button>
<ul class="custom__options dropdown story-selector" id="storyFilter" aria-label="submenu" role="menu" aria-labelledby="custom-dropdown">
<li role="menuitem" class="custom__option selected" data-type="all" id="storyItem_all"><button>All</button>
</li>
<li role="menuitem" class="custom__option" data-type="news" id="storyItem_nm"><button>News and
media</button></li>
<li role="menuitem" class="custom__option" data-type="analysis" id="storyItem_analysis"><button>Analysis</button></li>
<li role="menuitem" class="custom__option" data-type="press" id="storyItem_pr"><button>Press
releases</button></li>
</ul>
</div>
</div>
<div class="custom__select-wrapper">
<div class="custom__select year-sel selector">
<button type="button" class="custom__select-trigger" id="yearSelector">
<h6>Year</h6>
<div class=" arrow"></div>
</button>
<ul class="custom__options dropdown year-selector" id="yearSelection" aria-label="submenu" role="menu" aria-labelledby="custom-dropdown">
<li role="menuitem" class="custom__option selected" data-year="all"><a>All</a></li>
<li role="menuitem" class="custom__option" data-year="2021"><button>2021</button></li>
<li role="menuitem" class="custom__option" data-year="2020"><button>2020</button></li>
<li role="menuitem" class="custom__option" data-year="2019"><button>2019</button></li>
</ul>
</div>
</div>
</div>
</section>
</div>

In the custom dropdown you see below, I have attached a transition property so when the dropdown is clicked, the menu items will fade in at 200ms. I've attached it to the parent class of the dropdown items, but it's not working. I'm not sure where I've gone wrong.
for (const dropdown of document.querySelectorAll(".custom__select-wrapper:not(.clearFilter)")) {
dropdown.addEventListener("click", function () {
this.querySelector(".custom__select").classList.toggle("open");
});
}
for (const option of document.querySelectorAll(".custom__option")) {
option.addEventListener("click", function () {
if (!this.classList.contains("selected")) {
this.parentNode
.querySelector(".custom__option.selected")
.classList.remove("selected");
this.classList.add("selected");
this.closest(".custom__select").querySelector(
".custom__select-trigger h6"
).textContent = this.textContent;
if (this.getAttribute("data-year")) {
current_year = this.dataset["year"];
yearFilter(this.dataset["year"]);
} else {
current_story = this.dataset["type"];
storyFilter(this.dataset["type"]);
}
}
});
}
window.addEventListener("click", function (e) {
for (const select of document.querySelectorAll(".custom__select")) {
if (!select.contains(e.target)) {
select.classList.remove("open");
}
}
});
button.clear {
border: 0;
background: #fff;
}
#selectedFilter {
color: #005fec;
}
ul {
padding-left: 0;
margin: 0;
}
.filter {
padding-right: 15px;
padding-left: 15px;
margin-bottom: 2rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
}
#media (min-width: 768px) {
.filter__settings {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
border-top: 1px solid #e0e5ec;
border-bottom: 1px solid #e0e5ec;
}
}
.custom__select {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
}
.custom__select-wrapper {
position: relative;
user-select: none;
padding: 0;
border-bottom: 1px solid #e0e5ec;
}
.custom__select-wrapper:last-child {
border: 0;
}
.custom__select-wrapper.clearFilter {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
justify-content: center;
}
.custom__select-wrapper .selected-clearFilter {
position: relative;
user-select: none;
padding: 1rem 0 !important;
}
#media (min-width: 768px) {
.custom__select-wrapper {
padding: 0 2em;
border: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
}
.custom__select-wrapper:first-child,
.custom__select-wrapper:last-child {
padding: 0;
}
}
.custom__select-wrapper h6 {
padding: 20px 3px;
color: #62668c;
font-weight: 300;
}
.custom__select-trigger {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
#media (min-width: 768px) {
.custom__select-trigger {
justify-content: space-evenly;
margin-right: auto;
}
}
.custom__select-wrapper h6,
.custom__select-trigger h6 {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
padding: 20px 0;
}
.custom__select-trigger h6 {
color: #005fec;
font-weight: 900;
}
.custom__select-wrapper #selectedFilter {
font-size: 12px;
line-height: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: #005fec;
font-weight: 800;
padding: 0;
}
.custom__options {
display: none;
top: 100%;
left: 0;
right: 0;
border-top: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 2;
color: #e0e5ec;
}
#media (min-width: 768px) {
.custom__options {
position: absolute;
background-color: #005fec;
max-height: 320px;
overflow-y: scroll;
transition: all 200ms ease-in;
}
.custom__options#storyFilter {
overflow: hidden;
}
}
#media (min-width: 768px) {
.custom__options:before,
.custom__options:after {
content: "";
position: absolute;
bottom: 100%;
left: 11px;
top: -18px;
border: 11px solid transparent;
border-bottom-color: #005fec;
}
}
.custom__options.active {
display: block;
visibility: visible;
opacity: 1;
z-index: 10;
}
.custom__select-trigger,
.custom__option {
letter-spacing: 1px;
font-weight: 800;
color: #005fec;
border: 0;
background: transparent;
}
.custom__select.open .custom__options {
display: block;
opacity: 1;
visibility: visible;
pointer-events: all;
color: #fff;
min-width: 15rem;
}
#media (min-width: 768px) {
.custom__select.open .custom__options {
box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
}
}
.custom__option {
position: relative;
display: block;
padding: 0 22px 0 12px;
font-weight: 400;
color: #62668c;
cursor: pointer;
font-size: 1rem;
line-height: 1rem;
margin: 1.5rem 0;
}
#media (min-width: 768px) {
.custom__option {
font-size: 1.25rem;
line-height: 1.25rem;
color: white;
font-weight: 300;
padding: 0 22px 0 20px;
}
}
.custom__option:hover {
cursor: pointer;
}
.custom__option.selected {
color: #005fec;
}
#media (min-width: 768px) {
.custom__option.selected {
color: #ffffff;
}
}
.custom__option.selected::before {
content: "•";
margin-left: -12px;
padding-right: 8px;
}
.empty-state {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: #005fec;
padding: 1rem;
border-radius: 4px;
align-items: center;
margin: 2rem 0.5rem;
}
.empty-state h4 {
color: white;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 300;
margin-left: 0.5rem;
}
.empty-state h4 span {
color: white;
text-decoration: underline;
cursor: pointer;
}
.arrow {
position: relative;
height: 5px;
width: 3px;
margin-left: 0.5rem;
margin-bottom: 0.1rem;
}
.arrow::before,
.arrow::after {
content: "";
position: absolute;
bottom: 0px;
width: 0.1rem;
height: 100%;
transition: all 0.45s;
}
.arrow::before {
left: 0px;
transform: rotate(45deg);
background-color: #005fec;
}
#media (min-width: 768px) {
.arrow::before {
left: 7px;
}
}
.arrow::after {
left: -2.5px;
transform: rotate(-45deg);
background-color: #005fec;
}
#media (min-width: 768px) {
.arrow::after {
left: 4.5px;
}
}
.open .arrow::before {
left: 0px;
transform: rotate(-45deg);
}
#media (min-width: 768px) {
.open .arrow::before {
left: 7px;
}
}
.open .arrow::after {
left: -2.5px;
transform: rotate(45deg);
}
#media (min-width: 768px) {
.open .arrow::after {
left: 4.5px;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container">
<section class="filter">
<div class="filter__settings">
<div class="custom__select-wrapper">
<div class="custom__select year-sel selector">
<div class="custom__select-trigger">
<h6>Year</h6>
<div class="arrow"></div>
</div>
<div class="custom__options dropdown year-selector" id="yearFilter">
<span class="custom__option selected" data-year="all">All</span>
<span class="custom__option" data-year="2021">2021</span>
<span class="custom__option" data-year="2020">2020</span>
<span class="custom__option" data-year="2019">2019</span>
<span class="custom__option" data-year="2018">2018</span>
<span class="custom__option" data-year="2017">2017</span>
<span class="custom__option" data-year="2016">2016</span>
<span class="custom__option" data-year="2015">2015</span>
<span class="custom__option" data-year="2014">2014</span>
<span class="custom__option" data-year="2013">2013</span>
<span class="custom__option" data-year="2012">2012</span>
<span class="custom__option" data-year="2011">2011</span>
<span class="custom__option" data-year="2010">2010</span>
<span class="custom__option" data-year="2009">2009</span>
<span class="custom__option" data-year="2008">2008</span>
<span class="custom__option" data-year="2007">2007</span>
<span class="custom__option" data-year="2006">2006</span>
</div>
</div>
</div>
</div>
</section>
</div>

Placing the transition on the class custom__options was the right thing to do, but the display property is also like a transition state. Once that's removed, then the transition will work... Instead of using display: none;, I stayed with visibility: hidden;.
for (const dropdown of document.querySelectorAll(".custom__select-wrapper:not(.clearFilter)")) {
dropdown.addEventListener("click", function() {
this.querySelector(".custom__select").classList.toggle("open");
});
}
for (const option of document.querySelectorAll(".custom__option")) {
option.addEventListener("click", function() {
if (!this.classList.contains("selected")) {
this.parentNode
.querySelector(".custom__option.selected")
.classList.remove("selected");
this.classList.add("selected");
this.closest(".custom__select").querySelector(
".custom__select-trigger h6"
).textContent = this.textContent;
if (this.getAttribute("data-year")) {
current_year = this.dataset["year"];
yearFilter(this.dataset["year"]);
} else {
current_story = this.dataset["type"];
storyFilter(this.dataset["type"]);
}
}
});
}
window.addEventListener("click", function(e) {
for (const select of document.querySelectorAll(".custom__select")) {
if (!select.contains(e.target)) {
select.classList.remove("open");
}
}
});
#charset "UTF-8";
/*
.class {
property: value;
#include tablet-small {
property: value;
}
}
*/
button.clear {
border: 0;
background: #fff;
}
#selectedFilter {
color: #005fec;
}
ul {
padding-left: 0;
margin: 0;
}
.filter {
padding-right: 15px;
padding-left: 15px;
margin-bottom: 2rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
#media (min-width: 768px) {
.filter__settings {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
border-top: 1px solid #E0E5EC;
border-bottom: 1px solid #E0E5EC;
}
}
.custom__select {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
#media (min-width: 768px) {
.custom::before, .custom__options {
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
}
.custom__select-wrapper {
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 0;
border-bottom: 1px solid #E0E5EC;
}
.custom__select-wrapper:last-child {
border: 0;
}
.custom__select-wrapper.clearFilter {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.custom__select-wrapper .selected-clearFilter {
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 1rem 0 !important;
}
#media (min-width: 768px) {
.custom__select-wrapper {
padding: 0 2em;
border: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.custom__select-wrapper:last-child {
margin-left: auto;
}
.custom__select-wrapper:first-child, .custom__select-wrapper:last-child {
padding: 0;
}
}
.custom__select-wrapper h6 {
padding: 20px 3px;
color: #62668C;
font-weight: 300;
}
.custom__select-trigger {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
cursor: pointer;
}
#media (min-width: 768px) {
.custom__select-trigger {
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
margin-right: auto;
}
}
.custom__select-wrapper h6,
.custom__select-trigger h6 {
font-size: .75rem;
line-height: .75rem;
letter-spacing: 1px;
text-transform: uppercase;
padding: 20px 0;
}
.custom__select-trigger h6 {
color: #005fec;
font-weight: 900;
}
.custom__select-wrapper #selectedFilter {
font-size: 12px;
line-height: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: #005fec;
font-weight: 800;
padding: 0;
}
.custom__options {
top: 100%;
left: 0;
right: 0;
border-top: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 2;
color: #E0E5EC;
}
#media (min-width: 768px) {
.custom__options {
position: absolute;
background-color: #005fec;
max-height: 320px;
overflow-y: scroll;
}
.custom__options#storyFilter {
overflow: hidden;
}
}
.custom__options.active {
display: block;
visibility: visible;
opacity: 1;
z-index: 10;
}
.custom__select-trigger, .custom__option {
letter-spacing: 1px;
font-weight: 800;
color: #005fec;
border: 0;
background: transparent;
}
.custom__select.open::before {
content: "";
position: absolute;
bottom: 0;
left: 11px;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 11px solid #005fec;
}
.custom__select .custom__options {
min-width: 15rem;
}
.custom__select.open .custom__options {
opacity: 1;
visibility: visible;
pointer-events: all;
color: #fff;
min-width: 15rem;
}
#media (min-width: 768px) {
.custom__select.open .custom__options {
-webkit-box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
}
}
.custom__option {
position: relative;
display: block;
padding: 0 22px 0 12px;
font-weight: 400;
color: #62668C;
cursor: pointer;
font-size: 1rem;
line-height: 1rem;
margin: 1.5rem 0;
}
#media (min-width: 768px) {
.custom__option {
font-size: 1.25rem;
line-height: 1.25rem;
color: white;
font-weight: 300;
padding: 0 22px 0 20px;
}
}
.custom__option:hover {
cursor: pointer;
}
.custom__option.selected {
color: #005fec;
}
#media (min-width: 768px) {
.custom__option.selected {
color: #ffffff;
}
}
.custom__option.selected::before {
content: "•";
margin-left: -12px;
padding-right: 8px;
}
.empty-state {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: #005fec;
padding: 1rem;
border-radius: 4px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 2rem .5rem;
}
.empty-state h4 {
color: white;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 300;
margin-left: .5rem;
}
.empty-state h4 span {
color: white;
text-decoration: underline;
cursor: pointer;
}
.arrow {
position: relative;
height: 5px;
width: 3px;
margin-left: .5rem;
margin-bottom: .1rem;
}
.arrow::before, .arrow::after {
content: "";
position: absolute;
bottom: 0px;
width: 0.1rem;
height: 100%;
-webkit-transition: all 0.45s;
transition: all 0.45s;
}
.arrow::before {
left: 0px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background-color: #005fec;
}
#media (min-width: 768px) {
.arrow::before {
left: 7px;
}
}
.arrow::after {
left: -2.5px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
background-color: #005fec;
}
#media (min-width: 768px) {
.arrow::after {
left: 4.5px;
}
}
.open .arrow::before {
left: 0px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#media (min-width: 768px) {
.open .arrow::before {
left: 7px;
}
}
.open .arrow::after {
left: -2.5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#media (min-width: 768px) {
.open .arrow::after {
left: 4.5px;
}
}
/*# sourceMappingURL=filters.css.map */
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container">
<section class="filter">
<div class="filter__settings">
<div class="custom__select-wrapper">
<div class="custom__select year-sel selector">
<div class="custom__select-trigger">
<h6>Year</h6>
<div class="arrow"></div>
</div>
<div class="custom__options dropdown year-selector" id="yearFilter">
<span class="custom__option selected" data-year="all">All</span>
<span class="custom__option" data-year="2021">2021</span>
<span class="custom__option" data-year="2020">2020</span>
<span class="custom__option" data-year="2019">2019</span>
<span class="custom__option" data-year="2018">2018</span>
<span class="custom__option" data-year="2017">2017</span>
<span class="custom__option" data-year="2016">2016</span>
<span class="custom__option" data-year="2015">2015</span>
<span class="custom__option" data-year="2014">2014</span>
<span class="custom__option" data-year="2013">2013</span>
<span class="custom__option" data-year="2012">2012</span>
<span class="custom__option" data-year="2011">2011</span>
<span class="custom__option" data-year="2010">2010</span>
<span class="custom__option" data-year="2009">2009</span>
<span class="custom__option" data-year="2008">2008</span>
<span class="custom__option" data-year="2007">2007</span>
<span class="custom__option" data-year="2006">2006</span>
</div>
</div>
</div>
</div>
</section>
</div>

I cannot get my ease-in transition to work on the navigation bar.
On Mobile when you click the burger, I would like a simple transition sliding in from right to left.
I tried using translateX (0%, 100%) instead of display (none, flex).
I feel like i am missing/forgetting something really simple.
What am I doing wrong / forgetting?
Github Repo_branch
// Js waits to run until after DOM is loaded
document.addEventListener("DOMContentLoaded", ready);
function ready() {
console.log('DOM is ready');
toggleMenu();
}
function toggleMenu() {
console.log("script is imported and executed");
// Navigation opt4 - using eventlisteners and inline styling.... - works but very fucking ugly piece of code and unnecessary complicated
const navLinks = document.querySelector('.nav-links');
const burgerToggle = document.querySelector('#burger');
burgerToggle.addEventListener('click', show);
function show() {
burgerToggle.classList.toggle('toggle');
navLinks.classList.toggle('nav-links_active')
}
function close() {
navLinks.classList.toggle('nav-links_closed')
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
overflow: hidden;
background-color: black;
}
.container {
max-width: 1368px;
margin: 0 auto;
padding: 1rem 2rem;
}
button {
border: none;
outline: none;
cursor: pointer;
padding: 0.75rem 1rem;
margin: 0 1rem;
border-radius: 6px;
background: transparent;
border: 2px solid white;
color: white;
font-weight: 500;
}
* {
font-family: Helvetica, sans-serif;
}
/* Link styling */
a {
text-decoration: none;
font-size: 1rem;
}
/* NAVIGATION */
.navbar {
min-height: 10vh;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-size: 2.25rem;
color: white;
font-weight: 700;
}
/* Nav Links styling */
.nav-links {
display: flex;
align-items: center;
}
.nav-links li {
list-style-type: none;
}
.nav-links a {
color: white;
margin: 0 1.25rem;
position: relative;
}
.nav-links a.active {
text-decoration: underline;
font-weight: bold;
}
#media (max-width: 850px) {
.burger {
cursor: pointer;
position: relative;
display: block!important;
z-index: 11;
font-size: 3rem;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
button {
border-color: black;
color: black;
padding: 0.75rem 1.5rem;
}
.nav-links a {
color: black;
}
.nav-links {
display: none;
position: absolute;
top: 0;
left: 0;
background-color: white;
height: 100%;
width: 100%;
margin: 0;
padding: 100px;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
z-index: 10;
transition: 0.5s ease-in;
}
.nav-links_closed {
display: none;
}
.nav-links_active {
display: flex;
}
/* Toggle styling */
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
background-color: black;
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
background-color: black;
}
}
<body>
<div class="container">
<nav class="navbar">
<p class="logo">LOGO</p>
<ul class="nav-links">
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
<button>Sign In</button>
<button>Sign Up</button>
</ul>
<div class="burger" id="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</body>

First, transition has no effect on changing display properties.
It's a good idea to use the transform parameter for example below:
Then a slide-down effect can be achieved.
Demo:
// Js waits to run until after DOM is loaded
document.addEventListener("DOMContentLoaded", ready);
function ready() {
console.log('DOM is ready');
toggleMenu();
}
function toggleMenu() {
console.log("script is imported and executed");
// Navigation opt4 - using eventlisteners and inline styling.... - works but very fucking ugly piece of code and unnecessary complicated
const navLinks = document.querySelector('.nav-links');
const burgerToggle = document.querySelector('#burger');
burgerToggle.addEventListener('click', show);
function show() {
burgerToggle.classList.toggle('toggle');
navLinks.classList.toggle('nav-links_active')
}
function close() {
navLinks.classList.toggle('nav-links_closed')
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
overflow: hidden;
background-color: black;
}
.container {
max-width: 1368px;
margin: 0 auto;
padding: 1rem 2rem;
}
button {
border: none;
outline: none;
cursor: pointer;
padding: 0.75rem 1rem;
margin: 0 1rem;
border-radius: 6px;
background: transparent;
border: 2px solid white;
color: white;
font-weight: 500;
}
* {
font-family: Helvetica, sans-serif;
}
/* Link styling */
a {
text-decoration: none;
font-size: 1rem;
}
/* NAVIGATION */
.navbar {
min-height: 10vh;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-size: 2.25rem;
color: white;
font-weight: 700;
}
/* Nav Links styling */
.nav-links {
display: flex;
align-items: center;
}
.nav-links li {
list-style-type: none;
}
.nav-links a {
color: white;
margin: 0 1.25rem;
position: relative;
}
.nav-links a.active {
text-decoration: underline;
font-weight: bold;
}
#media (max-width: 3000px) {
.burger {
cursor: pointer;
position: relative;
display: block!important;
z-index: 11;
font-size: 3rem;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
button {
border-color: black;
color: black;
padding: 0.75rem 1.5rem;
}
.nav-links a {
color: black;
}
.nav-links {
display: flex;
transform: translate3d(0, -100%, 0);
position: absolute;
top: 0;
left: 0;
background-color: white;
height: 100%;
width: 100%;
margin: 0;
padding: 100px;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
z-index: 10;
transition: 0.3s ease-in;
}
.nav-links_closed {
display: none;
}
.nav-links_active {
display: flex;
transform: translate3d(0, 0, 0);
}
/* Toggle styling */
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
background-color: black;
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
background-color: black;
}
}
<body>
<div class="container">
<nav class="navbar">
<p class="logo">LOGO</p>
<ul class="nav-links">
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
<button>Sign In</button>
<button>Sign Up</button>
</ul>
<div class="burger" id="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</body>

My Hamburger menu is not working properly, that's it is not showing the menu items whenever a user clicks on it. It is however acting properly on the other functionality whenever it is clicked. I have tried every possible trick and i haven't managed to get it to work properly.I am not sure what is the challenge with my javascript because i believe that should be were the issues are. Below is my code:
const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".nav__list");
hamburger.addEventListener("click", ()=> {
navbar.classList.toggle("open");
});
const hamburgerBtn = document.querySelector('.hamburger');
let hamburgerOpen = false;
hamburgerBtn.addEventListener('click', () => {
if (!hamburgerOpen) {
hamburgerBtn.classList.add('open');
hamburgerOpen = true;
} else {
hamburgerBtn.classList.remove('open');
hamburgerOpen = false;
}
});
:root {
--fw-normal: 400;
--fw-dark: 600;
--fw-bold: 700;
/***Colors***/
--clr-primary: #333;
--clr-text: #fafafa;
--clr-blue: #22a7ff;
--clr-purple: #871e5f;
--clr-green: #19a356;
--clr-yellow: #ffff2e;
--clr-red: #cd1a21;
--clr-orange: #ff4500;
/*** Font and Typography ***/
--ff-body: Georgia, "Times New Roman", Times, serif;
--ff-header: Verdana, Arial, Helvetica, sans-serif;
--fs-header: 4.5rem;
--fs-header1: 2.5rem;
--fs-header2: 1.5rem;
--fs-header3: 1.2rem;
--fs-lg-para: 1.1rem;
--fs-md-para: 1rem;
--fs--sm-para: .938rem;
/*** z index ***/
--z-index: 99;
}
/***************************************************
2. #Global Styles
***************************************************/
*, ::before, ::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: var(--ff-body);
background: var(--clr-text);
color: var(--clr-primary);
font-size: var(--fs-para);
line-height: 1.6;
}
a {
text-decoration: none;
cursor: pointer;
letter-spacing: 2px;
padding: 1.25em;
display: inline-block;
width: 100%;
text-align: center;
transition:all .5s;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--ff-header);
margin: 0;
}
p {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
/* img {
max-width: 100%;
width: 100%;
height: auto;
} */
/************************************************
3. #Typography
************************************************/
/* Navigation Bar & Hero Section*/
.bg-hero {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--clr-blue);
transition: .5s;
}
.navbar {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-right: 2.5em;
display: flex;
justify-content: space-between;
align-items: center;
}
#media screen and (max-width: 48em) {
.nav__list {
position: fixed;
top: 0;
right: -100%;
width: 80%;
height: 80%;
background: rgba(255,255,255, 0.3);
backdrop-filter: blur(10px);
z-index: var(--z-index);
flex-direction: column;
align-items: center;
justify-content: center;
transition: .2s;
display: none;
opacity: 0;
}
}
.open {
right: 0;
}
.nav__link {
color: var(--clr-text);
font-weight: var(--fw-normal);
font-size: var(--fs-lg-para);
}
.nav__link:hover {
color: var(--clr-purple);
}
.shopping-cart {
margin-right: 2em;
color: var(--clr-text);
}
.social__media {
display: flex;
justify-content: center;
align-items: center;
padding-left: 3em;
margin-top: 3em;
}
.sm__link {
background: var(--clr-text);
width: 2.7em;
height: 2.7em;
margin: 1em .625em;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.sm__link i {
transition: .1s linear;
}
.sm__link:hover i {
transform: scale(1.5);
}
.sm__facebook {
font-size: 1.5rem;
color: #4267b2;
}
.sm__twitter {
font-size: 1.5rem;
color: #1da1f2;
}
.sm__instagram {
font-size: 1.5rem;
color: #000;
}
.social__contact {
display: none;
}
/*****************************************************
4. #Components
*****************************************************/
/*4.1 Cart Basket*/
.cart-item {
background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
border-radius: 50%;
padding: 1px 3px 2px;
}
/*4.2 Buttons*/
.btn-main {
display: inline-block;
width: 18em;
max-width: 100%;
height: 3em;
padding: .5em 1.25em;
border-radius: 1.563em;
margin-top: 2.5em;
background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
color: var(--clr-text);
font-weight: 600;
font-size: .88rem;
}
.fa-angle-right {
color: #ff7800;
background: var(--clr-text);
border-radius: 50%;
padding: .438em;
margin-right: -.938em;
}
.btn-main:focus,
.fa-arrow-right:focus {
color: var(--clr-primary);
opacity: 0.1;
}
.btn-main:hover,
.fa-arrow-right:hover {
color: var(--clr-primary);
}
/*4.3 Hamburger*/
.hamburger {
position: absolute;
cursor: pointer;
right: 2%;
top: 50%;
transform: translate(-5%,-50%);
z-index: var(--z-index);
}
.hamburger-btn {
width: 20px;
height: 3px;
background: var(--clr-text);
margin: .625em;
transition: all .5s ease-in-out;
}
.hamburger-btn::before,
.hamburger-btn::after {
content: '';
position: absolute;
width:20px;
height: 3px;
background: var(--clr-text);
border-radius: 5px;
transition: all .5s ease-in-out;
}
.hamburger-btn::before {
transform: translateY(-7px);
}
.hamburger-btn::after {
transform: translateY(7px);
}
.hamburger.open .hamburger-btn {
transform: translateX(-50px);
background: transparent;
}
.hamburger.open .hamburger-btn::before {
transform: rotate(45deg) translate(35px, -35px);
}
.hamburger.open .hamburger-btn::after {
transform: rotate(-45deg) translate(35px, 35px);
}
<section class="bg-hero">
<nav class="navbar">
<img src="#" alt="#" class="#"><span>X&L Limited</span>
<ul class="nav__list">
<li class="nav__list-item"></li>
<li class="nav__list-item">Products</li>
<li class="nav__list-item">Our Story</li>
<li class="nav__list-item">Blog</li>
<li class="nav__list-item">Contact Us</li>
<div class="social__media">
<i class="fab fa-facebook-f sm__facebook"></i>
<i class="fab fa-twitter sm__twitter"></i>
<i class="fab fa-instagram sm__instagram"></i>
</div>
</ul>
<div>
<i class="fas fa-shopping-cart fa-lg shopping-cart"> <span class="cart-item">0</span></i>
</div>
<div class="hamburger">
<div class="hamburger-btn"></div>
</div>
</nav>
<div class="hero">
<div class="contentBox">
<h1 class="hero-title">Do you like <br><span>Smooth Skin?</span></h1>
<p class="hero-para">Naturally, the skin is supposed to be smooth and soft, however, the only insurance for dry and oily skin is skincare products that consistently offer effective skin protection. To protect dry and oily skin, make the smart choice, because the choice is yours, and it's simple.</p>
<a class="btn-main" href="#">View Our Products <i class="fas fa-angle-right fa-lg"></i></a>
</div>
</div>
</section>

You need to remove display:none from your .nav__list, add opacity:1 to .open and also edit your code on mobile version.
const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".nav__list");
hamburger.addEventListener("click", ()=> {
navbar.classList.toggle("open");
});
const hamburgerBtn = document.querySelector('.hamburger');
let hamburgerOpen = false;
hamburgerBtn.addEventListener('click', () => {
if (!hamburgerOpen) {
hamburgerBtn.classList.add('open');
hamburgerOpen = true;
} else {
hamburgerBtn.classList.remove('open');
hamburgerOpen = false;
}
});
:root {
--fw-normal: 400;
--fw-dark: 600;
--fw-bold: 700;
/***Colors***/
--clr-primary: #333;
--clr-text: #fafafa;
--clr-blue: #22a7ff;
--clr-purple: #871e5f;
--clr-green: #19a356;
--clr-yellow: #ffff2e;
--clr-red: #cd1a21;
--clr-orange: #ff4500;
/*** Font and Typography ***/
--ff-body: Georgia, "Times New Roman", Times, serif;
--ff-header: Verdana, Arial, Helvetica, sans-serif;
--fs-header: 4.5rem;
--fs-header1: 2.5rem;
--fs-header2: 1.5rem;
--fs-header3: 1.2rem;
--fs-lg-para: 1.1rem;
--fs-md-para: 1rem;
--fs--sm-para: .938rem;
/*** z index ***/
--z-index: 99;
}
/***************************************************
2. #Global Styles
***************************************************/
*, ::before, ::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: var(--ff-body);
background: var(--clr-text);
color: var(--clr-primary);
font-size: var(--fs-para);
line-height: 1.6;
}
a {
text-decoration: none;
cursor: pointer;
letter-spacing: 2px;
padding: 1.25em;
display: inline-block;
width: 100%;
text-align: center;
transition:all .5s;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--ff-header);
margin: 0;
}
p {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
/* img {
max-width: 100%;
width: 100%;
height: auto;
} */
/************************************************
3. #Typography
************************************************/
/* Navigation Bar & Hero Section*/
.bg-hero {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--clr-blue);
transition: .5s;
}
.navbar {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-right: 2.5em;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__list {
right: -100%;
opacity: 0;
}
.open{
right: 0;
opacity:1;
}
#media screen and (max-width: 48em) {
.nav__list {
position: fixed;
top: 0;
right: -100%;
width: 80%;
height: 80%;
background: rgba(255,255,255, 0.3);
backdrop-filter: blur(10px);
z-index: var(--z-index);
flex-direction: column;
align-items: center;
justify-content: center;
transition: .2s;
opacity: 0;
}
}
html .open {
right: 0;
opacity:1;
}
.nav__link {
color: var(--clr-text);
font-weight: var(--fw-normal);
font-size: var(--fs-lg-para);
}
.nav__link:hover {
color: var(--clr-purple);
}
.shopping-cart {
margin-right: 2em;
color: var(--clr-text);
}
.social__media {
display: flex;
justify-content: center;
align-items: center;
padding-left: 3em;
margin-top: 3em;
}
.sm__link {
background: var(--clr-text);
width: 2.7em;
height: 2.7em;
margin: 1em .625em;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.sm__link i {
transition: .1s linear;
}
.sm__link:hover i {
transform: scale(1.5);
}
.sm__facebook {
font-size: 1.5rem;
color: #4267b2;
}
.sm__twitter {
font-size: 1.5rem;
color: #1da1f2;
}
.sm__instagram {
font-size: 1.5rem;
color: #000;
}
.social__contact {
display: none;
}
/*****************************************************
4. #Components
*****************************************************/
/*4.1 Cart Basket*/
.cart-item {
background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
border-radius: 50%;
padding: 1px 3px 2px;
}
/*4.2 Buttons*/
.btn-main {
display: inline-block;
width: 18em;
max-width: 100%;
height: 3em;
padding: .5em 1.25em;
border-radius: 1.563em;
margin-top: 2.5em;
background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
color: var(--clr-text);
font-weight: 600;
font-size: .88rem;
}
.fa-angle-right {
color: #ff7800;
background: var(--clr-text);
border-radius: 50%;
padding: .438em;
margin-right: -.938em;
}
.btn-main:focus,
.fa-arrow-right:focus {
color: var(--clr-primary);
opacity: 0.1;
}
.btn-main:hover,
.fa-arrow-right:hover {
color: var(--clr-primary);
}
/*4.3 Hamburger*/
.hamburger {
position: absolute;
cursor: pointer;
right: 2%;
top: 50%;
transform: translate(-5%,-50%);
z-index: var(--z-index);
}
.hamburger-btn {
width: 20px;
height: 3px;
background: var(--clr-text);
margin: .625em;
transition: all .5s ease-in-out;
}
.hamburger-btn::before,
.hamburger-btn::after {
content: '';
position: absolute;
width:20px;
height: 3px;
background: var(--clr-text);
border-radius: 5px;
transition: all .5s ease-in-out;
}
.hamburger-btn::before {
transform: translateY(-7px);
}
.hamburger-btn::after {
transform: translateY(7px);
}
.hamburger.open .hamburger-btn {
transform: translateX(-50px);
background: transparent;
}
.hamburger.open .hamburger-btn::before {
transform: rotate(45deg) translate(35px, -35px);
}
.hamburger.open .hamburger-btn::after {
transform: rotate(-45deg) translate(35px, 35px);
}
<section class="bg-hero">
<nav class="navbar">
<img src="#" alt="#" class="#"><span>X&L Limited</span>
<ul class="nav__list">
<li class="nav__list-item"></li>
<li class="nav__list-item">Products</li>
<li class="nav__list-item">Our Story</li>
<li class="nav__list-item">Blog</li>
<li class="nav__list-item">Contact Us</li>
<div class="social__media">
<i class="fab fa-facebook-f sm__facebook"></i>
<i class="fab fa-twitter sm__twitter"></i>
<i class="fab fa-instagram sm__instagram"></i>
</div>
</ul>
<div>
<i class="fas fa-shopping-cart fa-lg shopping-cart"> <span class="cart-item">0</span></i>
</div>
<div class="hamburger">
<div class="hamburger-btn"></div>
</div>
</nav>
<div class="hero">
<div class="contentBox">
<h1 class="hero-title">Do you like <br><span>Smooth Skin?</span></h1>
<p class="hero-para">Naturally, the skin is supposed to be smooth and soft, however, the only insurance for dry and oily skin is skincare products that consistently offer effective skin protection. To protect dry and oily skin, make the smart choice, because the choice is yours, and it's simple.</p>
<a class="btn-main" href="#">View Our Products <i class="fas fa-angle-right fa-lg"></i></a>
</div>
</div>
</section>