We Keep Coding

Buttons don't work after creating a Modal

I'm working on a project and I need to add a modal to it, before creating my modal, Buttons were working fine and functions were executing normaly, but after creating the modal, only the modal buttons are working, and the page buttons don't, I tried removing the html of the modal and they worked fine(that's how I understood that problem is with the modal), I also tried to remove the overlay but nothing changed .
I've just tried to remove the css of the modal and the overlay and It's working fine, so maybe there's a problem there ?
Here's the code of the modal:
//modal part
const modal = document.querySelector('.modal');
const overlay = document.querySelector('#overlay');
const closeModalBtn = document.querySelector('.close-btn');
const backProjectBtn = document.querySelector('.join-btn');
const selectRewardBtn = document.querySelector('.select-reward-btn');
backProjectBtn.addEventListener('click', openModal)
function openModal(){
modal.classList.add('active');
overlay.classList.add('active');
}
closeModalBtn.addEventListener('click', closeModal);
function closeModal(){
modal.classList.remove('active');
overlay.classList.remove('active');
}
/* modal styling*/
.modal{
background: white;
border: 1px solid white;
border-radius: 15px;
padding: 30px;
width: 60%;
position: absolute;
top: 170px;
z-index: 10;
opacity: 0;
}
.modal.active{
opacity: 1;
}
.modal-header{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#overlay{
background: hsla(0, 0%, 48%, 0.5);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
}
#overlay.active{
opacity: 1;
pointer-events: none;
}
.close-btn{
background: none;
font-size: 2rem;
font-weight: bolder;
border: none;
cursor: pointer;
}
.pledging-block{
display: flex;
flex-direction: row;
align-items: flex-start;
width: 90%;
border: 0.5px solid hsl(0, 0%, 80%);
border-radius: 15px;
margin-top: 30px;
margin-bottom: 30px;
padding: 20px;
}
span{
font-weight: lighter;
color: hsl(176, 50%, 47%);
margin-left: 5px;
font-size: 1.1rem;
}
.header-infos-mahogany{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.title{
font-weight: bolder;
font-size: 1.5rem;
}
.money-block{
border-top: 0.5px solid hsl(0, 0%, 80%);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
opacity: 0;
}
.infos-mahogany-pladging, .black-pledging-radio{
display: flex;
flex-direction: column;
}
.left{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.header-infos-bamboo, .header-infos-black, .header-infos-mahogany{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.enter-value{
width: 25%;
border: hsl(176, 50%, 47%) 1px solid;
border-radius: 25px;
font-size: 1.3rem;
padding-top: 7px;
padding-bottom: 7px;
}
.radio-label{
width: 25px;
height: 25px;
border: 1px solid hsl(176, 50%, 47%);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.radio-label .checkmark{
width: calc(100% - 5%);
height: calc(100% - 5%);
background-color: hsl(176, 50%, 47%);
border-radius: 50%;
display: none;
}
.radio-label input{
display: none;
}
.radio-label input:checked + .checkmark{
display: inline-block;
}
.label-part{
width: 10%;
}
.mahogany-pledging{
opacity: 0.5;
pointer-events: none;
}
<div class="interactive-div">
<button class="joinbtn">Backthisproject</button>
<button class="bookmark-btn"><img src="images/icon-bookmark.svg" class="bookmark-icon"><div class="text">Bookmark</div></button>
</div>
<div class="modal" >
<div class="modal-header">
<h1>Back this project </h1>
<button class="close-btn">×</button>
</div>
<p>Want to support us in bringing Mastercraft Bamboo Monitor Riser out in the world?</p>
<div class="no-reward-pledging pledging-block">
<div class="label-part">
<label class="radio-label">
<input type="radio" id="no-reward-pledging-radio" name="radio">
<span class="checkmark"></span>
</label>
</div>
<div class="infos-no-reward">
<div class="title">Plegde with no reward</div>
<p>Choose to support us without a reward if you simply believe in our project. As a backer, you will be signed up to receive product updates via email.</p>
<div class="money-block">
<p>Enter your plegde</p>
<div class="entering-money">
<input type="number" class="enter-value">
<button class="continue-btn">Continue</button>
</div>
</div>
</div>
</div>
<div class="bamboo-pledging pledging-block">
<div class="label-part">
<label class="radio-label">
<input type="radio" id="no-reward-pledging-radio" name="radio">
<span class="checkmark"></span>
</label>
</div>
<div class="infos-bamboo-pladging">
<div class="header-infos-bamboo">
<div class="title">Bamboo Stand <span> Pledge $25 or more</span></div>
<div class="left">
<div class="num-left">101</div>
<p class="left">left</p>
</div>
</div>
<p>You get an ergonomic stand made of natural bamboo. You've helped us launch our promotional campaign, and you’ll be added to a special Backer member list..</p>
<div class="money-block">
<p>Enter your plegde</p>
<div class="entering-money">
<input type="number" class="enter-value">
<button class="continue-btn">Continue</button>
</div>
</div>
</div>
</div>
<!-- I removed some elements as they are almost identical -->
I removed some elements as they are almost identical

I solved the problem by changing the css of my modal
.modal{
background: white;
border: 1px solid white;
border-radius: 15px;
padding: 30px;
width: 60%;
position: absolute;
top: 100%;
left: 50%;
z-index: 10;
transform: translate(-50%, -50%) scale(0);
}
.modal.active{
transform: translate(-50%, -50%) scale(1);
}

why li element move on hover of button?

I am trying to make a simple demo li elements Which is horizontal center followed by Play or Pause button (see attached image ).I am able to make this using Flexbox properties. but facing few issue
Issue:
My li elements are moving or changing it position when I hover the Button.
conditions
we can't give hardcoded width to TEXT or hover text or PLAY or PAUSE .Text can be as big as possible ?
here is my code
https://jsbin.com/kobezulipe/edit?html,css,output
li {
list-style:none;
}
.abc{
display: flex;
align-items: center;
margin: 0 auto;
width: 100%;
justify-content: center;
}
.list{
overflow: hidden;
left: 0;
list-style: none;
display: -ms-flexbox;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
margin: 0;
}
.list li{
width: 52px;
margin: 0 9px;
}
.list li button{
border: 1px solid #3A3631;
width: 52px;
}
.p{
position: relative;
height: 100%;
display: flex;
align-self: center;
align-items: center;
width: initial;
left: 18px;
margin-bottom: 0;
}
.container {
padding: 8px;
border: 1px solid;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s linear;
}
.text {
display: none;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 20px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 10px 0 10px 20px;
padding: 0
}
.button.paused {
border-style: double;
border-width: 0px 0 0px 20px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
.container:hover span {
display: inline;
}
<div class="abc">
<ul class='list'>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
</ul>
<div class="p">
<div class="container">
<button class='button'>
</button>
<span class="text">Play</span>
</div>
</div>
</div>
Attached expected output
Answer pic

It's moving because the flexbox in .abc justify-content: center. When the width of the button changes, everything moves to stay centered.
If you change that to start it will not move.
Alternatively, if you don't want the content to move and you want to keep it centered, and you can't use a hard-coded width, you can try using an overlay. It won't move when you hover, though it might cover up anything next to it:
add a second button next to the first one. remove the text from the original.
set this button to position: absolute so it's positioned above the layout. the parent is already position: relative
only display the overlay during .p:hover. Hide the original button with visibility: hidden so it keeps its width and height.
Example:
li {
list-style:none;
}
.abc{
display: flex;
align-items: center;
margin: 0 auto;
width: 100%;
justify-content: center;
}
.list{
overflow: hidden;
left: 0;
list-style: none;
display: -ms-flexbox;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
margin: 0;
}
.list li{
width: 52px;
margin: 0 9px;
}
.list li button{
border: 1px solid #3A3631;
width: 52px;
}
.p{
position: relative;
height: 100%;
display: flex;
align-self: center;
align-items: center;
width: initial;
left: 18px;
margin-bottom: 0;
}
.container {
display: inline-flex;
}
.container, .overlay {
padding: 8px;
border: 1px solid;
align-items: center;
justify-content: center;
}
.overlay {
position: absolute;
left: 0;
top: 0;
flex-direction: row;
display: none;
transition: all 0.2s linear;
}
.p:hover .overlay {
display: inline-flex;
}
.p:hover .container {
visibility: hidden;
}
.text {
white-space: nowrap;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 20px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 10px 0 10px 20px;
padding: 0
overflow: visible;
}
.button.paused {
border-style: double;
border-width: 0px 0 0px 20px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
.container:hover span {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="abc">
<ul class='list'>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
</ul>
<div class="p">
<div class="container">
<button class='button'>
</button>
</div>
<div class="overlay">
<button class='button'>
</button>
<span class="text">Play, this can be very long</span>
</div>
</div>
</div>
</body>

With #kid-jokers answer you can add white-space: nowrap; to container div to allow words to span on one line.
var btn = document.querySelector(".button");
btn.addEventListener('click',function(){
btn.classList.toggle('paused');
document.querySelector(".button");
})
li {
list-style:none;
}
.abc{
display: flex;
align-items: center;
margin: 0 auto;
width: 100%;
justify-content: center;
}
.list{
overflow: hidden;
left: 0;
list-style: none;
display: -ms-flexbox;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
margin: 0;
}
.list li{
width: 52px;
margin: 0 9px;
}
.list li button{
border: 1px solid #3A3631;
width: 52px;
}
.p{
position: relative;
height: 100%;
display: flex;
align-self: center;
align-items: center;
width: 52px;
left: 18px;
margin-bottom: 0;
}
.container {
padding: 8px;
border: 1px solid;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s linear;
}
.text {
display: none;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 20px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 10px 0 10px 20px;
padding: 0
}
.button.paused {
border-style: double;
border-width: 0px 0 0px 20px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
.container:hover span {
display: block;
white-space: nowrap;
}
<div class="abc">
<ul class='list'>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
</ul>
<div class="p">
<div class="container">
<button class='button'>
</button>
<span class="text">Play WHAM! - Jitterbug</span>
</div>
</div>
</div>

new answer: ↓
i rewrote the html. and the .p is positioned relative to the .list.
var btn = document.querySelector(".button");
btn.addEventListener("click", function () {
btn.classList.toggle("paused");
document.querySelector(".button");
});
li {
list-style: none;
}
.abc {
display: flex;
align-items: center;
margin: 0 auto;
width: 100%;
justify-content: center;
}
.list {
/* overflow: hidden; */
left: 0;
list-style: none;
display: -ms-flexbox;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
margin: 0;
position: relative;
}
.list li {
width: 52px;
margin: 0 9px;
}
.list li button {
border: 1px solid #3a3631;
width: 52px;
}
.p {
position: relative;
height: 100%;
display: flex;
align-self: center;
align-items: center;
width: initial;
/* left: 18px; */
margin-bottom: 0;
position: absolute;
right: -18px;
transform: translateX(100%);
}
.container {
padding: 8px;
border: 1px solid;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s linear;
}
.text {
display: none;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 20px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 10px 0 10px 20px;
padding: 0;
}
.button.paused {
border-style: double;
border-width: 0px 0 0px 20px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
.container:hover span {
display: inline;
}
<div class="abc">
<ul class="list">
<li>
<button><span></span></button>
</li>
<li>
<button><span></span></button>
</li>
<li>
<button><span></span></button>
</li>
<li>
<button><span></span></button>
</li>
<div class="p">
<div class="container">
<button class="button"></button>
<span class="text">Play longer longer longer</span>
</div>
</div>
</ul>
</div>
hope it can help you。
you can change the .p {width: initial;} to .p {width: 52px;}

Why backdrop filter: blur(5px) is breaking my design? [duplicate]

This question already has answers here:
Why does clip-path (and other properties) affect the stacking order (z-index) of elements later in DOM?
(1 answer)
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 1 year ago.
Today I am facing a vey weird issue in css backdrop-filter: blur(7px);
First look at first snippet
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: none;
font-family: "Roboto", sans-serif;
}
p {
color: white;
}
body {
background-color: black;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container {
max-width: 100%;
width: 550px;
background-color: #8f656514;
min-height: 400px;
margin: auto;
padding: 15px;
box-shadow: 0px 0px 8px 0.1px #393939;
margin: auto;
/* position: relative; */
display: flex;
align-items: center;
flex-direction: column;
}
.common {
margin: 35px 0px;
box-shadow: 0px 3px 5px 0px #7f5b5b;
padding: 10px 10px;
width: 100%;
height: 100px;
background-color: red;
/* display: contents; */
}
.in {
display: flex;
color: white;
border-radius: 100px;
align-items: center;
padding: 7px 10px;
background-color: #3a3b3c45;
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
box-shadow: 0px 0px 4px 0.5px #918b90;
height: 50px;
}
.bug {
height: 26px;
background-color: rebeccapurple;
/* position: absolute; */
/* width: 50%; */
bottom: 150px;
height: 100px;
width: 100px;
/* bottom: 500px; */
border-radius: initial;
}
<div class="container">
<div class="one common">
<p>First Container</p>
<div class="in">
<p>blurred container </p>
</div>
</div>
<div class="two common">
<p>second Container</p>
<div class="in bug">
blurred overflow
</div>
</div>
<div class="three common">
<p>Third Container</p>
<div class="in ">
<p>blurred container </p>
</div>
</div>
</div>
as You are seeing there are 3 containers .
every container have a blurred container by backdrop-filter: blur(7px);
but 2nd container's blurred element is overflowing the parent .
Till now everything is working fine .
First weird thing
by positioning absolute and moving overflowing container towards bottom , it is just lying under
the 3rd containers blurred element while it should be at the top of that blurred element
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: none;
font-family: "Roboto", sans-serif;
}
p {
color: white;
}
body {
background-color: black;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container {
max-width: 100%;
width: 550px;
background-color: #8f656514;
min-height: 400px;
margin: auto;
padding: 15px;
box-shadow: 0px 0px 8px 0.1px #393939;
margin: auto;
/* position: relative; */
display: flex;
align-items: center;
flex-direction: column;
}
.common {
margin: 35px 0px;
box-shadow: 0px 3px 5px 0px #7f5b5b;
padding: 10px 10px;
width: 100%;
height: 100px;
background-color: red;
/* display: contents; */
}
.in {
display: flex;
color: white;
border-radius: 100px;
align-items: center;
padding: 7px 10px;
background-color: #3a3b3c45;
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
box-shadow: 0px 0px 4px 0.5px #918b90;
height: 50px;
}
.bug {
height: 26px;
background-color: rebeccapurple;
position: absolute;
bottom: -142px;
height: 100px;
width: 100px;
/* bottom: 500px; */
border-radius: initial;
}
<div class="container">
<div class="one common">
<p>First Container</p>
<div class="in">
<p>blurred container </p>
</div>
</div>
<div class="two common">
<p>second Container</p>
<div class="in bug">
blurred overflow
</div>
</div>
<div class="three common">
<p>Third Container</p>
<div class="in ">
<p>blurred container </p>
</div>
</div>
</div>
to see the result please reset the bootom css attribute of .bug class according to your browser
How it's gone
I just removed the backdrop-filter property from 3 blurred container .
to see the result please reset the bootom css attribute of .bug class according to your browser
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: none;
font-family: "Roboto", sans-serif;
}
p {
color: white;
}
body {
background-color: black;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container {
max-width: 100%;
width: 550px;
background-color: #8f656514;
min-height: 400px;
margin: auto;
padding: 15px;
box-shadow: 0px 0px 8px 0.1px #393939;
margin: auto;
/* position: relative; */
display: flex;
align-items: center;
flex-direction: column;
}
.common {
margin: 35px 0px;
box-shadow: 0px 3px 5px 0px #7f5b5b;
padding: 10px 10px;
width: 100%;
height: 100px;
background-color: red;
/* display: contents; */
}
.in {
display: flex;
color: white;
border-radius: 100px;
align-items: center;
padding: 7px 10px;
background-color: #3a3b3c45;
/* -webkit-backdrop-filter: blur(7px); */
/* backdrop-filter: blur(7px); */
box-shadow: 0px 0px 4px 0.5px #918b90;
height: 50px;
}
.bug {
height: 26px;
background-color: rebeccapurple;
position: absolute;
bottom: 24%;
height: 100px;
width: 100px;
/* bottom: 500px; */
border-radius: initial;
}
<div class="container">
<div class="one common">
<p>First Container</p>
<div class="in">
<p>blurred container </p>
</div>
</div>
<div class="two common">
<p>second Container</p>
<div class="in bug">
blurred overflow
</div>
</div>
<div class="three common">
<p>Third Container</p>
<div class="in ">
<p>blurred container </p>
</div>
</div>
</div>
Another weird thing with backdrop filter is --
with backdrop filter the overflowing element is on the top of the first container's blurred element instead on the behind of it
to see the result please reset the bootom css attribute of .bug class according to your browser
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: none;
font-family: "Roboto", sans-serif;
}
p {
color: white;
}
body {
background-color: black;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container {
max-width: 100%;
width: 550px;
background-color: #8f656514;
min-height: 400px;
margin: auto;
padding: 15px;
box-shadow: 0px 0px 8px 0.1px #393939;
margin: auto;
/* position: relative; */
display: flex;
align-items: center;
flex-direction: column;
}
.common {
margin: 35px 0px;
box-shadow: 0px 3px 5px 0px #7f5b5b;
padding: 10px 10px;
width: 100%;
height: 100px;
background-color: red;
/* display: contents; */
}
.in {
display: flex;
color: white;
border-radius: 100px;
align-items: center;
padding: 7px 10px;
background-color: #3a3b3c45;
/* -webkit-backdrop-filter: blur(7px); */
backdrop-filter: blur(7px);
box-shadow: 0px 0px 4px 0.5px #918b90;
height: 50px;
}
.bug {
height: 26px;
background-color: rebeccapurple;
position: absolute;
/* bottom: 24%; */
height: 100px;
width: 100px;
bottom: 500px;
border-radius: initial;
}
<div class="container">
<div class="one common">
<p>First Container</p>
<div class="in">
<p>blurred container </p>
</div>
</div>
<div class="two common">
<p>second Container</p>
<div class="in bug">
blurred overflow
</div>
</div>
<div class="three common">
<p>Third Container</p>
<div class="in ">
<p>blurred container </p>
</div>
</div>
</div>
I have no idea what's going on here and why ???
Please help me to understand this

How to make element stretch vertically and not affect look?

I have a page that looks like this.
//$(document).ready(function() {
// function viewport_height() {
// var window_height = $(window).height();
// $('#wrapper').height(window_height);
// $('#chat-area').height = $(window_height);
// }
// viewport_height();
// $(window).resize(function() {
// viewport_height();
// });
//});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #f7f7f7;
padding: 0 10px;
}
.wrapper{
background: #fff;
max-width: 450px;
width: 100%;
border-radius: 16px;
box-shadow:
0 0 128px 0 rgba(0, 0, 0, 0.1),
0 32px 64px -48px rgba(0, 0, 0, 0.5);
}
/* Login & Signup Form CSS Start */
.form{
padding: 25px 30px;
}
.form header{
font-size: 25px;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 1px solid #e6e6e6;
}
.form form{
margin: 20px 0;
}
.form form .error-text{
color: #721c24;
padding: 8px 10px;
text-align: center;
border-radius: 5px;
background: #f8d7da;
border: 1px solid #f5c6cb;
margin-bottom: 10px;
display: none;
}
.form form .name-details{
display: flex;
}
.form .name-details .field:first-child{
margin-right: 10px;
}
.form .name-details .field:last-child{
margin-left: 10px;
}
.form form .field{
display: flex;
margin-bottom: 10px;
flex-direction: column;
position: relative;
}
.form form .field label{
margin-bottom: 2px;
}
.form form .input input{
height: 40px;
width: 100%;
font-size: 16px;
padding: 0 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.form form .field input{
outline: none;
}
.form form .image input{
font-size: 17px;
}
.form form .button input{
height: 45px;
border: none;
color: #fff;
font-size: 17px;
background: #333;
border-radius: 5px;
cursor: pointer;
margin-top: 13px;
}
.form form .field i{
position: absolute;
right: 15px;
top: 70%;
color: #ccc;
cursor: pointer;
transform: translateY(-50%);
}
.form form .field i.active::before{
color: #333;
content: "\f070";
}
.form .link{
text-align: center;
margin: 10px 0;
font-size: 17px;
}
.form .link a{
color: #333;
}
.form .link a:hover{
text-decoration: underline;
}
/* Users List CSS Start */
.users{
padding: 25px 30px;
}
.users header,
.users-list a{
display: flex;
align-items: center;
padding-bottom: 20px;
border-bottom: 1px solid #e6e6e6;
justify-content: space-between;
}
.wrapper img{
object-fit: cover;
border-radius: 50%;
}
.users header img{
height: 50px;
width: 50px;
}
:is(.users, .users-list) .content{
display: flex;
align-items: center;
}
:is(.users, .users-list) .content .details{
color: #000;
margin-left: 20px;
}
:is(.users, .users-list) .details span{
font-size: 18px;
font-weight: 500;
}
.users header .logout{
display: block;
background: #333;
color: #fff;
outline: none;
border: none;
padding: 7px 15px;
text-decoration: none;
border-radius: 5px;
font-size: 17px;
}
.users .search{
margin: 20px 0;
display: flex;
position: relative;
align-items: center;
justify-content: space-between;
}
.users .search .text{
font-size: 18px;
}
.users .search input{
position: absolute;
height: 42px;
width: calc(100% - 50px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6;
outline: none;
border-radius: 5px 0 0 5px;
opacity: 0;
pointer-events: none;
transition: all 0.2s ease;
}
.users .search input.show{
opacity: 1;
pointer-events: auto;
}
.users .search button{
position: relative;
z-index: 1;
width: 47px;
height: 42px;
font-size: 17px;
cursor: pointer;
border: none;
background: #fff;
color: #333;
outline: none;
border-radius: 0 5px 5px 0;
transition: all 0.2s ease;
}
.users .search button.active{
background: #333;
color: #fff;
}
.search button.active i::before{
content: '\f00d';
}
.users-list{
max-height: 350px;
overflow-y: auto;
}
:is(.users-list, .chat-box)::-webkit-scrollbar{
width: 0px;
}
.users-list a{
padding-bottom: 10px;
margin-bottom: 15px;
padding-right: 15px;
border-bottom-color: #f1f1f1;
}
.users-list a:last-child{
margin-bottom: 0px;
border-bottom: none;
}
.users-list a img{
height: 40px;
width: 40px;
}
.users-list a .details p{
color: #67676a;
}
.users-list a .status-dot{
font-size: 12px;
color: #468669;
padding-left: 10px;
}
.users-list a .status-dot.offline{
color: #ccc;
}
/* Chat Area CSS Start */
.chat-area header{
display: flex;
align-items: center;
padding: 18px 30px;
}
.chat-area header .back-icon{
color: #333;
font-size: 18px;
}
.chat-area header img{
height: 45px;
width: 45px;
margin: 0 15px;
}
.chat-area header .details span{
font-size: 17px;
font-weight: 500;
}
.chat-box{
position: relative;
min-height: 500px;
max-height: 500px;
overflow-y: auto;
padding: 10px 30px 20px 30px;
background: #f7f7f7;
box-shadow: inset 0 32px 32px -32px rgb(0 0 0 / 5%),
inset 0 -32px 32px -32px rgb(0 0 0 / 5%);
}
.chat-box .text{
position: absolute;
top: 45%;
left: 50%;
width: calc(100% - 50px);
text-align: center;
transform: translate(-50%, -50%);
}
.chat-box .chat{
margin: 15px 0;
}
.chat-box .chat p{
word-wrap: break-word;
padding: 8px 16px;
box-shadow: 0 0 32px rgb(0 0 0 / 8%),
0rem 16px 16px -16px rgb(0 0 0 / 10%);
}
.chat-box .outgoing{
display: flex;
}
.chat-box .outgoing .details{
margin-left: auto;
max-width: calc(100% - 130px);
}
.outgoing .details p{
background: #333;
color: #fff;
border-radius: 18px 18px 0 18px;
}
.chat-box .incoming{
display: flex;
align-items: flex-end;
}
.chat-box .incoming img{
height: 35px;
width: 35px;
}
.chat-box .incoming .details{
margin-right: auto;
margin-left: 10px;
max-width: calc(100% - 130px);
}
.incoming .details p{
background: #fff;
color: #333;
border-radius: 18px 18px 18px 0;
}
.typing-area{
padding: 18px 30px;
display: flex;
justify-content: space-between;
}
.typing-area input{
height: 45px;
width: calc(100% - 58px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6;
outline: none;
border-radius: 5px 0 0 5px;
}
.typing-area button{
color: #fff;
width: 55px;
border: none;
outline: none;
background: #333;
font-size: 19px;
cursor: pointer;
opacity: 0.7;
pointer-events: none;
border-radius: 0 5px 5px 0;
transition: all 0.3s ease;
}
.typing-area button.active{
opacity: 1;
pointer-events: auto;
}
/* Responive media query */
#media screen and (max-width: 450px) {
.form, .users{
padding: 20px;
}
.form header{
text-align: center;
}
.form form .name-details{
flex-direction: column;
}
.form .name-details .field:first-child{
margin-right: 0px;
}
.form .name-details .field:last-child{
margin-left: 0px;
}
.users header img{
height: 45px;
width: 45px;
}
.users header .logout{
padding: 6px 10px;
font-size: 16px;
}
:is(.users, .users-list) .content .details{
margin-left: 15px;
}
.users-list a{
padding-right: 10px;
}
.chat-area header{
padding: 15px 20px;
}
.chat-box{
min-height: 400px;
padding: 10px 15px 15px 20px;
}
.chat-box .chat p{
font-size: 15px;
}
.chat-box .outogoing .details{
max-width: 230px;
}
.chat-box .incoming .details{
max-width: 265px;
}
.incoming .details img{
height: 30px;
width: 30px;
}
.chat-area form{
padding: 20px;
}
.chat-area form input{
height: 40px;
width: calc(100% - 48px);
}
.chat-area form button{
width: 45px;
}
}
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Online Chat App | Hello World</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head><body>
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>-->
<div class="wrapper" id="wrapper">
<section class="chat-area" id="chat-area">
<header>
<div class="details">
<span>User</span>
<p>Active now</p>
</div>
</header>
<div class="chat-box">
<div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat outgoing">
<div class="details">
<p>tst</p>
</div>
</div><div class="chat outgoing">
<div class="details">
<p>test</p>
</div>
</div><div class="chat outgoing">
<div class="details">
<p>test</p>
</div>
</div></div>
<form action="#" class="typing-area">
<input type="text" class="incoming_id" name="incoming_id" value="340930066" hidden="">
<input type="text" name="message" class="input-field" placeholder="Type a message here..." autocomplete="off">
<button><i class="fab fa-telegram-plane"></i></button>
</form>
</section>
</div>
</body></html>
I want the <div class="wrapper"> to resize vertically when height of the device doesn't fit. So when I shrink my browser to a smaller height it will look shrink with it. Also I want the look to stay. I tried to do display: flex; but it just made everything go everywhere. I can't seem to do it. I am trying to do it with JavaScript, but it doesn't work the way it should. Changing the viewport height does not help.

Is this what you are looking for? I wasn't 100% sure from the description
The only css I added are at the bottom of the css section
.chat-area {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.chat-area header,
.chat-area typing-area {
flex-shrink: 0;
}
.chat-box {
flex-grow: 1;
min-height: auto;
}
The above is the only css I added, the min-height: auto; was to override your original code. Original code is not modified
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #f7f7f7;
padding: 0 10px;
}
.wrapper {
background: #fff;
max-width: 450px;
width: 100%;
border-radius: 16px;
box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1), 0 32px 64px -48px rgba(0, 0, 0, 0.5);
}
/* Login & Signup Form CSS Start */
.form {
padding: 25px 30px;
}
.form header {
font-size: 25px;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 1px solid #e6e6e6;
}
.form form {
margin: 20px 0;
}
.form form .error-text {
color: #721c24;
padding: 8px 10px;
text-align: center;
border-radius: 5px;
background: #f8d7da;
border: 1px solid #f5c6cb;
margin-bottom: 10px;
display: none;
}
.form form .name-details {
display: flex;
}
.form .name-details .field:first-child {
margin-right: 10px;
}
.form .name-details .field:last-child {
margin-left: 10px;
}
.form form .field {
display: flex;
margin-bottom: 10px;
flex-direction: column;
position: relative;
}
.form form .field label {
margin-bottom: 2px;
}
.form form .input input {
height: 40px;
width: 100%;
font-size: 16px;
padding: 0 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.form form .field input {
outline: none;
}
.form form .image input {
font-size: 17px;
}
.form form .button input {
height: 45px;
border: none;
color: #fff;
font-size: 17px;
background: #333;
border-radius: 5px;
cursor: pointer;
margin-top: 13px;
}
.form form .field i {
position: absolute;
right: 15px;
top: 70%;
color: #ccc;
cursor: pointer;
transform: translateY(-50%);
}
.form form .field i.active::before {
color: #333;
content: "\f070";
}
.form .link {
text-align: center;
margin: 10px 0;
font-size: 17px;
}
.form .link a {
color: #333;
}
.form .link a:hover {
text-decoration: underline;
}
/* Users List CSS Start */
.users {
padding: 25px 30px;
}
.users header,
.users-list a {
display: flex;
align-items: center;
padding-bottom: 20px;
border-bottom: 1px solid #e6e6e6;
justify-content: space-between;
}
.wrapper img {
object-fit: cover;
border-radius: 50%;
}
.users header img {
height: 50px;
width: 50px;
}
:is(.users,
.users-list) .content {
display: flex;
align-items: center;
}
:is(.users,
.users-list) .content .details {
color: #000;
margin-left: 20px;
}
:is(.users,
.users-list) .details span {
font-size: 18px;
font-weight: 500;
}
.users header .logout {
display: block;
background: #333;
color: #fff;
outline: none;
border: none;
padding: 7px 15px;
text-decoration: none;
border-radius: 5px;
font-size: 17px;
}
.users .search {
margin: 20px 0;
display: flex;
position: relative;
align-items: center;
justify-content: space-between;
}
.users .search .text {
font-size: 18px;
}
.users .search input {
position: absolute;
height: 42px;
width: calc(100% - 50px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6;
outline: none;
border-radius: 5px 0 0 5px;
opacity: 0;
pointer-events: none;
transition: all 0.2s ease;
}
.users .search input.show {
opacity: 1;
pointer-events: auto;
}
.users .search button {
position: relative;
z-index: 1;
width: 47px;
height: 42px;
font-size: 17px;
cursor: pointer;
border: none;
background: #fff;
color: #333;
outline: none;
border-radius: 0 5px 5px 0;
transition: all 0.2s ease;
}
.users .search button.active {
background: #333;
color: #fff;
}
.search button.active i::before {
content: '\f00d';
}
.users-list {
max-height: 350px;
overflow-y: auto;
}
:is(.users-list,
.chat-box)::-webkit-scrollbar {
width: 0px;
}
.users-list a {
padding-bottom: 10px;
margin-bottom: 15px;
padding-right: 15px;
border-bottom-color: #f1f1f1;
}
.users-list a:last-child {
margin-bottom: 0px;
border-bottom: none;
}
.users-list a img {
height: 40px;
width: 40px;
}
.users-list a .details p {
color: #67676a;
}
.users-list a .status-dot {
font-size: 12px;
color: #468669;
padding-left: 10px;
}
.users-list a .status-dot.offline {
color: #ccc;
}
/* Chat Area CSS Start */
.chat-area header {
display: flex;
align-items: center;
padding: 18px 30px;
}
.chat-area header .back-icon {
color: #333;
font-size: 18px;
}
.chat-area header img {
height: 45px;
width: 45px;
margin: 0 15px;
}
.chat-area header .details span {
font-size: 17px;
font-weight: 500;
}
.chat-box {
position: relative;
min-height: 500px;
max-height: 500px;
overflow-y: auto;
padding: 10px 30px 20px 30px;
background: #f7f7f7;
box-shadow: inset 0 32px 32px -32px rgb(0 0 0 / 5%), inset 0 -32px 32px -32px rgb(0 0 0 / 5%);
}
.chat-box .text {
position: absolute;
top: 45%;
left: 50%;
width: calc(100% - 50px);
text-align: center;
transform: translate(-50%, -50%);
}
.chat-box .chat {
margin: 15px 0;
}
.chat-box .chat p {
word-wrap: break-word;
padding: 8px 16px;
box-shadow: 0 0 32px rgb(0 0 0 / 8%), 0rem 16px 16px -16px rgb(0 0 0 / 10%);
}
.chat-box .outgoing {
display: flex;
}
.chat-box .outgoing .details {
margin-left: auto;
max-width: calc(100% - 130px);
}
.outgoing .details p {
background: #333;
color: #fff;
border-radius: 18px 18px 0 18px;
}
.chat-box .incoming {
display: flex;
align-items: flex-end;
}
.chat-box .incoming img {
height: 35px;
width: 35px;
}
.chat-box .incoming .details {
margin-right: auto;
margin-left: 10px;
max-width: calc(100% - 130px);
}
.incoming .details p {
background: #fff;
color: #333;
border-radius: 18px 18px 18px 0;
}
.typing-area {
padding: 18px 30px;
display: flex;
justify-content: space-between;
}
.typing-area input {
height: 45px;
width: calc(100% - 58px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6;
outline: none;
border-radius: 5px 0 0 5px;
}
.typing-area button {
color: #fff;
width: 55px;
border: none;
outline: none;
background: #333;
font-size: 19px;
cursor: pointer;
opacity: 0.7;
pointer-events: none;
border-radius: 0 5px 5px 0;
transition: all 0.3s ease;
}
.typing-area button.active {
opacity: 1;
pointer-events: auto;
}
/* Responive media query */
#media screen and (max-width: 450px) {
.form,
.users {
padding: 20px;
}
.form header {
text-align: center;
}
.form form .name-details {
flex-direction: column;
}
.form .name-details .field:first-child {
margin-right: 0px;
}
.form .name-details .field:last-child {
margin-left: 0px;
}
.users header img {
height: 45px;
width: 45px;
}
.users header .logout {
padding: 6px 10px;
font-size: 16px;
}
:is(.users,
.users-list) .content .details {
margin-left: 15px;
}
.users-list a {
padding-right: 10px;
}
.chat-area header {
padding: 15px 20px;
}
.chat-box {
min-height: 400px;
padding: 10px 15px 15px 20px;
}
.chat-box .chat p {
font-size: 15px;
}
.chat-box .outogoing .details {
max-width: 230px;
}
.chat-box .incoming .details {
max-width: 265px;
}
.incoming .details img {
height: 30px;
width: 30px;
}
.chat-area form {
padding: 20px;
}
.chat-area form input {
height: 40px;
width: calc(100% - 48px);
}
.chat-area form button {
width: 45px;
}
}
.chat-area {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.chat-area header,
.chat-area typing-area {
flex-shrink: 0;
}
.chat-box {
flex-grow: 1;
min-height: auto;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Online Chat App | Hello World</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<body>
<input id="hidden" type="hidden" value="7">
<div class="wrapper">
<section class="chat-area">
<header>
<i class="fas fa-arrow-left"></i>
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<span>Justin Skinner</span>
<p>Active now</p>
</div>
</header>
<div class="chat-box">
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat outgoing">
<div class="details">
<p>tst</p>
</div>
</div>
<div class="chat outgoing">
<div class="details">
<p>test</p>
</div>
</div>
<div class="chat outgoing">
<div class="details">
<p>test</p>
</div>
</div>
</div>
<form action="#" class="typing-area">
<input type="text" class="incoming_id" name="incoming_id" value="340930066" hidden="">
<input type="text" name="message" class="input-field" placeholder="Type a message here..." autocomplete="off">
<button><i class="fab fa-telegram-plane"></i></button>
</form>
</section>
</div>
<script src="javascript/chat.js"></script>
</body>
</html>

Here's how to do it with flexbox using this answer.
JSFiddle
body{
height:100vh
}
.wrapper{
height:100%;
}
.chat-area{
display: flex; /* displays flex-items (children) inline */
flex-direction: column; /* stacks them vertically */
height: 100%; /* needs to take the parents height, alternative: body {display: flex} */
}
.chat-box{
flex: 1; /* takes the remaining height of the "container" div */
overflow: auto; /* to scroll just the "main" div */
}

HTML/CSS hover affecting parent element +Jquery

I am testing my navigation bar for a project and I am using basic Html/css
and i have added Jquery so that the hover effect could affect the parent element.
$(document).ready(function () {
$(".nav-level-2").hover(
function () {
$("li>a").css("background", "white");
}
);
$(".nav-level-2").mouseleave(
function () {
$("li>a").css("background", "none");
});
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover {
display:block;
}
.row{
display: flex;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.list-container {
padding: 0px;
}
.col-lg-2{
flex-basis: 16.666666667%;
max-width: 16.666666667%;
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-flex: 0;
background: red;
margin-left: 5px;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
text-transform: uppercase;
color: #000;
letter-spacing: 1px;
margin-bottom: 20px;
font-size: 14px;
margin: 0 0 20px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div class="list-container shop col-lg-2">
<h3 class="heading"> Shop by</h3>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
What I am trying to achieve is when I hover over the red block,I am trying to make parent element ('What's New') to show with color #000 and background white;
SEE THIS IMAGE <--
I know that when i hover 'What's New' it does change color to white, but when I hover over redblock for navigation, the background disappears with 'What's New' disappearing with black background.

No need for JavaScript to do what you want. I think this is what you are looking for? Basically, I am using the :hover on the parent div to change the child element's background and colour.
.nav-whats-new:hover a {
background:white;
color:black;
}
Example:
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.nav-whats-new:hover a {
background:white;
color:black;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover {
display:block;
}
.row{
display: flex;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.list-container {
padding: 0px;
}
.col-lg-2{
flex-basis: 16.666666667%;
max-width: 16.666666667%;
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-flex: 0;
background: red;
margin-left: 5px;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
text-transform: uppercase;
color: #000;
letter-spacing: 1px;
margin-bottom: 20px;
font-size: 14px;
margin: 0 0 20px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div class="list-container shop col-lg-2">
<h3 class="heading"> Shop by</h3>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

See the edited jQuery. It's what I changed. Change background none to transparent and add the color css styles.
Is this what you wanted?
$(document).ready(function () {
$(".nav-level-2").hover(
function () {
$("li>a").css("background", "white");
$("li>a").css("color", "black");
}
);
$(".nav-level-2").mouseleave(
function () {
$("li>a").css("background", "transparent");
$("li>a").css("color", "white");
}
);
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover {
display:block;
}
.row{
display: flex;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.list-container {
padding: 0px;
}
.col-lg-2{
flex-basis: 16.666666667%;
max-width: 16.666666667%;
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-flex: 0;
background: red;
margin-left: 5px;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
text-transform: uppercase;
color: #000;
letter-spacing: 1px;
margin-bottom: 20px;
font-size: 14px;
margin: 0 0 20px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div class="list-container shop col-lg-2">
<h3 class="heading"> Shop by</h3>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>