Develop Reference

Mobile Menu not disappearing for larger screens

I'm very new to coding and have been following tutorials to learn coding. I have very successfully created a hamburger menu after following a tutorial and I'm totally chuffed!
My happiness soon faded away when I realised that the mobile menu doesn't disappear if I forget to click the X and expand the screen. The Menu remains. I have attached the Code and HTML and CSS. Please can someone help me write the correct code to make it disappear?
I have tried to do this with CSS by adding 'display: none' to the mobile_menu and mobile_menu bottom' ... and also tried moving it with the transitionX(100%) but to no luck.
So I'm guessing this a JS related issue which I have 0 knowledge at the moment.
sadly I can't post images because I don't have 10 reputations. sad. so I'll try and paste it here.
hamburger
<div>
<button type="button" class="hamburger" id="menu-btn" >
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</button>
</div>
<div class="mobile-menu hidden" id="menu">
<ul>
<li>worship and music</li>
<li>visit us</li>
<li>support us</li>
</ul>
<div class="mobile-menu-bottom">
<button class="btn donate">donate</button>
<a href="#"><img src="images/pin.png" alt="locator">
<span>locate us</span></a>
</div>
</div>
</div>
CSS Code:
.navbar{
width: 100%;
height: auto;
background-color: #F6F6F4;
padding:20px;
box-shadow: 0 1px 3px rgb(0 0 0 / 10%),
0 2px 2px rgb(0 0 0 / 6%),
0 0 2px rgb(0 0 0 / 7%);
}
.navbar-container{
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar ul {
display: flex;
align-items: center;
}
.navbar li {
margin: 0 20px;
}
.navbar-brand img{
width: 320px;
height:113px;
margin: auto 0;
margin-left: 25px;
}
.navbar-nav-left{
text-transform: uppercase;
font-size: .9rem;
}
.navbar-nav-right img
{
height: 20px;
width: 20px;
margin-right: 20px;
}
.navbar-nav-right li:first-child a
{
display: flex;
align-items: center;
}
.btn {
cursor: pointer;
display: inline-block;
background: none;
border: 1px #000 solid;
border-radius: 50px;
padding: 7px 16px;
line-height: 1.2;
text-align: center;
text-decoration: none;
}
.donate {
background-color: var(--Purple);
border: none;
font-size: 1rem;
}
.donate:hover {
background-color:white;
font-size: 1rem;
color: #000000;}
.donate_button{
color: white;
}
.hamburger {
cursor: pointer;
width: 24px;
height: 24px;
position: relative;
background: none;
border: none;
z-index: 10;
transition: all 0.25s;
padding: 0 25px;
display: none;
}
.top, .middle, .bottom {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 2px;
background: #000000;
transform: rotate(0);
transition: all 0.5s;
}
.middle {
transform: translateY(7px);
}
.bottom {
transform: translateY(14px);
}
.open .top {
transform: rotate(45deg) translateY(6px) translateX(6px);
}
.open .middle {
opacity: 0;
}
.open .bottom {
transform: rotate(-45deg) translateY(6px) translateX(-6px);
}
mobile menu
.mobile-menu {
position: fixed;
background-color:#abc09f;
top: 161px;
right:0;
width: 90%;
height: 100%;
padding: 30px;
box-shadow: inset 0 4px 3px -3px rgb(0 0 0 /10%),
inset 0 4px 2px -2px rgb(0 0 0 /7%);
transition: all 0.3s;}
.mobile-menu div a {
display: flex;
align-items: center;
font-size:1rem;
}
.hidden {
transform: translateX(100%);
}
.no-scroll {
overflow: hidden;
}
#media(max-width: 768px){
.hamburger {
display: block;
}
.navbar-brand img{
width: 220px;
height:113px;
margin: auto 0;
margin-left: 25px;
}
.navbar .navbar-nav-left,
.navbar .navbar-nav-right{
display: none;
}
}
#media(max-width:1080px){
.hamburger {
display: block;
}
.navbar .navbar-nav-left,
.navbar .navbar-nav-right{
display: none;}
}
JS SCRIPT
const btn = document.getElementById('menu-btn')
const nav = document.getElementById('menu')
function navToggle() {
btn.classList.toggle('open')
nav.classList.toggle('hidden')
document.body.classList.toggle('no-scroll')
}
btn.addEventListener('click', navToggle)

The problem is in the mobile menu CSS section. You have to add translateX(100%) to mobile-menu to hide the mobile menu on a bigger screen by default.
For the smaller screen change it to translateX(0%) so that it shows the menu when the 'hidden' class is not active.
And move the .hidden{translateX(100%)} to the 1080px media query as it is not needed for the bigger screen. The changes are wrapped inside the comments.
const btn = document.getElementById('menu-btn')
const nav = document.getElementById('menu')
function navToggle() {
btn.classList.toggle('open')
nav.classList.toggle('hidden')
document.body.classList.toggle('no-scroll')
}
btn.addEventListener('click', navToggle)
.navbar{
width: 100%;
height: auto;
background-color: #F6F6F4;
padding:20px;
box-shadow: 0 1px 3px rgb(0 0 0 / 10%),
0 2px 2px rgb(0 0 0 / 6%),
0 0 2px rgb(0 0 0 / 7%);
}
.navbar-container{
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar ul {
display: flex;
align-items: center;
}
.navbar li {
margin: 0 20px;
}
.navbar-brand img{
width: 320px;
height:113px;
margin: auto 0;
margin-left: 25px;
}
.navbar-nav-left{
text-transform: uppercase;
font-size: .9rem;
}
.navbar-nav-right img{
height: 20px;
width: 20px;
margin-right: 20px;
}
.navbar-nav-right li:first-child a {
display: flex;
align-items: center;
}
.btn {
cursor: pointer;
display: inline-block;
background: none;
border: 1px #000 solid;
border-radius: 50px;
padding: 7px 16px;
line-height: 1.2;
text-align: center;
text-decoration: none;
}
.donate {
background-color: var(--Purple);
border: none;
font-size: 1rem;
}
.donate:hover {
background-color:white;
font-size: 1rem;
color: #000000;
}
.donate_button{
color: white;
}
.hamburger {
cursor: pointer;
width: 24px;
height: 24px;
position: relative;
background: none;
border: none;
z-index: 10;
transition: all 0.25s;
padding: 0 25px;
display: none;
}
.top, .middle, .bottom {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 2px;
background: #000000;
transform: rotate(0);
transition: all 0.5s;
}
.middle {
transform: translateY(7px);
}
.bottom {
transform: translateY(14px);
}
.open .top {
transform: rotate(45deg) translateY(6px) translateX(6px);
}
.open .middle {
opacity: 0;
}
.open .bottom {
transform: rotate(-45deg) translateY(6px) translateX(-6px);
}
.mobile-menu {
position: fixed;
background-color:#abc09f;
top: 161px;
right:0;
width: 90%;
height: 100%;
padding: 30px;
box-shadow: inset 0 4px 3px -3px rgb(0 0 0 /10%), inset 0 4px 2px -2px rgb(0 0 0 /7%);
transition: all 0.3s;
/* ------------------Change here---------------*/
transform: translateX(100%); /* add translateX(100%) to hide the menu in bigger screen by default */
/* ------------------Change here---------------*/
}
.mobile-menu-bottom .nav__img{
max-width: 10px;
height: 10px;
}
.mobile-menu div a {
display: flex;
align-items: center;
font-size:1rem;
}
.no-scroll {
overflow: hidden;
}
#media(max-width: 768px){
.hamburger {
display: block;
}
.navbar-brand img{
width: 220px;
height:113px;
margin: auto 0;
margin-left: 25px;
}
.navbar .navbar-nav-left,
.navbar .navbar-nav-right{
display: none;
}
}
#media(max-width:1080px){
.hamburger {
display: block;
}
.navbar .navbar-nav-left,
.navbar .navbar-nav-right{
display: none;
}
/* ------------------Change here---------------*/
.mobile-menu{
transform: translateX(0%); /* Here mobile-menu will be shown if hidden class is not active */
}
.hidden {
transform: translateX(100%); /* And the menu will hide again if the hidden class is active*/
}
/* ------------------Change here---------------*/
}
<div>
<button type="button" class="hamburger" id="menu-btn" aria-label="hamburger">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</button>
</div>
<div class="mobile-menu hidden" id="menu">
<ul>
<li>worship and music</li>
<li>visit us</li>
<li>support us</li>
</ul>
<div class="mobile-menu-bottom">
<button class="btn donate">donate</button>
<a href="#"><img class="nav__img" src="https://img.freepik.com/premium-vector/location-icon-simple-symbol-red-pin-sign_399998-369.jpg?w=2000" alt="locator">
<span>locate us</span></a>
</div>
</div>

I made a menu button and a menu but I don't know how to link them together

hello I made a menu button and a menu but I don't know how to link them together when you click on the menu button the menu appears from the top to the center which starts with 0% opacity and gets to 100% opacity when you click on the menu button the menu closes and fades away I will appreciate if you can help me
Here is the code
var menu = document.getElementById("menu");
menu.onclick = function(){
menu.classList.toggle("openmenu");
}
body{
background-color: #333;
}
a{
text-decoration: none;
color: inherit
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 100%;
height: 0vh;
background: none;
display: flex;
align-items: top;
justify-content: right;
}
.menu{
width: 50px;
height: 50px;
margin: 3px;
background-image: linear-gradient(to right, #072AC8, #1E91D6 );
border-radius: 10px;
cursor: pointer;
}
.menu div{
width: 30px;
height: 30px;
margin: 10px;
position: relative;
}
.menu span{
background: #fff;
width: 100%;
height: 2.5px;
border-radius: 1.25px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .line-1{
transform: translate(-50%, -12.5px);
}
.menu .line-3{
transform: translate(-50%, 10px);
}
.openmenu .line-1{
transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3{
transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2{
width: 0;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2{
background: #333;
width: 100%;
height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
}
nav{
background: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px #000;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 13px, 35px;
margin: 10px;
font-size: 18px;
font: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 0.5s;
}
nav ul li::after{
content: '';
background-image: linear-gradient(to right, #072AC8, #1E91D6 );
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover{
color: #fff;
}
nav ul li:hover::after{
top: 50%;
opacity: 1;
}
<div class="container">
<div class="menu" id="menu">
<div>
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="container2">
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Merch</li>
<li>About</li>
</ul>
</nav>
</div>

basically what i did was gave container 2 an active class when click on menu.and defined container2.active in the css.
making it display block in the first place and flex when active
var menu = document.getElementById("menu");
const nav = document.getElementsByClassName("container2")[0];
menu.addEventListener("click", () => {
menu.classList.toggle("openmenu");
nav.classList.toggle("active");
})
body {
background-color: #333;
}
a {
text-decoration: none;
color: inherit
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 0vh;
background: none;
display: flex;
align-items: top;
justify-content: right;
}
.menu {
width: 50px;
height: 50px;
margin: 3px;
background-image: linear-gradient(to right, #072AC8, #1E91D6);
border-radius: 10px;
cursor: pointer;
}
.menu div {
width: 30px;
height: 30px;
margin: 10px;
position: relative;
}
.menu span {
background: #fff;
width: 100%;
height: 2.5px;
border-radius: 1.25px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .line-1 {
transform: translate(-50%, -12.5px);
}
.menu .line-3 {
transform: translate(-50%, 10px);
}
.openmenu .line-1 {
transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3 {
transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2 {
width: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2 {
background: #333;
width: 100%;
height: 100vh;
display: none;
align-items: flex-start;
justify-content: center;
}
.container2.active {
display: flex;
}
nav {
background: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px #000;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 13px, 35px;
margin: 10px;
font-size: 18px;
font: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 0.5s;
}
nav ul li::after {
content: '';
background-image: linear-gradient(to right, #072AC8, #1E91D6);
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover {
color: #fff;
}
nav ul li:hover::after {
top: 50%;
opacity: 1;
}
<div class="container">
<div class="menu" id="menu">
<div>
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="container2 ">
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Merch</li>
<li>About</li>
</ul>
</nav>
</div>

Create a popup container that distinguishes each button (so they don't all popup at once) [duplicate]

This question already has answers here:
jQuery $(this) keyword
(6 answers)
Closed 1 year ago.
I'm usually good with searching for my answer, but I can't seem to get this right. The setup I have for this pop-up is perfect (responsive, plays well with what's inside (shortcode) etc.) the problem I'm having is because I've retrofitted from a codepen, it's made for just 1 pop-up per page.
I'm trying to create a project gallery wherein they click an anchor and a container with a slider inside shows the project's work (it works perfectly, just for one popup) but with say potentially 15 project galleries (pop-ups) per page.
I'm a novice with regards to jQuery, so please be easy on me I am ALWAYS learning.
The HTML
jQuery(document).ready(function( $ ){
jQuery(document).ready(function($){
//open popup
$('.popup-trigger').on('click', function(event){
event.preventDefault();
$('.popup').addClass('is-visible');
});
//close popup
$('.popup').on('click', function(event){
if( $(event.target).is('.popup-close') || $(event.target).is('.popup') ) {
event.preventDefault();
$(this).removeClass('is-visible');
}
});
//close popup when clicking the esc keyboard button
$(document).keyup(function(event){
if(event.which=='27'){
$('.popup').removeClass('is-visible');
}
});
});
});
#media(max-width:1150px) {
.popup-container{
top: 25% !important;
width: 90% !important;
height: 50%;
padding: 2rem !important;
}
}
.page-id-474 main#content{
margin: 0px !important
}
.popup-trigger {
width: 170px;
right: 2rem;
margin: 3em auto;
text-align: center;
color: #FFF;
font-size: 18px;
padding:1rem 2rem;
text-decoration:none;
transition:300ms all;
}
.popup-trigger:hover {
opacity:.8;
}
.popup1 {
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 1000;
width: 100%;
background-color: rgba(56, 56, 55, 0.9);
opacity: 0;
visibility: hidden;
transition:500ms all;
}
.popup1.is-visible {
opacity: 1;
visibility: visible;
transition:1s all;
}
.popup {
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 1000;
width: 100%;
background-color: rgba(56, 56, 55, 0.9);
opacity: 0;
visibility: hidden;
transition:500ms all;
}
.popup.is-visible {
opacity: 1;
visibility: visible;
transition:1s all;
}
.popup-container {
transform:translateY(-50%);
transition:500ms all;
position: relative;
width: 60%;
margin: 2em auto;
top: 5%;
padding:5rem;
background: #FFF;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.is-visible .popup-container {
transform:translateY(0);
transition:500ms all;
}
.popup-container .popup-close {
position: absolute;
top: 8px;
font-size:0;
right: 8px;
width: 30px;
height: 30px;
}
.popup-container .popup-close::before,
.popup-container .popup-close::after {
content: '';
position: absolute;
top: 12px;
width: 14px;
height: 3px;
background-color: #8f9cb5;
}
.popup-container .popup-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
left: 8px;
}
.popup-container .popup-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 8px;
}
.popup-container .popup-close:hover:before,
.popup-container .popup-close:hover:after {
background-color:#35a785;
transition:300ms all;
}
/*==========================================================================
Site grid
========================================================================== */
.grid-this {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
padding: 30px;
}
.grid-this.with-spacing {
gap: 30px;
}
.grid-this .block img {
width: 100%;
height: auto;
vertical-align: top;
}
/* Grid spacing in slick slider */
.grid-this.with-spacing .slick-slide {
margin-right: 30px;
}
.grid-this.with-spacing .slick-list {
margin-right: -30px;
}
#media(max-width:1150px) {
.grid-this.with-spacing .slick-slide {
margin-right: 0;
}
.grid-this.with-spacing .slick-list {
margin-right: 0;
}
.page-id-324 .site-container{
padding-left: 8px !important;
padding-right: 8px !important;
}
}
/* -------------------------------------------------------------
/
/ Main Cat Container
/
/ -------------------------------------------------------------*/
.main-cat-container{
Padding: 0px;
background-color: #fff;
border-style: solid;
border-width: 3px;
border-color:#e9ecf2;
transition:all 1s ease !important;
}
.main-cat-container:hover{
box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
transition:all 1s ease !important;
}
.main-cat-title{
padding-top: 12px;
font-size:22px;
color:#38507b;
text-align: center;
}
.main-cat-container:hover i{
color:#0e1932;
}
.mc-icons{
text-align: center;
}
.mc-icons i{
font-size:45px;
}
.choice-p{
color:#343a40;
font-size:22px;
font-weight: bold;
}
.custom-hr-spacing{
margin-top: 45px !important;
margin-bottom: 45px !important;
}
.faux-btn-container{
text-align: center !important;
margin-top: 20px !important;
}
.faux-btn{
background-color:#4cb150;
padding: 15px 35px;
color: #FFF;
transition:all 1s ease !important;
border-radius: 8px;
}
.faux-btn:hover{
background-color:#59cf5d;
transition:all 1s ease !important;
}
<div class="grid-this with-spacing margins-fix">
<div>
<a href="#0" id="info" class="info popup-trigger" title="info">
<div style="padding-bottom: 50px;" class="main-cat-container">
<div class="mc-icons" data-aos="flip-left" data-aos-delay="50" aos-duration="500"><img src="https://gilbert.level10designdev.com/wp-content/uploads/2021/12/Gilbert-Design-Build-Before-After-Kitchen-Remodel-Bradenton-Florida.jpg" width=100% height=auto></div>
<h3 class="main-cat-title">vEITH</h3>
<div class="faux-btn-container"><span class="faux-btn">See Project</span></div>
</div>
</a>
<div class="popup" role="alert">
<div class="popup-container">
Close
[metaslider id="2409"]
</div>
</div>
</div>
<div><a href="#0" id="info" class="info popup-trigger" title="info">
<div style="padding-bottom: 50px;" class="main-cat-container">
<div class="mc-icons" data-aos="flip-left" data-aos-delay="50" aos-duration="500"><img src="https://gilbert.level10designdev.com/wp-content/uploads/2021/12/Gilbert-Design-Build-Before-After-Kitchen-Remodel-Bradenton-Florida.jpg" width=100% height=auto></div>
<h3 class="main-cat-title">vEITH</h3>
<div class="faux-btn-container"><span class="faux-btn">See Project</span></div>
</div>
</a>
<div class="popup" role="alert">
<div class="popup-container">
Close
[metaslider id="2409"]
</div>
</div>
</div>
<div>.</div>
</div>
I've also created a code pen to visually show you the issue:
https://codepen.io/John_Barbagallo/pen/dyVXOvV
Any help is much appreciated!

Your html code has a syntax error. The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document. See details
Why are you nesting these 2 pieces of code:
jQuery(document).ready(function( $ ){
jQuery(document).ready(function($){
})
})
I think you should remove the part of the code that is duplicated.
$('.popup').addClass('is-visible'); this code means that all html elements containing the class popup will be added an is-visible class. This is lead to your error.
You should Jquery traversing to find popup belong to project clicked
Change it like this:
$('.popup-trigger').on('click', function(event){
event.preventDefault();
$(this).parent().find('.popup').addClass('is-visible');
});
All code here:
$(document).ready(function(){
//open popup
$('.popup-trigger').on('click', function(event){
event.preventDefault();
$(this).parent().find('.popup').addClass('is-visible');
});
//close popup
$('.popup').on('click', function(event){
if( $(event.target).is('.popup-close') || $(event.target).is('.popup') ) {
event.preventDefault();
$(this).removeClass('is-visible');
}
});
//close popup when clicking the esc keyboard button
$(document).keyup(function(event){
if(event.which=='27'){
$('.popup').removeClass('is-visible');
}
});
});
#media(max-width:1150px) {
.popup-container{
top: 25% !important;
width: 90% !important;
height: 50%;
padding: 2rem !important;
}
}
.page-id-474 main#content{
margin: 0px !important
}
.popup-trigger {
width: 170px;
right: 2rem;
margin: 3em auto;
text-align: center;
color: #FFF;
font-size: 18px;
padding:1rem 2rem;
text-decoration:none;
transition:300ms all;
}
.popup-trigger:hover {
opacity:.8;
}
.popup1 {
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 1000;
width: 100%;
background-color: rgba(56, 56, 55, 0.9);
opacity: 0;
visibility: hidden;
transition:500ms all;
}
.popup1.is-visible {
opacity: 1;
visibility: visible;
transition:1s all;
}
.popup {
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 1000;
width: 100%;
background-color: rgba(56, 56, 55, 0.9);
opacity: 0;
visibility: hidden;
transition:500ms all;
}
.popup.is-visible {
opacity: 1;
visibility: visible;
transition:1s all;
}
.popup-container {
transform:translateY(-50%);
transition:500ms all;
position: relative;
width: 60%;
margin: 2em auto;
top: 5%;
padding:5rem;
background: #FFF;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.is-visible .popup-container {
transform:translateY(0);
transition:500ms all;
}
.popup-container .popup-close {
position: absolute;
top: 8px;
font-size:0;
right: 8px;
width: 30px;
height: 30px;
}
.popup-container .popup-close::before,
.popup-container .popup-close::after {
content: '';
position: absolute;
top: 12px;
width: 14px;
height: 3px;
background-color: #8f9cb5;
}
.popup-container .popup-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
left: 8px;
}
.popup-container .popup-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 8px;
}
.popup-container .popup-close:hover:before,
.popup-container .popup-close:hover:after {
background-color:#35a785;
transition:300ms all;
}
/*==========================================================================
Site grid
========================================================================== */
.grid-this {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
padding: 30px;
}
.grid-this.with-spacing {
gap: 30px;
}
.grid-this .block img {
width: 100%;
height: auto;
vertical-align: top;
}
/* Grid spacing in slick slider */
.grid-this.with-spacing .slick-slide {
margin-right: 30px;
}
.grid-this.with-spacing .slick-list {
margin-right: -30px;
}
#media(max-width:1150px) {
.grid-this.with-spacing .slick-slide {
margin-right: 0;
}
.grid-this.with-spacing .slick-list {
margin-right: 0;
}
.page-id-324 .site-container{
padding-left: 8px !important;
padding-right: 8px !important;
}
}
/* -------------------------------------------------------------
/
/ Main Cat Container
/
/ -------------------------------------------------------------*/
.main-cat-container{
Padding: 0px;
background-color: #fff;
border-style: solid;
border-width: 3px;
border-color:#e9ecf2;
transition:all 1s ease !important;
}
.main-cat-container:hover{
box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
transition:all 1s ease !important;
}
.main-cat-title{
padding-top: 12px;
font-size:22px;
color:#38507b;
text-align: center;
}
.main-cat-container:hover i{
color:#0e1932;
}
.mc-icons{
text-align: center;
}
.mc-icons i{
font-size:45px;
}
.choice-p{
color:#343a40;
font-size:22px;
font-weight: bold;
}
.custom-hr-spacing{
margin-top: 45px !important;
margin-bottom: 45px !important;
}
.faux-btn-container{
text-align: center !important;
margin-top: 20px !important;
}
.faux-btn{
background-color:#4cb150;
padding: 15px 35px;
color: #FFF;
transition:all 1s ease !important;
border-radius: 8px;
}
.faux-btn:hover{
background-color:#59cf5d;
transition:all 1s ease !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid-this with-spacing margins-fix">
<div>
<a href="#0" id="project01" class="info popup-trigger" title="info">
<div style="padding-bottom: 50px;" class="main-cat-container">
<div class="mc-icons" data-aos="flip-left" data-aos-delay="50" aos-duration="500"><img
src="https://gilbert.level10designdev.com/wp-content/uploads/2021/12/Gilbert-Design-Build-Before-After-Kitchen-Remodel-Bradenton-Florida.jpg"
width=100% height=auto></div>
<h3 class="main-cat-title">vEITH</h3>
<div class="faux-btn-container"><span class="faux-btn">See Project</span></div>
</div>
</a>
<div class="popup" role="alert">
<div class="popup-container">
Close
[project01]
</div>
</div>
</div>
<div>
<a href="#0" id="project02" class="info popup-trigger" title="info">
<div style="padding-bottom: 50px;" class="main-cat-container">
<div class="mc-icons" data-aos="flip-left" data-aos-delay="50" aos-duration="500"><img
src="https://gilbert.level10designdev.com/wp-content/uploads/2021/12/Gilbert-Design-Build-Before-After-Kitchen-Remodel-Bradenton-Florida.jpg"
width=100% height=auto></div>
<h3 class="main-cat-title">vEITH</h3>
<div class="faux-btn-container"><span class="faux-btn">See Project</span></div>
</div>
</a>
<div class="popup" role="alert">
<div class="popup-container">
Close
[project02]
</div>
</div>
</div>
<div>.</div>
</div>

Hi what you need is to get the clicker, then find the pop in the parent of the clicker see below:
//open popup
$('.popup-trigger').on('click', function(event){
event.preventDefault();
// Next line is what changed.
$(this).parent().find(".popup").addClass('is-visible');
});

CSS Filter Blur 0 Affects Box-Shadow to Not Display

I have a box that scales to 1.1x when hovered, but because the text becomes blurry, I used filter: blur(0) and that solved the issue (only to FireFox) . By using filter: blur(0) on the parent, the box-shadow property on the children elements stopped working.
I tried using a before and after pseudo-element but that didn't work either. Is there anything I can do to fix my issue?
function myFunction(e) {
if (e.style.transform === "rotateY(180deg)") e.style.transform = "rotateY(0)";
else e.style.transform = "rotateY(180deg)";
}
body{background:mistyrose; padding: 50px;}
.r_card {
height: 250px;
width: 250px;
perspective: 500px;
transition: transform 0.25s;
filter: blur(0);
}
.r_card:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.r_card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: all .2s ease-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.r_card-inner .r_card-header h3 {
font-size: 26px;
}
.r_card-inner .r_card-header p {
margin: 13px 0;
}
.r_card-inner .r_card-description {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.r_card-inner .r_card-description p {
margin: 15px 0;
}
.r_card:hover .r_card-inner {
box-shadow: 2px 2px 1px -3px black;
}
.r_card-front,
.r_card-back {
background: #ffffff;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
padding: 10px 30px 30px;
border-bottom: 5px solid #E66343;
}
.r_card-front {
color: black;
transform: rotateY(0deg);
}
.r_card-front .r_card-links {
display: flex;
justify-content: space-around;
margin-top: 5px;
font-weight: 600;
font-size: 15px;
}
.r_card-front .r_card-links a {
cursor: pointer;
padding: 6px 10px;
color: #ffffff;
border-radius: 2px;
background: #E66343;
}
.r_card-back {
transform: rotateY(180deg);
}
.r_card3 {
display: grid;
grid-template: repeat(3, 1fr)/auto;
}
<div class="r_card">
<div class="r_card-inner" onclick="myFunction(this)" style="transform: rotateY(0deg);">
<div class="r_card-front r_card3">
<div class="r_card-header">
<h3>Standard</h3>
<p>Standard</p>
</div>
<div class="r_card-image"><img src="#">></div>
<div class="r_card-description">
<p>P Tag</p>
<div class="r_card-links">
More Info<br>
More Info
</div>
</div>
</div>
<div class="r_card-back">
<h1>Peter</h1>
<p>Art.</p>
<p>Ext</p>
</div>
</div>
</div>
Weirdly enough, the code is not the same as what I have but the code is similar. From this result, they are issues I faced while modifying the card like the position of the card when flipping, the text still being blurry, and the drop shadow not appearing.
Thank you.
Chavez

Add
filter: drop-shadow(1px 10px 4px #696982);
to your card. This way you can have both the blur and the shadow around your element.
function myFunction(e) {
if (e.style.transform === "rotateY(180deg)") e.style.transform = "rotateY(0)";
else e.style.transform = "rotateY(180deg)";
}
body{background:mistyrose; padding: 50px;}
.r_card {
height: 250px;
width: 250px;
perspective: 500px;
transition: transform 0.25s;
filter: blur(0);
}
.r_card:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.r_card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: all .2s ease-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.r_card-inner .r_card-header h3 {
font-size: 26px;
}
.r_card-inner .r_card-header p {
margin: 13px 0;
}
.r_card-inner .r_card-description {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.r_card-inner .r_card-description p {
margin: 15px 0;
}
.r_card:hover .r_card-inner {
box-shadow: 2px 2px 1px -3px black;
}
.r_card-front,
.r_card-back {
background: #ffffff;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
padding: 10px 30px 30px;
border-bottom: 5px solid #E66343;
}
.r_card-front {
color: black;
transform: rotateY(0deg);
filter: drop-shadow(1px 10px 4px #696982);
}
.r_card-front .r_card-links {
display: flex;
justify-content: space-around;
margin-top: 5px;
font-weight: 600;
font-size: 15px;
}
.r_card-front .r_card-links a {
cursor: pointer;
padding: 6px 10px;
color: #ffffff;
border-radius: 2px;
background: #E66343;
}
.r_card-back {
transform: rotateY(180deg);
}
.r_card3 {
display: grid;
grid-template: repeat(3, 1fr)/auto;
}
<div class="r_card">
<div class="r_card-inner" onclick="myFunction(this)" style="transform: rotateY(0deg);">
<div class="r_card-front r_card3">
<div class="r_card-header">
<h3>Standard</h3>
<p>Standard</p>
</div>
<div class="r_card-image"><img src="#">></div>
<div class="r_card-description">
<p>P Tag</p>
<div class="r_card-links">
More Info<br>
More Info
</div>
</div>
</div>
<div class="r_card-back">
<h1>Peter</h1>
<p>Art.</p>
<p>Ext</p>
</div>
</div>
</div>

Why does my <a> element appear before its parent div is toggled

Basically the elements within my nav dropdown menu are displaying before its parent div has been toggled on using JQuery.toggleClass().
This is a simple problem but for whatever reason Im just hitting my head against the wall.
HTML:
<div id="navCont">
<div class="burger">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="nav">
home
work
cont
</div>
See JS fiddle: https://jsfiddle.net/ywkxyjx3/1/
I have tried a few obvious solutions within the CSS/Jquery such as settings the visibility to hidden or display none and toggling it. All of which has failed.
If anyone has a better method of creating the hamburger dropdown I would appreciate it.
Thanks

Because your container contains an overflowing element:
.nav {
position: absolute;
display: block;
height: 0px;
overflow: hidden; // Change this.
float: right;
top: 55px;
opacity: 1;
text-align: center;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
Technically, your solution works, but if we use Chrome's DevTools, we see that the elements are overflowing from the 0 height parent container. Adding overflow: hidden to the parent hides them.
Working snippet:
$(".burger").click(function() {
$(".nav").toggleClass("show", 900);
$(".burger").toggleClass("change");
});
#navCont {
width: 47px;
height: auto;
float: right;
}
/*Dropdown Nav*/
.nav {
position: absolute;
display: block;
overflow: hidden;
height: 0px;
float: right;
top: 55px;
opacity: 99;
text-align: center;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.nav a {
color: black;
text-decoration: none;
}
.show {
height: auto;
max-height: 999px;
}
.burger {
/* box around hamburger. Has onclick function*/
display: inline-block;
position: relative;
float: right;
padding: 5px;
cursor: pointer;
}
/*Individual lines of burger*/
.bar1,
.bar2,
.bar3 {
width: 36px;
height: 4px;
border-radius: 2px;
background-color: #95449a;
margin: 6px 0;
/*seperate the lines*/
transition: 1s;
/*time taken for any animation to take place */
}
/*in html classlist.toggle(change)*/
.change .bar1 {
-webkit-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
.change .bar2 {
opacity: 0;
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
.change .bar3 {
-webkit-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="navCont">
<div class="burger">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="nav">
home
work
cont
</div>
</div>

Check this if it help at your end, this is different from your setup.
I hope it help you at your end.
Here is the complete code :
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
I hope it works for you.
Thanks!

just add
height:0px;
overflow:hidden;
to your .nav class
fiddle

Do you want something like this?
Differences:
Animated max-height instead of height.
Added overflow: hidden to the .nav element.
Added CSS transition duration and easing.
// first, get the max-height on page load
$(document).ready(function(){
$(".nav").css("max-height", $(".nav").height()).addClass("zero");
});
$(".burger").click(function() {
// set max-height to 0 or remove the limitation
$(".nav").toggleClass("zero");
$(".burger").toggleClass("change");
});
#navCont {
width: 47px;
height: auto;
float: right;
}
/*Dropdown Nav*/
.nav {
position: absolute;
display: block;
float: right;
top: 55px;
opacity: 99;
text-align: center;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
transition: max-height 0.9s linear;
overflow: hidden;
}
.nav a {
color: black;
text-decoration: none;
}
.zero {
max-height: 0 !important;
}
.burger {
/* box around hamburger. Has onclick function*/
display: inline-block;
position: relative;
float: right;
padding: 5px;
cursor: pointer;
}
/*Individual lines of burger*/
.bar1,
.bar2,
.bar3 {
width: 36px;
height: 4px;
border-radius: 2px;
background-color: #95449a;
margin: 6px 0;
/*seperate the lines*/
transition: 1s;
/*time taken for any animation to take place */
}
/*in html classlist.toggle(change)*/
.change .bar1 {
-webkit-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
.change .bar2 {
opacity: 0;
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
.change .bar3 {
-webkit-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navCont">
<div class="burger">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="nav">
home
work
cont
</div>
</div>

.nav {
position: absolute;
display: block;
height: 0px;
float: right;
top: 55px;
opacity: 99;
text-align: center;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
Maybe cause you display them? Toggle between display none and block?