We Keep Coding

content shows off while scrolling in responsive hambuger responsive

I was finishing up creating this page using html and css after finishing up i was just checking the navigation menu in a mobile view and while scrolling down the menu the content of the page shows off and menu goes down and the content shows off
I want content not be shown while scrolling or not scrolling in the hamburger menu
code:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
z-index: 9999;
/** ADDED **/
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
background-color: #2f2f42;
/** ADDED **/
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet" />
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>

You could use JS to disable scroll when the menu shows up and enable when it's closed. Although, I don't understand why you wanted to use checkbox input for closing the menu. you could handle scrollbar like this
HTML
<label for="click" class="menu-btn" onclick={disableScroll()}>
<i class="fas fa-bars"></i>
</label>
<label for="click" class="close-btn" onclick={enableScroll()}>
<i class="fa-solid fa-xmark"></i>
</label>
Javascript
<script>
const disableScroll = () =>{
document.body.style.height = "100%";
document.body.style.overflow = "hidden";
document.querySelector("menu-btn").style.display = "none"
document.querySelector("close-btn").style.display = "block"
}
const enableScroll = () =>{
document.body.style.overflow = "auto";
document.querySelector("menu-btn").style.display = "block"
document.querySelector("close-btn").style.display = "none"
}
</script>

JS for visibility effect not working with addeventlistener

Skimmed through similar questions but didnt quite get the answer im looking for. I have an <a> that I want to be visible when hovering another <a>. I know my code is getting messy but still wanna know if this is doable. I tried with addeventlistener, which I thought would work, but it does absolutely nothing, is something missing from my js?
document.getElementById("defaultlang").addEventListener("mouseover", mouseOver);
document.getElementById("defaultlang").addEventListener("mouseout", mouseOut);
function mouseOver() {
document.getElementById('secondlang').style.visibility = "visible";
}
function mouseOut() {
document.getElementById('secondlang').style.visibilty = "hidden";
}
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
#headermenu li + li:before {
content: "/";
padding: 0px 11px 0px 0px;
color: #abb8c3;
}
#secondlang {
visibility: hidden;
}
.ruflag {
position: relative;
display: inline-block;
position: relative;
z-index: 1;
padding: 20px;
margin: -2em;
background: black;
left: 400px;
top: 20px;
}
header div span {
position: relative;
}
.lang {
position: relative;
left: 460px;
display: inline-block;
position: relative;
z-index: 1;
padding: 20px;
margin: -2em;
}
.lang:hover + .ruflag {
visibility: visible;
}
header span p {
display: inline;
color: #164da8;
}
button a {
display: inline-block;
position: relative;
z-index: 1;
padding: 18px 40px;
margin: -2em;
color: white;
font-size: 12px;
font-weight: 600;
font-stretch: ultra-condensed;
letter-spacing: 0.5px;
}
button a:hover {
color: #e9b003;
transition: 0.4s;
}
header {
font-family: "Barlow Condensed",sans-serif;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.4px;
font-stretch: ultra-condensed;
}
ul {
position: relative;
left: 90px;
}
li {
padding: 10px;
display: flex;
align-items: center;
}
ul li a {
font-weight: 600;
font-size: 14px;
letter-spacing: 0.4px;
color: #332826;
font-stretch: ultra-condensed;
}
a:hover {
color: #164da8;
}
.rutext {
color: #b2a9a6;
}
.flex {
display: flex;
}
.logo {
width: 177px;
height: 77px;
padding-left: 20px;
padding-top: 5px;
}
.headerbox {
padding: 10px;
align-items: center;
}
.epoodnupp {
height: 50px;
width: 120px;
background-color: #164da8;
border: none;
position: relative;
left: 880px;
}
.heading2 {
text-align: center;
font-size: 3.294rem;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Fixus</title>
<link rel="stylesheet" href="fixus.css">
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<script type="text/javascript" src="fixusjs.js"></script>
</head>
<body>
<header>
<div class="headerbox flex">
<a class="lang" href="#" id="defaultlang">
<span>
<img src="https://fixus.ee/wp-content/plugins/sitepress-multilingual-cms/res/flags/et.png" alt="">
<p>Eesti</p>
</span>
</a>
<a href="#" title="Русский" class="ruflag hidden" id="secondlang">
<span>
<img src="https://fixus.ee/wp-content/plugins/sitepress-multilingual-cms/res/flags/ru.png" alt="">
<p class="rutext">Русский</p>
</span>
</a>
</div>
</header>
</body>
</html>

You can do this with plains css
#defaultlang:hover ~ #secondlang {
visibility: visible;
}
#secondlang {
visibility: hidden;
}
~ selects all the siblings of #defaultlang. You can use + to select only the adjacent sibling.

Cannot figure out what's wrong with my eventlistener

So I'm creating an ecommerce website for a project. I've been following a tutorial on youtube. I seem to be having trouble with the script for the project. I've double checked my code, and it's the same as the tutorial, however, the script doesn't run at all.
/* Showing the navigation Menu */
const showMenu = (toggleId, navId) => {
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId)
if (toggle && nav) {
toggle.addEventListener('click', () => {
nav.classList.toggle('show')
})
}
}
showMenu('nav-toggle', 'nav-menu')
const navLink = document.querySelectorAll('.nav_link'),
navMenu = document.getElementById('nav-menu')
function linkAction() {
navMenu.classList.remove('show')
}
navLink.forEach(n => n.addEventListener('click', linkAction))
:root {
/*Header*/
--header-height: 48px;
/*Font*/
--font-medium: 500;
--font-semi-bold: 600;
--font-bold: 700;
--body-font: 'Poppins', sans-serif;
--big-font-size: 20px;
--bigger-font-size: 24px;
--biggest-font-size: 32px;
--h2-font-size: 25px;
--normal-font-size: 15px;
--smaller-font-size: 13px;
/*Colours*/
--dark-color: #141414;
--dark-color-light: #8a8a8a;
--dark-color-lighten: #f2f2f2;
--white-color: #fff;
/*Margins*/
--mb-1: 10px;
--mb-2: 16px;
--mb-3: 24px;
--mb-4: 32px;
--mb-5: 40px;
--mb-6: 48px;
--z-fixed: 100;
--rotate-img: rotate(-30deg);
}
#media screen and (min-width: 768px) {
:root {
--big-font-size: 24px;
--bigger-font-size: 32px;
--biggest-font-size: 48px;
--normal-font-size: 16px;
--smaller-font-size: 14px;
}
}
*,
::before,
::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
/*margin: var(--header-height) 0 0 0;*/
font-family: var(--body-font);
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
color: var(--dark-color);
line-height: 1.6;
}
h1,
h2,
h3,
pl,
ul {
margin: 0;
}
ul {
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: var(--dark-color);
}
img {
max-width: 100%;
height: auto;
display: block;
}
.section {
padding: 80px 0px 32px;
}
.section-title {
position: relative;
font-size: var(--big-font-size);
margin-bottom: var(--mb-4);
text-align: center;
letter-spacing: 1.6px;
}
.section-title::after {
content: '';
position: absolute;
width: 56px;
height: 2.88px;
top: -16px;
left: 0px;
right: 0px;
margin: auto;
background-color: var(--dark-color);
}
.bd-grid {
max-width: 1024px;
display: grid;
grid-template-columns: 100%;
column-gap: 32px;
width: calc(100% - 32px);
margin-left: var(--mb-2);
margin-right: var(--mb-2);
}
.l-header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
background-color: var(--dark-color-lighten);
}
.nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
#media screen and (max-width: 768px) {
.nav_menu {
position: fixed;
top: var(--header-height);
left: -100%;
width: 70%;
height: 100vh;
padding: 32px;
background-color: var(--white-color);
transition: .5s;
}
}
.nav_item {
margin-bottom: var(--mb-4);
}
.nav_logo {
font-weight: var(--font-semi-bold);
}
.nav_toggle,
.nav_shop {
font-size: 20px;
cursor: pointer;
}
.show {
left: 0;
}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--ICONS-->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<header class="1-header" id="header">
<nav class="nav bd-grid">
<div class="nav_toggle" id="nav-toggle">
<i class='bx bxs-grid'></i>
</div>
Roby
<div class="nav_menu" id="nav-menu">
<ul class="nav_list">
<li class="nav_item">
Home</li>
<li class="nav_item">
Featured</li>
<li class="nav_item">
Women</li>
<li class="nav_item">
New</li>
<li class="nav_item">
Shop</li>
</ul>
</div>
<div class="nav_shop">
<i class='bx bx-shopping-bag'></i>
</div>
</nav>
</header>
<main class="1-main">
</main>
The navigation menu needs to open when the grid icon in the top left is clicked, but it doesn't. It also needs to disappear when clicked again.
I can post the link to the youtube video as well, although it's my first time posting on stackoverflow, so I'm not sure if I'm allowed to.
Please advise.

How to reset a placeholder whenever you exit a search box event?

I've got an overlay search box (check code). The search box got a placeholder "Sök", let's say the user writes something in the textbox but then exits (presses the x in the right upper corner). Then I want the text that the user wrote to be removed and the placeholder reset, so whenever the user enters the search box again the text is removed and the placeholder is back. How do I create this event?
Code:
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
span{
display: inline-block;
}
.backgroundlogo{
margin-top:-1400px;
z-index: -1;
position: relative;
width: 100%;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: none;
}
* {
margin:0;
padding:0;
}
header ::after {
content: "";
display: table;
clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
display: inline-block;
padding-left: 45px;
padding-top: 20px;
padding-bottom: 20px;
}
nav ul{
list-style: none;
display: inline-block;
padding-top: 25px;
}
nav a {
font-size: 12px;
color: black;
font-weight: 600;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
nav a:hover{
color: red;
}
nav li:hover{
}
.fa-bars{
color: black;
font-size: 14px;
padding-left: 15px;
}
.fa-bars:hover{
color: red;
cursor: pointer;
}
.wrapper{
position: relative;
height: 100%;
width: 100%;
}
.backgroundlogo{
}
.bild1{
height: 350px;
width: 600px;
margin-top: 100px;
margin-left: 80px;
position: absolute;
z-index: 4;
background-image: url('Img/KBA.jpg');
background-position: 10% 30% ;
background-size: 180%;
}
.bild2{
height: 350px;
width: 600px;
margin-top: 140px;
margin-left: 120px;
z-index: 3;
position:absolute;
background-color: #3D6BB8;
}
.entrytext{
float: right;
margin-right: 90px;
margin-top: 175px;
clear: both;
}
.entrytext>h1{
font-weight: 800;
font-style: normal;
font-size: 54px;
}
.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
box-shadow: 20px 15px black;
}
.entrytext>button:hover{
border: none;
display: inline-block;
background-color: #c12147;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
}
button:focus {outline:0;}
.fa-angle-right{
font-size: 20px;
padding-left: 30px;
}
.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
color: #CC2244;
}
.brand{
height: 110px;
width: 750px;
margin: 600px auto;
background-color: #CFCFCF;
clear: both;
z-index: 11;
}
.openBtn {
background: #f1f1f1;
border: none;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
}
.openBtn:hover {
background: #bbb;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 10;
top: 0;
left: 0;
background-color: white;
background-color: rgba(255,255,255, 0.8);
}
.overlay-content {
position: relative;
top: 20%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: black;
}
.overlay .closebtn:hover {
color: #ccc;
}
.overlay input[type=text] {
padding: 15px;
font-size: 50px;
font-weight: bold;
border: none;
background:none;
margin: 0 auto;
text-decoration: none;
border-bottom: 6px solid black;
border-bottom-left-radius: 5px;
color:black;
text-align:center;
width: 100%;
}
input::placeholder {
color: black;
}
.overlay input[type=text]:hover {
background: none;
}
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
input:focus {outline:0;}
.overlay button:hover {
background: #bbb;
}
.type1{
width: 1700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<title>Kungsmässan — Måste upplevas!</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Butiker</li>
<li>Resturang & Café</li>
<li>Utbyggnad</li>
<li>Öppetider</li>
<div id="myOverlay" class="overlay">
<span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
<div class="overlay-content">
<form action="/action_page.php">
<input class="type1" id="type2" onblur="this.placeholder = 'Sök'" onfocus="this.placeholder = ''" type="text" placeholder="Sök" name="search">
</form>
</div>
</div>
<i onclick="openSearch()" id="openBtn" class="fas fa-search"></i>
<script>
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
document.addEventListener('keydown',function(){document.getElementById('type2').focus();});
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
<div class="bild1">
</div>
<div class="bild2">
</div>
<div class="entrytext">
<h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt <br/> i Kungsbacka.</h1>
<h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
<button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
</div>
<div class="brand">
</div>
<span>
<img class="backgroundlogo" src="Img/bg.png" alt="">
</span>
</body>
</html>

If you set the value of the input back to nothing when the closing button is clicked, the placeholder should appear again:
const button = document.querySelector( 'button' );
const input = document.querySelector( 'input' );
button.addEventListener( 'click', event => {
input.value = '';
});
<input type="text" placeholder="Sok">
<button>Close</button>

Try with setValue('') method to reset any element value.

Image Modal or Expand when click in html and css

So i am trying to put a code for modal or in order to expand my images. I already checked every sector or every codes and still didn't find why it's not working. I don't want nothing to change in it except the modal, it my get mess up if i change things. I got the codes from a website. In the site their result are working but when i put the codes in the notepad nothing happened. It will be really helpful if you can find what is wrong with it. Thank you in advance for those who will help me.
body {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 8vw 130vw 7vw;
grid-gap: 0em;
margin: 0;
padding: 0;
background-color: #ffffff;
width: 100%;
}
header,
footer {
grid-column: 1 / span 2;
}
main {
grid-column: 1 / span 2;
}
body {
margin: 0 auto;
max-width: 89em;
margin-left: 0;
margin-right:0;
padding: 0em 0;
}
header,
main,
aside,
footer {
display: flex;
}
footer {
background: #eaeaea;
}
.main1 {
margin-top: 450px;
margin-left: 0;
}
#body_1 h2 {
margin-left: 50px;
font-size: 30px;
color: black;
margin-top: 95px;
margin-bottom:3px;
font-family: courier new;
float: left;
}
#body_1 h6 {
margin-left: 10px;
color: blue;
margin-top: 220px;
margin-bottom:3px;
font-family: courier new;
float: left;
}
#body_1 h4 {
margin-left: 230px;
font-size: 30px;
color: black;
margin-top: 260px;
margin-bottom:3px;
position: left;
float: left;
}
.text4 {
position: absolute;
float: left;
top: 870px;
}
.background_wrap {
position: absolute;
background-color: rgba(19, 13, 6,0.5);
z-index: -1000;
width: 100%;
height: 100% ;
overflow:hidden;
background: url("Pics&Video/laoang6.jpg") no-repeat center;
background-size: cover;
}
.background_wrap::before{
background-color: rgba(0, 0, 0, 0.37);
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 20%;
z-index: 1000;
}
.sub-content {
position: fixed;
width: 1000px;
height: 120px;
margin: 0 auto;
transition: 0.5s;
}
.sub-content.active {
background-color: rgba(0, 26, 26,0.7);
width: 100%
}
.sub-content.active ul li a {
background-color: rgba(0, 26, 26,0.7);
}
#list {
margin-right: 5px;
position:fixed;
margin-left: 780px;
margin-top: 20px;
}
ul {
margin-top:1px;
padding: 0px;
list-style: none;
color: white;
margin-right: 0px;
font-family: calibri;
font-weight: bold;
}
ul li {
float: right;
width: 130px;
font-family: courier new;
border-bottom: 1px solid #ffffff;
border-right: 1px solid #ffffff ;
border-left: 1px solid #ffffff ;
border-top: 1px solid #ffffff ;
line-height: 25px;
text-align: center;
font-size: 13px;
font-weight: bolder;
margin-top: 35px;
margin-right: 3px;
}
ul li a {
color: white;
display: block;
margin-top: 2px;
font-weight: bolder;
text-decoration: none;
}
ul li a:hover {
background-color: green;
font-weight:bolder;
cursor: pointer;
color: white
}
ul li ul li {
display: none;
font-weight: bolder;
}
ul li:hover ul li {
display:block;
cursor: pointer;
color: white;
margin-top:1px;
margin-right: 0px;
position: center;
background-size: cover;
font-weight: bolder;
}
h1 {
font-family: comic sans ms, sans-serif;
text-align: center;
font-size: 60px;
text-transform: uppercase;
font-weight: bolder;
color: white;
margin-bottom: 6px;
}
h2 {
font-family: comic sans ms, sans-serif;
text-align: center;
font-size: 30px;
text-transform: uppercase;
font-weight: 300;
color: white;
padding-top: 14%;
}
.wrapper {
position: center;
width: 750px;
height: 100px;
margin-left:auto;
margin-right:auto;
margin-top: 150px;
font-size: 17px;
}
.image_wrap {
margin-top:20px;
height: 70px;
margin-left:55px;
}
.fl_image {
float: left;
margin-right:5px;
margin-bottom: 10px;
}
.content h6 {
font-family: courier new;
font-size: 13px;
text-transform: uppercase;
font-weight: 300;
color: green;
margin-bottom: 10px;
margin-left: 25px;
margin-top: 100px;
}
.content p {
font-family: courier new;
text-align: center;
font-size: 20px;
letter-spacing: 3px;
color: #ffffff;
}
div.gallery {
margin: 10px;
border: 0px solid #ccc;
float: left;
width: 250px;
height:250px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: 100%;
}
.gallery1 {
float: left;
position: absolute;
margin-top: 320px;
margin-left: 10px;
}
div.gallery {
margin: 10px;
border: 0px solid #ccc;
float: left;
width: 300px;
height:250px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: 100%;
}
.gallery2 {
float: left;
position: absolute;
margin-top: 840px;
margin-left: 10px;
}
.text4 {
margin-left: 360px;
font-size: 30px;
color: black;
margin-top: 220px;
margin-bottom:3px;
position: left;
float: left;
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 10000 ; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 600px;
max-height: 450px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
.transparent_btn {
font-size: 10px;
line-height: 50px;
color: #EC7063 ;
background-color: transparent;
border: 1px solid #D98880;
padding: 1px 20px;
border-radius: 10px;
text-decoration: none;
cursor: pointer;
transition: background-color ease 300ms;
font-weight: 200;
font-size: 16px;
margin-top: 620px;
float: left;
}
.transparent_btn:hover {
color: #fff;
background-color: rgba(245, 183, 177,0.8);
}
.btn {
position: absolute;
z-index: 1;
margin-left: 640px;
}
.btn2 {
position: absolute;
margin-top: 530px;
margin-left: 640px;
}
<!Doctype html>
<html>
<head>
<title> Hotels </title>
<link style="text/css" href="Hotel.css" rel="stylesheet" > </link>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).on('scroll', function(){
if($(window).scrollTop()){
$(".sub-content").addClass('active');
}else{
$(".sub-content").removeClass('active');
}
})
});
</script>
<script>
$(document).ready(function(){
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img04");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
});
</script>
</head>
<body>
<header>
<div class="background_wrap">
</div>
<div class="content">
<div class="sub-content">
<img class="image_wrap fl_image" src="Pics&Video\picture.png" height="100px" margin-left="5px" alt="Image One"/>
<div id="list" >
<ul>
<li><a> <i class="fas fa-file-signature"></i> Contact</a></li>
<li> <i class="fas fa-user"></i> About</li>
<li> History </i></li>
<li><a> Activities <i class="fas fa-caret-down"></i></a>
<ul>
<li> Hotels</li>
<li> Festival</li>
</ul>
</li>
</ul>
</div>
<h6>Calbayog Tourism</h6>
</div>
</div>
<div class="wrapper">
<h2>Search all travel deals, in one go</h2>
<h1> HOTEL </h1>
</div>
</header>
<main class="main1">
<div id="body_1">
<h2> Calbayog Hotel </h2> <h6> 2 Places </h6>
<h4> Baypark Hotel </h4>
<div class="gallery1">
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog1.jpg" width="600" height="400">
</div>
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog2.jpg" width="600" height="400">
</div>
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog3.jpg" width="600" height="400">
</div>
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog4.jpg" width="600" height="400">
</div>
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img04">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
</div>
<div class="btn">
View
</div>
<div class="text4">
<h4> Ciriaco Hotel </h4>
</div>
<div class="gallery2">
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco1.jpg" alt="Cinque Terre" width="600" height="400">
</div>
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco2.jpg" alt="Forest" width="600" height="400">
</div>
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco3.jpg" alt="Cinque Terre" width="600" height="400">
</div>
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco4.jpg" alt="Forest" width="600" height="400">
</div>
</div>
<div class="btn2">
View
</div>
</div>
</main >
<footer style="background: #1a75ff;">
<div style="text-align: center; margin-left: 40%; margin-top: 30px; font-family: courier new;">
#2019 Calbayog Tourism. All rights resereved.
</div>
</footer>
</body>
</html>

First you have to move your scripts inside document.ready. They are accessing DOM elements before rendering is completed.
Then you have to move the modal up. Do something like this and you'll see the modal move up. $("#img01").css({position:"absolute", "top": "0px"})
Then you can proceed :)