Develop Reference

list has 8 items but the the last 4 items moves out from the blue background in testimonials-section

As i am running the html and css code the list of testimonials are 8 but , when i increased the size of the screen to 950px the list of 8 items start coming out of the background, so please can anyone give me the hint that where the code is wrong
const mobileBtn = document.getElementById('mobile-cta');
nav = document.querySelector('nav');
mobileBtnExit = document.getElementById('mobile-sta');
mobileBtn.addEventListener('click' , () => {
nav.classList.add('mobile-menu');
})
mobileBtnExit.addEventListener('click' , () => {
nav.classList.remove('mobile-menu');
})
:root {
--primary-color: #007af3;
}
body{
background: #F2F2F2;
margin: 0 ;
font-family: 'Poppins';
}
.navbar {
background: white;
padding: 1em;
.logo{
text-decoration: none;
font-weight: bold;
color: black ;
font-size: 1.2em;
span {
color: var(--primary-color);
}
}
nav{
display: none;
}
.container{
display: flex;
place-content: space-between;
}
.mobile-menu{
cursor: pointer;
}
}
a{
color: #444444;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
section{
padding: 5em 2em;
}
.hero{
text-align: center;
}
.left-col{
.subhead{
text-transform: uppercase;
font-weight: bold;
color: gray;
letter-spacing: .3em;
}
h1{
font-size: 2.5em;
line-height: 1.3em;
margin-top: .2em;
}
.primary-cta{
background: var(--primary-color);
color: white;
text-decoration: none;
padding: .6em 1.3em;
font-size: 1.4em;
border-radius: 5em;
font-weight: bold;
display: inline-block;
}
.watch-video-cta{
display: block;
margin-top: 1em;
img {
margin-right: .5em;
}
}
}
.hero-img{
width: 70% ;
margin-top: 3em;
}
section.features-section{
background: #20272e;
color: white;
}
ul.feature-list{
margin: 0;
padding-left: .1em;
display: grid;
grid-template-columns: repeat(auto-fit , minmax(19rem, 1fr));
li{
font-size: 1.1em;
margin-bottom: 1em;
margin-left: 2em;
position: relative;
&:before{
content: '';
left: -2em;
position: absolute;
width: 20px;
height: 20px;
background-image: url('../2021frontend/images/bullet.svg');
background-size: contain;
margin-right: .5em;
}
}
}
.features-section img{
display: none;
}
.testimonials-section{
background: var(--primary-color);
color: white;
li{
width: #006bd6;
text-align: center;
padding: 2em 1em;
width: 75%;
margin: 0 auto 5em auto;
border-radius: 1em;
img{
width: 5em;
height: 5em;
border: 5px solid #006bd6;
border-radius: 50%;
margin-top: -4.5em;
}
}
}
h2{
font-size: 2em;
}
label{
display: block;
font-size: 1.2em;
margin-bottom: .5em;
}
input, textarea{
width: 100%;
padding: .8em;
margin-bottom: 1em;
border-radius: .3em;
border: 1px solid gray;
box-sizing: border-box;
}
input[type="submit"]{
background-color: var(--primary-color);
color: white;
font-weight: bold;
font-size: 1.3em;
border: none;
margin-bottom: 5em;
border-radius: 5em;
display: inline-block;
padding: .8em 6.7em;
width: unset;
cursor: pointer;
}
iframe{
width: 100%;
height: 300px;
}
nav.mobile-menu{
display: block;
}
nav{
position: fixed;
z-index: 999;
width: 66%;
right: 0;
top: 0;
background: #20272e;
height: 100vh;
padding: 1em;
ul.primary-nav{
margin-top: 5em;
}
li{
a{
color:white;
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
&:hover{
font-weight: bold;
}
}
}
}
.mobile-mobile-closed {
float: right;
margin: .5em;
cursor: pointer;
}
//now here we desinging the pc version of the website
#media only screen and (min-width: 768px){
.mobile-menu, .mobile-menu-closed{
display: none;
}
.navbar .container{
display: grid;
grid-template-columns: 180px auto;
justify-content: unset;
}
.navbar nav{
display: flex;
justify-content: space-between;
background: none;
position: unset;
height: auto;
width: 100%;
padding: 0;
ul{
display: flex;
}
a{
color: black;
font-size: 1em;
padding: .1em 1em;
}
ul.primary-nav{
margin: 0;
}
li.current a{
font-weight: bold;
}
li.go-premium-cta a{
color: var(--primary-color);
border: 3px solid var(--primary-color);
font-weight: bold;
border-radius: 5em;
margin-top: -.2em;
&:hover{
background: var(--primary-color);
color: white;
}
}
}
}
#media only screen and (min-width: 950px) {
.container{
width: 950px;
margin: 0 auto;
}
section{
padding: 10em 4em;
}
.hero .container{
display: flex;
justify-content: space-between;
text-align: left;
.left-col{
margin: 3em 3em 0 5em;
h1 {
font-size: 3em;
width: 90%;
}
}
}
.hero-img{
width: 30%;
margin-right: 8em;
}
.hero-cta{
display: flex;
}
.primary-cta{
margin-right: 1em;
}
ul.features-list{
display: block;
margin-left: 5em;
li{
font-size: 1.4em;
&:before{
width: 30px;
height: 30px;
}
}
}
.features-section{
position: relative;
}
.features-section img{
display:block;
position: absolute;
right: 0;
width: 325px;
bottom: -6em;
height: 250px;
}
.testimonials-section ul{
display: flex;
li {
margin: 0 1em;
flex-basis: 33.333333%;
}
}
.contact-section{
position: relative;
display: flex;
}
.contact-right{
position: absolute;
right: 0;
top: 0;
width: 45%;
height: 100%;
iframe{
height: 100%;
}
}
}
//here we done the styling of 1220px and after
#media only screen and (min-width: 1220px){
.features-section{
&:before{
content: '';
position: absolute;
width: 10%;
height: 20em;
background: var(--primary-color);
left: 0;
top: -4em;
}
&:after{
content: '';
position: absolute;
width: 200px;
height: 18em;
background: url('../2021frontend/images/dots.svg') no-repeat;
top: -1em;
left: auto;
}
}
}
<div class="navbar"> <!-- here class is the name given to the div block so that the css identify it for styling it-->
<div class="container">
<a class="logo" href="#">Let's<span>Code</span></a>
<img id="mobile-cta" class="mobile-menu" src="2021frontend/images/menu.svg" alt="Open navigation">
<nav>
<img id="mobile-sta" class="mobile-menu-closed" src="2021frontend/images/exit.svg" alt="Closed navigation">
<ul class="primary-nav">
<li class="home">Home</li>
<li>Events</li>
<li>Registration</li>
</ul>
<ul class="secondary-nav">
<li>GrowYourMoney</li>
<li>Projects</li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="left-col">
<p class="subhead">Share with the World & Grow with the World</p>
<h1>We are here to make the Future</h1>
<div class="hero-cta">
Click Here
<a href="#" class="watch-video-cta">
<img src="2021frontend/images/watch.svg" alt="Watch a video">Watch a Video
</a>
</div>
</div>
<img src="2021frontend/images/illustration.svg" class="hero-img" alt="illustration-images">
</div>
</section>
<section class="features-section">
<div class="container">
<ul class="feature-list">
<li>Full Stack Web Development</li>
<li>Full Stack Mobile App Development</li>
<li>Cloud tech</li>
<li>Devops</li>
<li>Web3 Development</li>
<li>Stock Market</li>
</ul>
<img src="2021frontend/images/holding-phone.jpg" alt="Man holding phone">
</div>
</section>
<section class="testimonials-section">
<div class="container">
<ul>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"has a strong hold in full stack web Development, leader of team antidote in sih prefinal round"</blockquote>
<cite>- saksham bansal</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"starting my journey as a full stack developer and interested in web3 domain"</blockquote>
<cite>- sayan halder</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"currently doing frontend development with bootstrap and loves playing football and cricket"</blockquote>
<cite>- varun sharma</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"currently learning web Development and see myself in future as a android developer "</blockquote>
<cite>- parth barara</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"iam the tomper of the class and likes chemistry very much"</blockquote>
<cite>- sakshi gupta</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"i dont know what i am doing but my boyfriend loves me very much"</blockquote>
<cite>- nandini gulati</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"same as nandini"</blockquote>
<cite>- kushi suri</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"iam the don of kv, dont even try to fight with me in palam"</blockquote>
<cite>- sribash paul</cite>
</li>
</ul>
</div>
</section>
<br>
<section class="contact-section">
<div class="contact-left">
<h2>Contact</h2>
<form action="">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Your Name"> <br>
<br>
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="#email.com"> <br>
<br>
<label for="message">Message</label> <br>
<textarea name="message" id="message" cols="30" rows="10"></textarea> <br>
<br>
<input type="submit" class="send-message-cta" value="Send Message">
</form>
</div>
<div>
<div class="contact-right">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d28026.467037845872!2d77.08443149999997!3d28.59052415000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d1b3f9902dce7%3A0xdf51d27e693abbea!2sPalam%2C%20New%20Delhi%2C%20Delhi!5e0!3m2!1sen!2sin!4v1649777392215!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
<img src="2021frontend/images/" alt="">
</section>

By default display: flex; will try and put everything onto one row. Where you have .testimonials-section ul { in your 950px breakpoint add flex-wrap: wrap;
One thing to note, and I may be mistaken here, is that flex-basis doesn't take margins into consideration, so you will find that your testimonials will be 2 per row instead of 3 because of the horizontal margins you've set. You can fix this by change flex-basis: 33.3333% to flex-basis: calc(33.3333% - 2em);

Prevent header and footer divs from overlapping main div

I'm new to coding and I decided to try and learn HTML and CSS last night. I'm working on a chat UI. But I'm having a problem with my header and footer div overlapping the chat div.
I'm also having a problem with the message input I'm trying to fix the
input to the bottom of chat div but everything I tried didn't work.
// This is just to append dummy messages.
$(document).ready(function() {
setTimeout(() => {
for (let i = 0; i < 10; i++) {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let message_content = `
<div class="chat_message">
<div class="chat_person_name"><p>Dummy User</p></div>
<div class="chat_message_content"><p>Dummy Message</p></div>
<div class="chat_time_stamp"><p>${hours} : ${minutes}</p></div>
</div>`;
$(".message_area").append(message_content);
$(".chat_messages").animate({
scrollTop: $(".chat_messages").prop("scrollHeight")
}, 1000);
}
}, 5000);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
line-height: 1.4;
color: #333333;
font-family: Helvetica, Arial, sans-serif;
}
.chat {
display: flex;
}
.chat_header {
width: 100%;
padding: 20px;
position: fixed;
display: flex;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
color: #FFFFFF;
}
.chat_sidebar {
height: 100vh;
color: #FFFFFF;
background-color: #2A2A2A;
overflow-y: scroll;
display: block;
}
.chat_main {
flex-grow: 1;
display: flex;
background-color: #2A2A2A;
flex-direction: column;
max-height: 100vh;
}
.message_area {
margin-bottom: 16px;
}
.chat_messages {
flex-grow: 1;
padding: 24px 24px 0;
overflow-y: scroll;
}
.chat_message {
width: 50%;
background-color: #212121;
padding: 10px 10px 0;
color: #B9B9B9;
animation-name: msg-ani;
animation-duration: 0.5s;
border-radius: 0 10px 10px 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
.chat_person_name {
font-weight: bold;
color: #FFFFFF;
}
.chat_time_stamp {
text-align: right;
color: #FFFFFF;
font-weight: 500;
}
.compose {
display: flex;
flex-shrink: 0;
margin-top: 16px;
padding: 2px;
}
.compose form {
display: flex;
flex-grow: 1;
margin-right: 1px;
}
.compose input {
border: 1px solid #EEEEEE;
border-radius: 100px;
width: 100%;
padding: 12px;
margin: 0 16px 0 0;
flex-grow: 1;
font-size: 14px;
outline: none;
}
.compose button {
cursor: pointer;
padding: 12px;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
border: none;
color: #F3F3F3;
font-size: 16px;
transition: background 0.3s ease;
border-radius: 100px;
}
.compose button:hover {
background: #8064A2;
background: -webkit-linear-gradient(to right, #000000, #8064A2);
background: linear-gradient(to right, #000000, #8064A2);
}
.list-title {
font-weight: 500;
font-size: 18px;
margin-bottom: 4px;
padding: 12px 24px 0;
text-align: center;
}
.user_item {
display: flex;
padding: 0;
margin: 0;
height: 44px;
align-items: center;
cursor: pointer;
clear: both;
position: relative;
font-weight: 500;
font-size: 0.9em;
border-bottom: 1px solid #F3F3F3;
}
.user_label {
color: #F3F3F3;
font-weight: 700 !important;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 32px;
display: inline-block;
font-size: 14px !important;
margin-left: -26px;
cursor: default;
position: absolute;
left: 75px;
max-width: 170px;
}
.chat_footer {
width: 100%;
padding: 20px;
position: fixed;
bottom: 0;
display: flex;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
color: #ffffff;
}
<html>
<head>
<title>My Application</title>
<meta name="viewport" content="width=device-width, initial=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="chat_header" style="display: block;">
<p>Logo Here</p>
</div>
<div class="chat">
<div id="side_bar" class="chat_sidebar">
<ul class="chat_nav" style="display: flex; flex-direction: row; justify-content: space-evenly;">
<li class="">
<a href="#users_container" data-role="users" data-toggle="tab">
<i class="fa fa-users"></i>
<span>Users</span><span class="users_online"></span>
</a>
</li>
<li class="">
<a href="#rooms_container" data-role="rooms" data-toggle="tab">
<i class="fa fa-list"></i>
<span>Rooms</span><span class="rooms_online"></span>
</a>
</li>
</ul>
<h3 class="list-title">Users Online</h3>
<hr>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username one</span>
</div>
</div>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username two</span>
</div>
</div>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username three</span>
</div>
</div>
</div>
<div class="chat_main">
<div id="messages" class="chat_messages">
<div class="message_area">
</div>
<div class="compose flex-property ">
<form id="message-form">
<input name="message" type="text" placeholder="message" required autocomplete="off" class="message_input_field">
<button id="send_button">SEND</button>
</form>
</div>
</div>
</div>
</div>
<div class="chat_footer" style="display: block;">
<p>Footer Info Here</p>
</div>
<script src="script.js"></script>
</body>
</html>
I would appreciate any advice or help I could get.

Just remove position: fixed from both the classes for header and footer!
// This is just to append dummy messages.
$(document).ready(function() {
setTimeout(() => {
for (let i = 0; i < 10; i++) {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let message_content = `
<div class="chat_message">
<div class="chat_person_name"><p>Dummy User</p></div>
<div class="chat_message_content"><p>Dummy Message</p></div>
<div class="chat_time_stamp"><p>${hours} : ${minutes}</p></div>
</div>`;
$(".message_area").append(message_content);
$(".chat_messages").animate({
scrollTop: $(".chat_messages").prop("scrollHeight")
}, 1000);
}
}, 5000);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
line-height: 1.4;
color: #333333;
font-family: Helvetica, Arial, sans-serif;
}
.chat {
display: flex;
}
.chat_header {
width: 100%;
padding: 20px;
display: flex;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
color: #FFFFFF;
}
.chat_sidebar {
height: 100vh;
color: #FFFFFF;
background-color: #2A2A2A;
overflow-y: scroll;
display: block;
}
.chat_main {
flex-grow: 1;
display: flex;
background-color: #2A2A2A;
flex-direction: column;
max-height: 100vh;
}
.message_area {
margin-bottom: 16px;
}
.chat_messages {
flex-grow: 1;
padding: 24px 24px 0;
overflow-y: scroll;
}
.chat_message {
width: 50%;
background-color: #212121;
padding: 10px 10px 0;
color: #B9B9B9;
animation-name: msg-ani;
animation-duration: 0.5s;
border-radius: 0 10px 10px 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
.chat_person_name {
font-weight: bold;
color: #FFFFFF;
}
.chat_time_stamp {
text-align: right;
color: #FFFFFF;
font-weight: 500;
}
.compose {
display: flex;
flex-shrink: 0;
margin-top: 16px;
padding: 2px;
}
.compose form {
display: flex;
flex-grow: 1;
margin-right: 1px;
}
.compose input {
border: 1px solid #EEEEEE;
border-radius: 100px;
width: 100%;
padding: 12px;
margin: 0 16px 0 0;
flex-grow: 1;
font-size: 14px;
outline: none;
}
.compose button {
cursor: pointer;
padding: 12px;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
border: none;
color: #F3F3F3;
font-size: 16px;
transition: background 0.3s ease;
border-radius: 100px;
}
.compose button:hover {
background: #8064A2;
background: -webkit-linear-gradient(to right, #000000, #8064A2);
background: linear-gradient(to right, #000000, #8064A2);
}
.list-title {
font-weight: 500;
font-size: 18px;
margin-bottom: 4px;
padding: 12px 24px 0;
text-align: center;
}
.user_item {
display: flex;
padding: 0;
margin: 0;
height: 44px;
align-items: center;
cursor: pointer;
clear: both;
position: relative;
font-weight: 500;
font-size: 0.9em;
border-bottom: 1px solid #F3F3F3;
}
.user_label {
color: #F3F3F3;
font-weight: 700 !important;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 32px;
display: inline-block;
font-size: 14px !important;
margin-left: -26px;
cursor: default;
position: absolute;
left: 75px;
max-width: 170px;
}
.chat_footer {
width: 100%;
padding: 20px;
bottom: 0;
display: flex;
background: #8064A2;
background: -webkit-linear-gradient(to right, #8064A2, #000000);
background: linear-gradient(to right, #8064A2, #000000);
color: #ffffff;
}
<html>
<head>
<title>My Application</title>
<meta name="viewport" content="width=device-width, initial=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="chat_header" style="display: block;">
<p>Logo Here</p>
</div>
<div class="chat">
<div id="side_bar" class="chat_sidebar">
<ul class="chat_nav" style="display: flex; flex-direction: row; justify-content: space-evenly;">
<li class="">
<a href="#users_container" data-role="users" data-toggle="tab">
<i class="fa fa-users"></i>
<span>Users</span><span class="users_online"></span>
</a>
</li>
<li class="">
<a href="#rooms_container" data-role="rooms" data-toggle="tab">
<i class="fa fa-list"></i>
<span>Rooms</span><span class="rooms_online"></span>
</a>
</li>
</ul>
<h3 class="list-title">Users Online</h3>
<hr>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username one</span>
</div>
</div>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username two</span>
</div>
</div>
<div class="user_item" style="color:#000000">
<div class="user_label">
<span class="user_label_span">Username three</span>
</div>
</div>
</div>
<div class="chat_main">
<div id="messages" class="chat_messages">
<div class="message_area">
</div>
<div class="compose flex-property ">
<form id="message-form">
<input name="message" type="text" placeholder="message" required autocomplete="off" class="message_input_field">
<button id="send_button">SEND</button>
</form>
</div>
</div>
</div>
</div>
<div class="chat_footer" style="display: block;">
<p>Footer Info Here</p>
</div>
<script src="script.js"></script>
</body>
</html>

modal wont close can someone check whats wrong?

my modal seems to be working all ok except for the close button its throwing undefined error and i am unable to close the modal when click on the link.
would really appreciate if someone here could help me out fixing it. i just cannot seem to get where i am going wrong.
here is my complete code and also fiddle for the code is https://jsfiddle.net/j6xt5eok/
<style>
.modal-dialog {
margin: 0 auto !important;
}
.customs-info a {
background-color: #f00;
display: block;
max-width: 90%;
margin: 25px auto 0;
padding: 15px 0;
font-size: 20px;
border-radius: 14px;
}
#boxes {
display: block;
}
#boxes #dialog {
background-color: #ffffff;
border-radius: 10px;
}
#boxes .window {
display: block;
width: 100% !important;
left: 0 !important;
top: 0px !important;
}
.home-page-popup .close {
display: block;
height: 30px;
margin: 0 auto;
opacity: .75;
overflow: hidden;
position: absolute;
right: 12px;
text-indent: 0;
top: 12px;
width: 30px;
}
.close {
float: right;
font-size: 21px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
}
.content_bx {
background: #fff;
height: calc(100vh - 80px);
width: 100%;
}
.main_img_ct {
padding: 20px 0 10px 0px;
}
.main_img_ct {
width: 100%;
margin: 0 auto;
padding: 0;
padding: 20px 0 50px 0px;
background-color: #FFF;
}
.cont_bx2 {
width: 100%;
text-align: center;
margin-top: 15%;
}
.cont_bx2 h1 {
font-size: 28px;
font-weight: bolder;
color: #ff0000;
margin-bottom: 25px;
text-transform: uppercase;
}
.cont_bx2 a {
font-size: 22px;
}
.fa-2x {
font-size: 30px !important;
margin: 0 7px 0 0;
}
.cont_bx2 a {
font-size: 31px;
color: #009FF1;
font-weight: 700;
text-decoration: none;
text-align: center;
border-radius: 46px;
line-height: normal;
width: 68%;
margin: 0 auto;
text-shadow: #000 0 1px 1px;
margin-top: 20px;
font-weight: normal;
padding: 10px;
border-radius: 10px;
font-weight: bold;
color: #fff;
background-color: #009FF1;
}
.cont_bx2 h4 {
font-size: 22px;
text-align: center;
margin-bottom: 15px;
font-weight: bold;
color: #5F5F63 !important;
font-family: mallory,helveticaneue-bold,helvetica neue,Helvetica,Arial,sans-serif;
margin: 23px 0;
}
.cont_bx2 p strong {
font-size: 22px;
display: block;
margin: 0;
}
.cont_bx2 p {
font-size: 16px;
line-height: 1.5;
font-family: mallory,helveticaneue-bold,helvetica neue,Helvetica,Arial,sans-serif;
color: #02416c;
margin: 10px 0;
}
.cont_bx2 {
width: 100%;
text-align: center;
margin-top: 15%;
}
.cont_bx2 p {
font-size: 16px;
line-height: 1.5;
font-family: mallory,helveticaneue-bold,helvetica neue,Helvetica,Arial,sans-serif;
color: #02416c;
margin: 10px 0;
}
.lakdi_pn {
text-align: center;
overflow: hidden;
margin-top: 20px;
}
.phon-img a img {
width: 35%;
margin: 10px auto;
display:block;
}
.phon-img {
text-align: center;
font-size: 23px;
}
.phon-img a {
color: #000;
}
.modal-dialog {
margin: 0;
}
.home-page-popup a#close_id img {
width: 20px;
}
</style>
<div id="myModal" class="modal " role="dialog" style="display:block">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div id="boxes">
<div class="home-page-popup">
<div style="display: block;" id="dialog" class="window">
<a href="javaScript:void(0);" data-dismiss="modal" id="close_id" onclick="close_dilog(this.id)" class="close">
<img src="img/close-icon.png" alt="close" width="30" height="20"> </a>
<div class="popup-dsgn-box">
<div class="content_bx">
<div class="main_img_ct">
<div class="cont_bx2">
<h1> For Customer Service </h1>
<a href="tel:+1 (000) 000-0000" style="">
<i class="fa fa-phone fa-2x"></i>+1 (000) 000-0000</a>
<h4>EXCLUSIVE DEALS!</h4>
<p style="color:#000 !important; padding:0 10px;"><strong>Call Us Now To Book,</strong> Change or Cancel Reservations and <strong>Get upto 50% OFF</strong></p>
</div>
<div class="row">
<div class="col-md-12">
<div class="phon-img">
<a href="tel:+1 (000) 000-0000">
<img src="img/mobile-phone.png" alt="mobile">
Click to Call
</a>
</div>
</div>
<div class="col-md-12">
<div class="flat-address" style="text-align: center;">
<div class="customs-info">
Call Now: <i class="fa fa-phone-square"></i> +1 (000) 000-0000
</div>
</div><!-- /.top-navigator -->
</div><!-- /.col-md-4 -->
</div>
</div>
</div>
</div>
</div>
<!--<div id="mask" style="display: block; width: 1349px; height: 2538px; opacity: 0.8;"></div>-->
</div>
</div>
</div>
</div>
</div>
thanks alot in advance, really appreciate your help

HTML/CSS Jquery hover not showing up

I am new to Jquery and
I am trying to make a dropdown on my navigation using simple Jquery hover effect, and I think I am using wrong selector on Jquery.
I would like to see the dropdown and be able to navigate when i hover over 'What's New'
Any help would be awesome. Thanks,
See ATTACHED IMG
$(document).ready(function () {
$("li .nav-level-1").hover(
function () {
$('.nav-level-2').slideDown('200');
},
function () {
$('.nav-level-2').slideUp('200');
}
);
});
.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 {
visibility: hidden;
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;
}
<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>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

You should use a nested ul for your dropdown menu. You don't need jQuery at all for this. It can all be done with CSS. Take a look at this simple hover effect under the Products tab.
Codepen
HTML
<header class="navbar">
<div class="container">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Products
<ul>
<li>Cars
<ul>
<li>Ford</li>
<li>Chevy</li>
<li>Toyota</li>
</ul>
</li>
<li>Trucks</li>
<li>Vans</li>
<li>SUVs</li>
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</header>
CSS
header {
width: 100%;
height: 50px;
margin: 0;
padding: 0;
background-color: #2EBAE8;
}
.container {
width: 100%;
max-width: 1040px;
margin: 0 auto;
}
ul {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
ul ul {
width: 200px;
background-color: #046382;
display: none;
position: absolute;
top: 100%;
left: 0;
float: none;
}
ul ul ul {
top: 0;
left: 100%;
}
ul ul li {
float: none;
}
ul li {
float: left;
padding: 0 10px;
position: relative;
}
ul li:hover > ul {
display: block;
}
ul a {
display: block;
text-decoration: none;
color: white;
line-height: 50px;
transition: color 0.5s;
}
ul a:hover {
color: #E82E82;
}

Your submenu is hidden with visibility: hidden style.
I also separated the handled so that the menu doesn't hide while you're hovering it, and added finish() so that we're not queueing animations.
But yeah, like ncox85 said you should do this with css.
$(document).ready(function () {
$('.nav-level-2').hide();
$("li .nav-level-1").mouseenter(
function () {
$('.nav-level-2').finish().slideDown('200');
}
);
$("li .nav-level-2").mouseleave(
function () {
$('.nav-level-2').finish().slideUp('200');
});
});
.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 {
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;
}
<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>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

Just use display:none instead of visibility:hidden on class .nav-level-2

If any of you are wondering, I got a good result from just using html/css, got rid of jquery.
Maybe I will use jquery another time. fun lesson for myself and those of you out there. Thanks guys
.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;
}
<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>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

JS Dropdown Menu

Ok, so I know that this seems like I am just being lazy but I am so close to ripping out all of my hair! I have trawled through so many websites and after 24 hours need help from the Stack!
I am trying to make a dropdown menu that when a level 1 parent is CLICKED all of its children appear below pushing the page content down and when the next level 1 parent is clicked the previous children disappear and the new ones come in.
From my research I know that I need to utilize toggle but I have confused the hell out of myself and I am not much of a JS guy. I am also aware that I will need to use overflow hidden in my css for the midnav. I would also like to use some of the jQuery effects to slide the children ul up and down, would this mean I would have to write the whole thing using jQuery?
Any help would be greatly appreciated. an example of what I want to do is here at
http://www.andersenwindows.com/
and here is what I have so far:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/calendar.js"></script>
<script type="text/javascript" src="js/formhandler.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
<link href="CSS/style.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="CSS/fonts.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<div id="wrapper">
<div id="topbanner"></div>
<div id="header">
<div id="navigation">
<div id="topnav">
<div id="left-side">
<div id="left-menu">
<ul>
<li>Link l1</li>
<li>Link l2</li>
</ul>
</div>
</div>
<div id="logo"><img src="images/general/nav_logo.png" /> </div>
<div id="right-side">
<div id="right-menu">
<ul>
<li>Link r1</li>
<li>Link r2</li>
</ul>
</div>
</div>
</div>
<div id="mid-nav">
<ul id="midnav">
<li><a href="#" >About</a></li>
<li><a href="#" >Home</a>
<ul>
<li>test2</li>
<li>test3</li>
<li>test1</li>
</ul>
</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
</div>
<!--START 100% HERE!-->
</div>
</div>
<div id="footer">
<div class="social-images"><img src="images/socialmedia/facebook.gif" height="40" width="40"/></div>
<div class="social-images"><img src="images/socialmedia/google.gif" height="40" width="40"/></div>
<div class="social-images"><img src="images/socialmedia/twitter.gif" height="40" width="40"/></div>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
margin: 0 auto;
}
/* NAVIGATION */
#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
}
#topbanner{
width:100%;
height:54px;
background-color:#f1f2f2;
position:absolute;
z-index:-1000;
}
#topnav {
margin: 0px auto;
width: 1050px;
height: 50px;
padding-top: 4px;
background-color: #f1f2f2;
}
#left-side {
float: left;
width: 439px;
}
#right-side {
float: right;
width: 439px;
}
#logo {
padding-top: 7px;
float: left;
width: 15%;
}
#left-menu {
}
#left-menu ul {
float: right;
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 0px;
}
#left-menu li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#left-menu a {
display: inline-block;
padding: 10px;
line-height: 30px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'AftasansRegular';
font-size: 22px;
font-weight: normal;
color: #000;
border: none;
}
#right-menu {
}
#right-menu ul {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
}
#right-menu li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#right-menu a {
display: inline-block;
padding: 10px;
line-height: 30px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'AftasansRegular';
font-size: 22px;
font-weight: normal;
color: #000;
border: none;
}
ul#midnav {
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
border-bottom: solid thin #c8c8c8;
}
ul#midnav li {
display: inline;
}
ul#midnav li a {
display: inline-block;
padding: 10px;
line-height: 30px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'AftasansRegular';
font-size: 18px;
font-weight: normal;
color: #000;
border: none;
}
ul#midnav li ul{
line-height: 30px;
padding: 0;
position: absolute;
left: 0; top:100px;
display: none;/* --Hide by default--*/
width: 970px;
height:40px;
background: #f1f2f3;
color: #fff;
}
/* NAVIGATION END */
/* FOOTER BEGIN */
#footerwrapper, #push {
height: 100px; /* .push must be the same height as .footer */
background-color: #f1f2f2;
}
#footer {
border-top: solid thin #c8c8c8;
width: 100%;
height: 100px;
margin: 0 auto;
background-color: #f1f2f2;
}
#social-wrapper {
width: 130px;
height: 100px;
float: right;
position: relative;
top: 40px;
}
.social-images {
border-style: solid;
border-width: 1px;
border-color: #f1f2f2;
width: 40px;
height: 40px;
float: left;
}
/*FOOTER END *?
Thanks,
C

I got lost with all the left/right nav stuff so I just did one with the middle nav. You can think of it as a jumping off point. http://jsfiddle.net/MatthewDavis/4syjv/
Here's the JS... it's pretty generic but you should be able to edit to suit.
$(document).ready(function () {
$('a').on('click', function(event){
event.preventDefault();
$('#mid-nav > ul').find('ul').slideUp(
function(){
$(this).closest('li').find('ul').slideToggle();
});
});
});

Are you looking for something like:
$('#div1').click(function() {
if( /* check if already visible */)
$('div1').toggle(); //also do-able with $('div1').slideToggle();
$('div2').hide();
}
but first you would hide all your divs first and check the current div