I'm doing an hamburger menu which has to open when toggled. The thing is, I can close and open it without any problem but it remains open on page load. Which means it is already toggled when you open the page. Hope this explanation is clear. I gace all the code I have for this feature. Please Can someone help ?
JS
const hamburger = document.querySelector('.navbar__hamburger');
const links = document.querySelector('.nav-primary');
hamburger.addEventListener('click', ()=> {
links.classList.toggle('nav-primary--hide');
});
},
};
HTML
<header class="header">
<div class="header-color">
<div class="container">
<div class="logo__wrapper">
<a class="link__logo" href="index.html">
<div class="header__logo__ctn">
<img class="header__logo" src="./assets/svg/logo-svg-ghosts-02.svg"/>
</div>
<p class="header__title">ghosts team</p>
</a>
</div>
<div class="navbar__hamburger">
<span class="navbar__hamburger__line"></span>
<span class="navbar__hamburger__line"></span>
<span class="navbar__hamburger__line"></span>
</div>
<nav class="nav-primary nav-primary--hide">
<ul class="main-menu">
<li class="menu-item"><a class="menu-item-link presentation" href="index.html">présentation</a></li>
<li class="menu-item"><a class="menu-item-link" href="airsoft.html">l'airsoft</a></li>
<li class="menu-item"><a class="menu-item-link" href="terrain.html">terrain</a></li>
<li class="menu-item"><a class="menu-item-link" href="reglement.html">règlement</a></li>
<li class="menu-item"><a class="menu-item-link" href="equipe.html">équipe</a></li>
<li class="menu-item galerie"><a class="menu-item-link" href="gallery.html">galerie photos</a></li>
</ul>
<div class="social__wrapper__ctn">
<ul class="social__wrapper">
<li class="social__item"><a class="social__link" href="/" target="_blank"><span>Suivez nous sur Facebook:</span><i class="fa-brands fa-facebook-f"></i></a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
CSS
.container {
width: 100%;
max-width: 1550px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
margin: 0 auto;
#media screen and (max-width: 1183px) {
align-items: flex-start;
flex-wrap: wrap;
padding: 15px 30px;
}
}
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
.header-color {
background-color: rgba($color: $darkGrey, $alpha: 0.7);
#media screen and (max-width: 1183px) {
background-color: $darkGrey;
}
.logo__wrapper {
#media screen and (max-width: 359px) {
flex: 70%;
}
#media screen and (min-width: 360px) and (max-width: 1183px) {
flex: 80%;
}
.link__logo {
text-decoration: none;
display: flex;
align-items: center;
max-width: 210px;
.header__logo__ctn {
padding-right: 5px;
.header__logo {
height: 56px;
}
}
.header__title {
color: #ffffff;
font-family: $calvous;
}
}
}
.nav-primary {
display: flex;
justify-content: space-between;
align-items: center;
#media screen and (max-width: 1183px) {
flex-direction: column;
justify-content: flex-start;
// height: 100vh;
}
.nav {
display: flex;
justify-content: space-between;
letter-spacing: 2px;
list-style-type: none;
#media screen and (max-width: 1183px) {
flex-direction: column;
}
.menu-item {
text-decoration: none;
#media screen and (max-width: 1183px) {
display: flex;
padding: 8px 0;
}
&::after {
content: url("../../images/assets/svg/bckg-links.png");
#media screen and (max-width: 1183px) {
content: none;
}
}
.presentation {
#media screen and (max-width: 1183px) {
padding: 18px 25px;
}
}
a{
padding: 5px 25px;
color: #ffffff;
font-family: $ubuntuLight;
font-size: 15px;
text-transform: uppercase;
text-decoration: none;
border: 1px solid transparent;
&:hover {
border-color: #ceae60;
color: #ceae60;
}
#media screen and (max-width: 1183px) {
font-size: 22px;
padding: 15px 5px;
}
}
}
.menu-item-41 {
&::after {
content: none;
}
}
}
.social__wrapper__ctn {
.social__wrapper {
list-style-type: none;
padding-left: 1em;
.social__item {
#media screen and (max-width: 1183px) {
padding: 10px 0;
}
.social__link {
text-decoration: none;
color: $yellow;
font-family: $ubuntuLight;
&:hover {
border-color: $white;
}
span {
display: none;
#media screen and (max-width: 1183px) {
display: inline;
padding-right: 10px;
}
}
i {
border: 1px solid $yellow;
border-radius: 50%;
width: 25px;
height: 25px;
color: $yellow;
font-size: 15px;
padding: 5px 6.2px;
&:hover {
color: $white;
border-color: $white;
}
}
}
}
}
}
}
.nav-primary--hide {
#media screen and (max-width: 1183px) {
display: none;
}
}
}
.navbar__hamburger {
margin: 10px;
cursor: pointer;
.navbar__hamburger__line {
display: block;
width: 40px;
height: 3px;
margin-bottom: 10px;
background-color: #fff;
}
#media screen and (min-width: 1183px) {
display: none;
}
}
}
.header-pages {
background-image: url("../../images/assets/images/background-fonce.jpg");
position: relative;
}
You just need to remove the nav-primary--hide class in the HTML code. Then it behaves as you want.
Everything else looks fine!
Related
I am trying to build a mobile view navigation bar that closes after clicking on a list item and I'm having trouble finding a solution. The requirements state not to use jQuery or CSS. Although, CSS solutions are also helpful. The aim is to have the list items navigate the user to a section on the page with the appropriate id. It works as it should but I want the mobile view nav bar to close after clicking a list item. Here is my code so far:
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
.navbar {
display: flex;
position: fixed;
width: 100%;
justify-content: space-between;
align-items: center;
background-color: #2a324b;
color: white;
top: 0;
}
.brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: rgb(204, 194, 194);
color: #2a324b;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
<nav class="navbar">
<div class="brand-title">Palesa Mapeka</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>About Me</li>
<li>Tech Stack</li>
<li>Projects</li>
</ul>
</div>
</nav>
Ideas on how to solve my dilemma are appreciated. I want to learn how to do this using JavaScript.
Why not just add the same click listener to the navbar-links class?
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
navbarLinks.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
.navbar {
display: flex;
position: fixed;
width: 100%;
justify-content: space-between;
align-items: center;
background-color: #2a324b;
color: white;
top: 0;
}
.brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: rgb(204, 194, 194);
color: #2a324b;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
<nav class="navbar">
<div class="brand-title">Palesa Mapeka</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>About Me</li>
<li>Tech Stack</li>
<li>Projects</li>
</ul>
</div>
</nav>
I think we should to try this
<button type="button"
onclick="document.getElementByClassName('navbar').style.display = 'none'">
Hide Navbar</button>
It will hide any element with navbar className
Thank you
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 ran into a problem displaying a burger menu for my website. I wanted it to appear on the top right corner but somehow the menu is invisible right now.
I leave my source codes so I appreciate it if any of you could advise me on this.
$(document).ready(function(){
$(".burger").on("click", function(){
$("nav li").toggleClass("open");
});
});
/* Header */
header {
position: fixed;
z-index: 100;
width: 100%;
border-bottom: solid 1px #c6c1c1;
background-color: white;
}
header .content {
display: flex;
align-items: center;
padding: 1.875rem;
}
header .site-logo {
flex: 1;
width: 60%
}
header nav ul {
display: flex;
}
ul {
list-style-type: none;
display: flex;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
nav li {
padding-left: 3.5rem;
}
nav li:last-child {
display: flex;
}
nav a {
vertical-align: bottom;
line-height: 1.6;
font-size: 1rem;
color: #de6cb6;
}
nav a:link {
color: red;
}
nav select {
display: none;
}
a:-webkit-any-link {
cursor: pointer;
}
header .icon {
width: 1rem;
padding-left: .75rem;
color: #de6cb6
}
header .mobile {
display: none;
}
#media only screen and (max-width: 1200px) {
nav li:last-child {
display: block;
}
header .content {
padding: 1rem 1rem;
}
}
#media only screen and (max-width: 1000px) {
header {
float: none;
}
header .desktop {
display: none;
}
header .mobile {
background: pink;
color: pink;
List-style: none;
clear: both;
}
header .mobile li {
display: inline-block;
margin: 10px;
}
header .mobile .burger {
width: 35px;
height: 5px;
background: pink;
margin: 6px 0;
}
#burger {
float: right;
visibility: visible;
margin: 5px;
}
header .content {
padding: .5rem 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Header -->
<header>
<div class="content" style="height: 60px;">
<img src="./resources/images/cropped_springtribelogo_notagline.png" style="height:60px;">
<nav class="desktop">
<ul>
<li>Impressum</li>
<li>EN</li>
<li><img class="icon" src="./resources/images/instagram (1.png"></li>
<li><img class="Linkedin" src="./resources/images/Linkedin_saturated_4.png" style="width: 20px; color: #de6cb6; margin-left: 8px;"></li>
</ul>
</nav>
<nav class="mobile">
<!-- Navigation Burger-->
<div id="burger" class="burger">
<div></div>
<div></div>
<div></div>
</div>
<br>
<li>Home</li>
<li>About</li>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</nav>
</div>
</header>
There's two issues in your code. Firstly the rules in the <1000px media query don't override the default display: none setting of the header .mobile element. Secondly you're applying the styling for the lines of the burger icon to the .burger div directly, instead of this child div within it. If you fix the following two issues, the code works correctly:
#media only screen and (max-width: 1000px) {
header .mobile {
/* other rules... */
background-color: transparent;
display: block;
}
/* OLD: header .mobile .burger { */
header .mobile .burger div {
width: 35px;
height: 5px;
background: pink;
margin: 6px 0;
}
Working example:
/* Header */
header {
position: fixed;
z-index: 100;
width: 100%;
border-bottom: solid 1px #c6c1c1;
background-color: white;
}
header .content {
display: flex;
align-items: center;
padding: 1.875rem;
}
header .site-logo {
flex: 1;
width: 60%
}
header nav ul {
display: flex;
}
ul {
list-style-type: none;
display: flex;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
nav li {
padding-left: 3.5rem;
}
nav li:last-child {
display: flex;
}
nav a {
vertical-align: bottom;
line-height: 1.6;
font-size: 1rem;
color: #de6cb6;
}
nav a:link {
color: red;
}
nav select {
display: none;
}
a:-webkit-any-link {
cursor: pointer;
}
header .icon {
width: 1rem;
padding-left: .75rem;
color: #de6cb6
}
header .mobile {
display: none;
}
#media only screen and (max-width: 1200px) {
nav li:last-child {
display: block;
}
header .content {
padding: 1rem 1rem;
}
}
#media only screen and (max-width: 1000px) {
header {
float: none;
}
header .desktop {
display: none;
}
header .mobile {
background-color: transparent;
color: pink;
List-style: none;
clear: both;
display: block;
}
header .mobile li {
display: inline-block;
margin: 10px;
}
header .mobile .burger div {
width: 35px;
height: 5px;
background: pink;
margin: 6px 0;
}
#burger {
float: right;
visibility: visible;
margin: 5px;
}
header .content {
padding: .5rem 0;
}
}
<header>
<div class="content" style="height: 60px;">
<img src="./resources/images/cropped_springtribelogo_notagline.png" style="height:60px;">
<nav class="desktop">
<ul>
<li>Impressum</li>
<li>EN</li>
<li>
<img class="icon" src="./resources/images/instagram (1.png">
</li>
<li>
<img class="Linkedin" src="./resources/images/Linkedin_saturated_4.png" style="width: 20px; color: #de6cb6; margin-left: 8px;">
</li>
</ul>
</nav>
<nav class="mobile">
<div id="burger" class="burger">
<div></div>
<div></div>
<div></div>
</div><br>
<ul>
<li>Home</li>
<li>About</li>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</nav>
</div>
</header>
As an aside, note that your HTML isn't valid as the li elements need to be children of a ul
My goal is to make a navbar which is centered in the web page and responsive like here on stack.
So far I managed with some research and tutorials make a navbar which is responsive but it spreads to the end of corners.
I tried to wrap it in a container like I do with content but it limited whole navbar to middle.
Then tried to add margin to left and right but when I got on smaller screens it became ugly.
So I want your opinions how to fix it or if there is some other preferred way to do navbars.
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
}
.brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
<nav class="navbar">
<div class="brand-title">Fruit Basket</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
Wrap the entire thing in a header, set max-width: 800px; margin: 0 auto; on the nav and move the background-color to header:
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
header {
background-color: #333;
}
.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
margin: 0 auto;
max-width: 800px;
color: white;
}
.brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
<header>
<nav class="navbar">
<div class="brand-title">Fruit Basket</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
margin: 0 auto centers the nav and max-width caps how wide it can be. If you want it to be wider just change this property.
As per your comment:
"I want what I have now, but with a change that when its on big screen that "logo" and links are on center like for example here on stackoverflow. When I did that with padding or container it messed with smaller screens view. – Angelll"
What I understood is you need everything center in bigger screen.
Correct me If I am wrong.
As per my understanding I have found the solution and added in the below code snippet.
I have replaced the .navbar class justify-content property to center.
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.navbar {
display: flex;
position: relative;
justify-content: center;
align-items: center;
background-color: #333;
color: white;
}
.brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
<nav class="navbar">
<div class="brand-title">Fruit Basket</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>