Develop Reference

3 buttons with same CSS and JS are not working, 1st button is working fine but rest 2 buttons are not working

https://jsfiddle.net/SaifMinhaz/m1heq9z8/
Please have a look at this faddle, 3 buttons with exact same class, CSS, and JavaScript with a different id. Only 1st button is working completely fine but the 2nd and 3rd buttons are not working. Please help me to solve this problem. Thank you in advance. I'm attaching the code below.
Extra: It would be very helpful for me if you can suggest me, how I can put multiple photos stacked in the modal body without losing the shape of the modal. It will show a single photo in the modal body but if someone swap over the picture then the next picture will arrive. Thank you so much.
// Modal
// Get DOM Elements
const modal = document.querySelector('#my-modal');
const modalBtn = document.querySelector('#modal-btn');
const closeBtn = document.querySelector('.close');
// Events
modalBtn.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);
// Open
function openModal() {
modal.style.display = 'block';
}
// Close
function closeModal() {
modal.style.display = 'none';
}
// Close If Outside Click
function outsideClick(e) {
if (e.target == modal) {
modal.style.display = 'none';
}
}
/* Modal section styling */
:root {
--modal-duration: 1s;
--modal-color: crimson;
}
.button {
font-family: 'poppins', sans-serif;
display: inline-block;
background: crimson;
color: #fff;
font-size: 18px;
font-weight: 500;
padding: 8px 16px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
}
.button:hover {
color: crimson;
background: none;
}
.modal {
display: none;
position: fixed;
z-index: 99999;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
margin: 50px auto;
width: 60%;
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
animation-name: modalopen;
animation-duration: var(--modal-duration);
}
.modal-header h2,
.modal-footer h3 {
margin: 0;
}
.modal-header {
background: var(--modal-color);
text-align: center;
padding: 10px;
color: #fff;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.modal-body {
padding: 10px 5px 1px 5px;
background: #fff;
}
.modal-footer {
background: var(--modal-color);
padding: 10px;
font-size: 15px;
font-weight: lighter;
color: #fff;
text-align: center;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.close {
color: #ccc;
float: right;
font-size: 30px;
color: #fff;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.responsive {
width: 100%;
height: auto;
}
#keyframes modalopen {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<!-- Modal Button 1 start -->
<button id="modal-btn" class="button">Parkit</button>
<div id="my-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h3>Vehicle Parking Application</h3>
</div>
<div class="modal-body">
<img src="https://thefinancialexpress.com.bd/uploads/1575560371.jpg" alt="Vehicle Parking Application" class="responsive">
</div>
<div class="modal-footer">
<p>
Footer
</p>
</div>
</div>
</div>
<!-- Modal Button 1 end -->
<!-- Modal Button 2 start -->
<button id="modal-btn2" class="button">IPDC IMS</button>
<div id="my-modal2" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h3>Asset Management System</h3>
</div>
<div class="modal-body">
<img src="#" alt="Asset Management System" class="responsive">
</div>
<div class="modal-footer">
...
</div>
</div>
</div>
<!-- Modal Button 2 end -->
<!-- Modal Button 3 start -->
<button id="modal-btn3" class="button">Gaming Website</button>
<div id="my-modal3" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h3>Gaming Website</h3>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
</div>
</div>
</div>
<!-- Modal Button 3 end -->

querySelector only finds the first element that matches the query. When you have more than one element to query for, you need to use querySelectorAll and iterate for each item that matches the query.
UPDATED: per comment, the code blocks are modified to toggle respective modal DIVs to each button.
See the modified example below.
// Modal
// Get DOM Elements
const modal = document.querySelectorAll('.modal');
const modalBtn = document.querySelectorAll('.button');
const closeBtn = document.querySelectorAll('.close');
// Events
modalBtn.forEach(btn => btn.addEventListener('click', openModal));
closeBtn.forEach(btn => btn.addEventListener('click', closeModal));
window.addEventListener('click', outsideClick);
// Open
function openModal(e) {
const id = e.target.dataset.id;
const target = document.querySelector(`.modal[data-id="${id}"]`);
target.style.display = 'block';
}
// Close
function closeModal() {
modal.forEach(el => el.style.display = 'none');
}
// Close If Outside Click
function outsideClick(e) {
// NOTE: add a conditional to check clicking outside modal area
// closeModal();
}
/* Modal section styling */
:root {
--modal-duration: 1s;
--modal-color: crimson;
}
.button {
font-family: 'poppins', sans-serif;
display: inline-block;
background: crimson;
color: #fff;
font-size: 18px;
font-weight: 500;
padding: 8px 16px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
}
.button:hover {
color: crimson;
background: none;
}
.modal {
display: none;
position: fixed;
z-index: 99999;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
margin: 50px auto;
width: 60%;
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
animation-name: modalopen;
animation-duration: var(--modal-duration);
}
.modal-header h2,
.modal-footer h3 {
margin: 0;
}
.modal-header {
background: var(--modal-color);
text-align: center;
padding: 10px;
color: #fff;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.modal-body {
padding: 10px 5px 1px 5px;
background: #fff;
}
.modal-footer {
background: var(--modal-color);
padding: 10px;
font-size: 15px;
font-weight: lighter;
color: #fff;
text-align: center;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.close {
color: #ccc;
float: right;
font-size: 30px;
color: #fff;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.responsive {
width: 100%;
height: auto;
}
#keyframes modalopen {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<!-- Modal Button 1 start -->
<button id="modal-btn" data-id="modal1" class="button">Parkit</button>
<div id="my-modal" data-id="modal1" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h3>Vehicle Parking Application</h3>
</div>
<div class="modal-body">
<img src="https://thefinancialexpress.com.bd/uploads/1575560371.jpg" alt="Vehicle Parking Application" class="responsive">
</div>
<div class="modal-footer">
<p>
Footer
</p>
</div>
</div>
</div>
<!-- Modal Button 1 end -->
<!-- Modal Button 2 start -->
<button id="modal-btn2" data-id="modal2" class="button">IPDC IMS</button>
<div id="my-modal2" data-id="modal2" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h3>Asset Management System</h3>
</div>
<div class="modal-body">
<img src="#" alt="Asset Management System" class="responsive">
</div>
<div class="modal-footer">
...
</div>
</div>
</div>
<!-- Modal Button 2 end -->
<!-- Modal Button 3 start -->
<button id="modal-btn3" data-id="modal3" class="button">Gaming Website</button>
<div id="my-modal3" data-id="modal3" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h3>Gaming Website</h3>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
</div>
</div>
</div>
<!-- Modal Button 3 end -->

Opening CSS only model popup using jQuery

I am not able to call the following HTML div using jquery or javascript,
using the following scripts:
$("#open-modal").modal("toggle");
$("#open-modal").modal("show");
$("#open-modal").modal("hide");
$("#open-modal").toggle();
$("#open-modal").show();
$("#open-modal").hide();
I am able to open the popup using the button. Here is the HTML code
<div class="container">
<div class="interior">
<a class="btn" href="#open-modal">👋CSS-Only Modal</a>
</div>
</div>
<div id="open-modal" class="modal-window">
<div>
Close
<h1>Success!</h1>
<div>PoP up Me</div>
</div>
</div>
The full code is in JS fiddle

You are not using bootstrap modal and hence you cannot use modal calls.
See below example of bootstrap modal
$(function(){
$('.btn').on('click', function(){
$('#open-modal').modal('show');
});
})
.modal-window {
position: fixed;
background-color: rgba(255, 255, 255, 0.25);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: all 0.3s;
&:target {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
&>div {
width: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 2em;
background: #ffffff;
}
header {
font-weight: bold;
}
h1 {
font-size: 150%;
margin: 0 0 15px;
}
}
.modal-close {
color: #aaa;
line-height: 50px;
font-size: 80%;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 70px;
text-decoration: none;
&:hover {
color: black;
}
}
/* Demo Styles */
html,
body {
height: 100%;
}
body {
font: 600 18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
background-image: linear-gradient(to right,#7f53ac 0,#657ced 100%);
color: black
}
a {
color: inherit;
}
.container {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
.modal-window div:not(:last-of-type) {
margin-bottom: 15px;
}
small {
color: #aaa;
}
.btn {
background-color: #fff;
padding: 1em 1.5em;
border-radius: 3px;
text-decoration: none;
i {
padding-right: 0.3em;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="interior">
<a class="btn" href="#">👋 Basic CSS-Only Modal</a>
</div>
</div>
<div class="modal fade" id="open-modal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Voilà!</h4>
</div>
<div class="modal-body">
<p>A CSS-only modal based on the :target pseudo-class. Hope you find it helpful.</p>
<div><small>Check out</small></div>
👉 Amino: Live CSS Editor for Chrome
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Submit and change form on button click (embedded forms)

I am trying to create a pop-up form which displays a form initially. Upon completing the form and clicking next, it will submit that form and show another form in its place. However, with my JavaScript being "out of sync", I believe I'm not using the right approach.
Here's what I have so far:
$(document).ready(function() {
$(".modal-content .hs-button").click(function() {
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
currentSection.removeClass("is-active").next().addClass("is-active");
headerSection.removeClass("is-active").next().addClass("is-active");
$(".form-wrapper").submit(function(e) {
e.preventDefault();
});
if (currentSectionIndex === 3) {
$(document).find(".modal-content .form-columns-2 .form-columns-1").first().addClass("is-active");
$(document).find(".steps li").first().addClass("is-active");
}
});
});
a {
cursor: pointer;
}
p {
margin: 0 0 1rem;
font-weight: 400;
}
a {
color: inherit;
cursor: pointer;
}
ul {
padding-left: 0;
margin: 0;
}
#media (max-width: 1900px) {
.modal .modal-content {
width: 50% !important;
}
.modal input[type=text],
.modal input[type=email] {
margin: 0 !important;
}
.modal textarea {
margin: 0 !important;
}
}
.input textarea {
padding-left: 10px !important;
}
.modal {
display: none;
position: fixed;
z-index: 20;
left: 0;
top: 0;
width: 100% !important;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal .modal-content {
background-color: #097afb;
margin: 4% auto 15% auto;
width: 40%;
padding-bottom: 30px;
border-radius: 3px;
}
.modal .steps {
text-align: center;
}
.modal .steps li {
display: inline-block;
margin: 20px;
color: #fff;
font-size: 0.875rem;
padding-bottom: 5px;
text-transform: uppercase;
}
.modal .imgcontainer {
text-align: center;
position: relative;
display: block;
}
.modal .imgcontainer h2 {
font-size: 29px;
padding-top: 50px;
color: #fff;
margin: 0;
text-transform: uppercase;
}
.modal .imgcontainer p {
font-size: 18px !important;
padding-top: 10px;
color: #fff;
}
.modal input[type=text],
.modal input[type=email] {
width: 90%;
padding: 12px 12px;
margin: 10px 50%;
display: inline-block;
border-bottom: 1px solid #414141;
box-sizing: border-box;
font-size: 16px;
background: transparent;
text-transform: uppercase;
border-top: none;
border-left: none;
box-shadow: none;
border-right: none;
}
.modal textarea {
width: 98% !important;
padding: 12px 20px;
margin: 8px 25%;
display: inline-block;
border-bottom: 1px solid #414141 !important;
box-sizing: border-box;
font-size: 16px !important;
background: transparent;
text-transform: uppercase;
border-top: none !important;
border-left: none !important;
box-shadow: none !important;
border-right: none !important;
resize: none;
}
.modal form span:not(.close) {
display: none !important;
}
.modal form .actions {
padding: 0px 20px 0px 0px;
width: 87%;
display: inline-block;
}
.modal form .actions input[type=submit]:hover {
background-color: #000;
color: #fff;
border: 2px solid #000;
}
.modal .close {
position: absolute;
right: 20px;
top: 15px;
color: #fff;
font-size: 24px;
font-weight: 400;
}
.modal .close:hover {
color: #000;
cursor: pointer;
}
input.hs-input,
textarea.hs-input {
display: inline-block;
width: 210px;
height: 18px;
padding: 4px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 18px;
color: #666;
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
}
textarea.hs-input {
padding-top: 5px;
}
textarea.hs-input {
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="visible" class="button-outline hero-button button-arrow" onclick="document.getElementById('modal-wrapper').style.display='block'">Click here</a>
<div id="modal-wrapper" class="modal" style="display: none;">
<div>
<div>
<div>
<div>
<span>
<form class="modal-content animate">
<div class="imgcontainer"><span onclick="document.getElementById('modal-wrapper').style.display='none'" class="close" title="Close PopUp">×</span>
<h2 style="text-align: center;">Title</h2>
<p>Lorum Ipsum</p>
</div>
<div class="container">
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
// <![CDATA[
hbspt.forms.create({
portalId: "103687",
formId: "7c124354-e1ff-411d-9245-2b214e943a90"
});
// ]]>
</script>
<div></div>
<ul class="steps">
<li class="is-active"><a>Step 1</a></li>
<li>/</li>
<li><a>Step 2</a></li>
<li>/</li>
<li><a>Step 3</a></li>
</ul>
</div>
</form>
</span>
</div>
</div>
</div>
</div>
</div>
To simplify, user clicks the button > form appears > user fills out form > Form is submitted and second form is shown.
Issues, the form itself is embedded onto the popup, so I can't alter the fieldset as shown in this approach.
Form 1 embed code is shown in the fiddle. On form 1 submit, I need form 2 to appear i.e.
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "103687",
formId: "555bd0a1-adb9-4e31-b71e-e09e4834e844"
});
</script>
I think my entire JS code is not "efficient". I've seen multistep forms created where it just involves a single form, but unsure how to do it with multiple forms.

You can use bootstrap for modal popup:
https://codepen.io/creativedev/pen/VdKymZ
I have just used bootstrap and changed HTML
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="containers">
<div class="wrapper">
<ul class="steps">
<li class="is-active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
<form class="form-wrapper">
<fieldset class="section is-active">
<h3>Your Details</h3>
<input type="text" name="name" id="name" placeholder="Name">
<input type="text" name="email" id="email" placeholder="Email">
<div class="button">Next</div>
</fieldset>
<fieldset class="section">
<h3>Account Type</h3>
<div class="row cf">
<div class="four col">
<input type="radio" name="r1" id="r1" checked>
<label for="r1">
<h4>Designer</h4>
</label>
</div>
<div class="four col">
<input type="radio" name="r1" id="r2"><label for="r2">
<h4>Developer</h4>
</label>
</div>
<div class="four col">
<input type="radio" name="r1" id="r3"><label for="r3">
<h4>Project Manager</h4>
</label>
</div>
</div>
<div class="button">Next</div>
</fieldset>
<fieldset class="section">
<h3>Choose a Password</h3>
<input type="password" name="password" id="password" placeholder="Password">
<input type="password" name="password2" id="password2" placeholder="Re-enter Password">
<input class="submit button" type="submit" value="Sign Up">
</fieldset>
<fieldset class="section">
<h3>Account Created!</h3>
<p>Your account has now been created.</p>
<div class="button">Reset Form</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

Try out this.
What's needed is the target option to tell hubspot where to put the form:
<script>
hbspt.forms.create({
portalId: "103687",
formId: "555bd0a1-adb9-4e31-b71e-e09e4834e844",
target: "#my_form",
});
</script>
Read this

Why does an overlay not work in IE?

I have an overlay. If the user clicks on a box the overlay slides up. My problem now is, that the overlay works without any issues in Mozilla Firefox and Chrome. But in Explorer the overlay goes all over the display. How can I solve this problem for IE? Is there something I didnt see? Or do I need a plugin for that?
This picture shows the normal version which I want to work in IE.
At the Moment it looks like this in IE.
$('.top').on('click', function() {
$parent_box = $(this).closest('.box');
$parent_box.siblings().find('.overlay').slideUp();
$parent_box.find('.overlay').slideToggle(1000, 'swing');
});
$('.overlay').on('click', function() {
$parent_box.find('.overlay').slideToggle(1000, 'swing');
});
.services-section {
background-color: #E6E6E6;
height: auto;
}
.services-section hr {
border-bottom: hidden;
width: 42px;
margin-left: 0px;
}
.services-section .services-detail {
border-radius: 4px;
transition: all 0.3s ease-in-out;
position: relative;
top: 0px;
padding: 60px 40px 60px 40px;
margin-top: 32px;
background-color:rgba(237, 238, 239, 0.8);
height: 500px;
}
.services-section .services-detail:hover {
box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
top: -2px;
background-color:#FAFAFA;
color:#000;
}
.services-section .services-detail {
font-size: 60px;
color: #000;
margin-bottom: 10px;
}
.services-section .services-detail:hover .fa {
color: #fd2034;
}
.services-detail h5 {
color: #000;
font-size: 25px;
font-family: 'Poppins', sans-serif;
}
.services-detail:hover h5 {
color: #000;
}
.services-detail p {
color: #000;
font-size: 18px;
}
.services-detail:hover p {
color: #000;
}
.overlay{
display: none; /* Hidden by default*/
position: fixed; /* Stay in place*/
z-index: 1; /* Sit on top */
left: 0;
bottom: 2%;
width: 100%; /* Full width */
height: 92%; /* Full height */
border-radius: 10px;
overflow: auto; /* Enable scroll if needed
background-color: rgb(217,217,217); /* Fallback color */
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
background-color: rgb(255,255,255);
-webkit-animation-name: slideIn; /* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s
}
.overlay h3{
color: black;
text-align: left;
margin-left: 15%;
}
.overlay p {
font-size: 0.2em;
color: black;
float: left;
width: 100%;
}
.overlay a {
font-size: 0.8em;
color: black;
float:left;
}
.overlay-header {
padding: 1px 16px;
background-color: #fff;
color: black;
text-align: center;
border-bottom: 2px solid #ffcc00;
}
.overlay img{
width: 18%;
float: right;
margin: 1%;
margin-right: -20%;
}
.des{
margin: 15px;
font-size: 1em;
}
.overlay:hover {
box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
background-color:#FAFAFA;
color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Provider Section Start -->
<section id="provider" class="services-section section-space-padding
mica-bg">
<div class="container">
<div class="section-title">
<i class="fa fa-paper-plane-o"></i>
<h3 class="white-color"><span>Blume</span></h3>
</div>
<div class="col-md-4 col-sm-6 3d-hover box">
<div class="services-detail hover-effect-2d top">
<i><img src="container/rfid/micarfid.png" alt="micarfid"
style="background-color:#ffcc00; border:5px solid #ffcc00; border-
radius: 10px; width:200px; margin-left:-15px;"></i>
<h5>Blume</h5>
<hr>
<p>This is a test for blume.</p>
</div>
<div class="overlay">
<div class="overlay-header">
<img src="test/blume.jpg" alt="blume" style="width:15%;float:right; margin-right:10%;margin-top:0.5%;background:#ffcc00;border:2px solid #ffcc00; border-radius: 10px;">
<h3>Blume</h3>
</div>
<div class="des">
<p>This is a test for blume.<</p>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">Tutorial</p><i class="fa fa-youtubeOverlay fa-youtube-play"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">PDF-Doku</p><i class="fa fa-pdfOverlay fa-file-pdf-o" style="margin-top:-10px;"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">Image Download</p><i class="fa fa-zipOverlay fa-file-archive-o" style="margin-top:-15px;"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:8px;">Application Download</p><i class="fa fa-imgOverlay fa-picture-o" style="margin-top:-80px;"></i>
<img src="images/application.png" alt="application" style="width:80%;float:left; margin-top:-20px;margin-left:50px;">
</div>
</div>
</div>
</div>
</section>
<!-- Provider Section End -->
<!-- Back to Top Start -->
<i class="fa fa-long-arrow-up"></i>
<!-- Back to Top End -->
<!-- All Javascript Plugins -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/plugin.js"></script>
<!-- Main Javascript File -->
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="js/js.js"></script>

It's likely that this issue is caused by the use of position: fixed in your overlay element.
Position fixed elements geometry historically relates to the initial containing block (most often the viewport).
https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning
For a full cross browser implementation try using position:absolute instead, making sure the containing element (div.box) makes use of position:relative.

Animated (shrinking) Resizing Header On Scroll in bootstrap

function openNav() {
document.getElementById("mySidenav").style.width = "50%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
(function ($) {
// Instantiate MixItUp:
// $('Container').mixItUp();
// Add smooth scrolling to all links in navbar + footer link
$(".sidenav a").on('click', function(event) {
event.preventDefault();
var datanew= this.href;
var str2 = '.html';
if(datanew.indexOf(str2) != -1){
window.location.href = datanew;
}else{
var hash = this.hash;
$('html, body').animate({scrollTop: $(hash).offset().top},
900, function(){
alert(window.location);
window.location.hash = hash;
});
}
});
})(jQuery);
$(window).click(function(event) {
if ($(event.target).closest('div#mySidenav').length === 0 && $(event.target).closest('.menu-icon').length === 0) {
closeNav()
}
})
#section0{
background-attachment: fixed;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: url(
https://images7.alphacoders.com/669/thumb-1920-669739.jpg);
background-origin: padding-box;
background-repeat: no-repeat;
background-size: cover;
background-position:center top;
}
.sidenav {
height: 100%;
width: 0;
position: absolute;
z-index: 1;
top: 0;
right: 0;
background-color: #ef4f50;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
/*max-height: 551px;*/
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #ffffff;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
.menu-icon
{
color: #114576;
font-size: 30px;
margin-top: 40px;
margin-left: 40px;
cursor: pointer;
}
.control {
margin-top: 15px;
margin-right: 40px;
}
.menu{
min-height: 100px;
}
/*#banner{
background: url(.././img/banner/bg.jpg) no-repeat center top;
background-size: cover;
min-height: 100%;
}*/
.logo-name{
font-size: 65px;
margin-top: 140px;
color: #FFB03B;
}
.bannertext{
margin-top: 80px;
}
.bannerelements{
margin-left: 20px;
}
.mahaGov{
width: 70%;
margin-top: 70px;
margin-bottom: 80px;
}
/* button custom style */
.btn-round{
border-radius: 17px;
}
.btn {
padding: 8px 25px;
border: 0 none;
text-transform: uppercase;
margin-left:10px;
margin-right: 10px;
margin-top:25px;
letter-spacing: 2px;
font-size: 1em;
font-family: 'Roboto', sans-serif;
}
.btn-danger {
background: #ef4f50;
color: #ffffff;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
background: #c03233;
}
.btn-danger:active, .btn-danger.active {
background: #c03233;
box-shadow: none;
}
.logo{
margin-left: 50px;
margin-top: 20px;
}
#buildingblocks{
padding-left: 3%;
padding-right: 3%;
}
.text-color{
color :#114576;
}
.ptext-size{
font-size: 1.4em;
font-weight: bold;
}
.text-white{
color :#ffffff;
}
/* Custom font effects */
h1{
margin-top: 1px;
margin-bottom: 5px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="section align-center" id="section0">
<div class="heading">
<header id="header">
<div id="mySidenav" class="sidenav">
×
Home
About Us
What We Do
Get Involved
Contact Us
</div>
<div class="control">
<div class="col-md-4">
<img src="http://findicons.com/files/icons/2796/metro_uinvert_dock/128/microsoft_new_logo.png" class="pull-left img-responsive logo" alt="SAF Logo">
</div>
<div class="col-md-8">
<!-- Use any element to open the sidenav -->
<span onclick="openNav()" class="pull-right menu-icon">☰</span>
<button type="button" class="pull-right btn btn-danger btn-round donate" id="donate">DONATE NOW</button>
</div>
</div>
</header>
<div class="col-md-12 home-col12">
<div class="col-md-5">
<div class="bannertext bannerelements">
<h1>45% of youth</h1>
<h1>make the wrong</h1>
<h1>career and</h1>
<h1>life choices.</h1>
</div>
<div class="bannerelements">
<br>
<p class="text-color ptext-size">The Right Education can change that</p>
</div>
<div class="row">
<button type="button" class="btn btn-danger btn-round" style="margin-left: 40px;">BE A PART OF CHANGE</button>
</div>
<div class="row bannerelements mahaGov">
<img src="assets/img/home/banner/mahaGov1.png" class="pull-left img-responsive" alt="Govt. of Maharashtra Logo">
</div>
</div>
<div class="col-md-7">
</div>
</div>
</div>
</div>
hello this code is for the menu-bar as well as section.my website is divided in sections.each section is full page height 100% for all screen.i want to set my header fixed on top but i want to shrink my menu or Resize my menu on Scroll of Page.as in this link "http://trungk18.github.io/Resizing-Header-On-Scroll/"