We Keep Coding

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.

Embeded Twitter Link Showing Up Above Hamburger Dropdown

I am building a website for a college class and I've run into a problem. I can't seem to find the answer when I google it, so I made an account to post it here. I hope that someone is able to identify what is going on.
As you can see, the embedded twitter post is showing up on top of the hamburger menu and I'm not sure how to get it underneath.
Here is the HTML (It's still a work in progress and I'm pretty new so please forgive me for any ugly code):
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="height=device-height, initial-scale=1.0">
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="images/run.png">
</head>
<body>
<header>
<div id="weatherBar" class="weatherBar">
<button class="hamburger">☰</button>
<button class="cross">˟</button>
<nav class="menu">
<ul>
<li>
About the Events
<ul class="submenu">
<li>Starting Times</li>
<li>Course Details</li>
<li>What to Bring</li>
</ul>
</li>
<li>Upcoming Events</li>
<li>Registration</li>
<li>Packet Pick Up</li>
<li>About Us</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
</nav>
<div class="socialLinks">
<img src="images/fb-ico.png" alt="" class="iconHeight">
<img src="images/twit-ico.png" alt="" class="iconHeight">
<img src="images/inst-ico.png" alt="" class="iconHeight">
</div>
</div>
</header>
<main class="wrapper">
<div id="details" class="details lightSub contentFill contentPad">
<h2 class="subHeader">What People are Saying</h2>
<div class="sub_head_line_white"></div>
<div class="socialWrapper centering">
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fcas222cascade%2Fposts%2F366912850439109&width=350&show_text=true&height=214&appId" width="350" height="214" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
</div>
<div class="socialWrapper centering">
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Fantastic weather for training! Can't wait to get in the water for open water swims!</p>— CAS 222 (#pcccas222) May 10, 2018</blockquote>
</div>
</div>
</main>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="scripts/ham.js"></script>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>
Here is the javascript:
$(document).ready(function () {
$(".cross").hide();
$(".menu").hide();
$(".hamburger").show();
$(".hamburger").on("click", function () {
$(".menu").slideToggle("slow");
$(".hamburger").hide();
$(".cross").show();
});
$(".cross").on("click", function () {
$(".menu").slideToggle("slow");
$(".cross").hide();
$(".hamburger").show();
});
$(".menu a").on("click", function () {
$(".menu").slideToggle("slow");
$(".cross").hide();
$(".hamburger").show();
});
});
Here is the CSS:
Menu.css
.hamburger {
background: none;
position: relative;
top: 0;
right: 0;
line-height: 35px;
color: red;
border: 0;
font-size: 1.4em;
font-weight: 700;
cursor: pointer;
outline: none;
z-index: 10;
}
.cross {
background: none;
position: relative;
top: 0;
right: 0;
color: red;
border: 0;
font-size: 3em;
line-height: 55px;
font-weight: 700;
cursor: pointer;
outline: none;
z-index: 10;
}
.socialLinks {
background: none;
position: fixed;
top: 8px;
right: 10px;
color: red;
border: 0;
cursor: pointer;
outline: none;
z-index: 10;
}
.iconHeight {
height: 20px;
}
.menu {
/* z-index: 10;*/
font-weight: 700;
width: 100%;
height: 100vh;
background: rgb(0, 0, 0, .85);
position: absolute;
top: 25px;
padding-top: 20px;
right: 0;
text-align: left;
font-size: 2em;
text-decoration: none;
color: white;
font-family: 'Roboto Condensed', sans-serif;
z-index: 10;
}
.menu ul {
list-style-type: none;
list-style-image: none;
margin: 0;
padding: 0;
text-decoration: none;
color: white;
}
.menu li {
display: block;
padding: 15px 0;
padding-left: 25px;
padding-right: 25px;
}
.menu li:hover {
display: block;
padding: 15px 0;
padding-left: 25px;
padding-right: 25px;
color: red;
}
.menu ul a {
text-decoration: none;
color: white;
margin: 0;
}
.menu ul a:hover {
text-decoration: none;
color: red;
}
.menu ul a:active {
text-decoration: none;
color: white;
}
.menu ul a:visted {
text-decoration: none;
color: gray;
}
.submenu li {
padding-left: 25px;
}
style.css
body {
.grayGradient;
}
main {}
.hero {
background-image: url(../images/run3.jpg);
background-size: auto;
background-position: center;
height: 500px;
width: 100%;
}
.heroBot {
width: 100%;
height: 20px;
background-color: #000;
}
.weatherBar {
position: fixed;
height: 40px;
width: 100%;
background: black;
border-bottom: 3px red solid;
margin-left: auto;
margin-right: auto;
}
footer {
height: 30px;
width: 100%;
background: black;
border-top: 3px red solid;
}
h1 {
.fontOswald;
font-size: 60px;
color: white;
font-weight: bold;
text-align: center;
}
.headerSize {
font-size: 50px;
.fontNarrow;
font-weight: normal;
letter-spacing: 1px;
}
.titleDiv {
padding-left: 15px;
width: 95%;
padding-top: 40px;
margin-left: auto;
margin-right: auto;
padding-right: 15px;
border-bottom: 3px red solid;
}
.titleText {
padding-top: 20px;
padding-bottom: 20px;
}
.disc {
margin-top: 40px;
margin-bottom: 20px;
background-color: #fff;
padding: 20px;
.fontBaseText;
font-size: 1.5em;
color: #000;
text-align: center;
font-weight: lighter;
line-height: 30px;
}
.facebookFeed {
margin-left: auto;
margin-right: auto;
display: block;
}
.contentPad {
padding: 20px 20px 45px 20px;
}
.contentFill p {
font-size: 1.2em;
.fontBaseText;
line-height: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.subHeader {
.fontNarrow;
font-size: 1.8em;
}
.subHeaderAlt {
.fontNarrow;
font-size: 1.8em;
color: #fff;
}
.sub_head_line {
height: 5px;
width: 95%;
.grayGradientBtR;
}
.sub_head_line_white {
height: 5px;
width: 95%;
.grayGradientWtR;
}
.darkSub {
background-color: #000;
color: #fff;
}
.lightSub {
background-color: #fff;
color: #000;
}
.tableDay {
text-align: center;
font-size: 1.2em;
.fontNarrow;
}
.timesTable {
margin: 10px;
margin-top: 20px;
align-content: center;
.fontBaseText;
}
.timesTable tr:first-child {
border: none;
}
.timesTable tr {
border-left: 2px #mainRed solid;
border-right: 2px #mainRed solid;
}
.timesTable table,
tr,
td,
th {
border-collapse: collapse;
padding: 3px;
}
.timesTable th {
font-weight: bold;
padding: 10px;
}
.timesTable td {
padding: 10px;
}
.timesTable tr:nth-child(even) {
background-color: #darkGray;
}
.raceName {
width: 180px;
}
.raceTime {
width: 100px;
}
.startingTimeTableWrapper {
width: 100%;
}
.centering {
.marginCenter;
}
.socialWrapper {
width: 350px;
margin-top: 10px;
z-index: -1;
}
.subHeader:before {
height: 25px;
display: block;
content: '';
}
.subHeaderAlt:before {
height: 25px;
display: block;
content: '';
}

is there a way to change the menu text colour when at the top of a website

I am using a menu that has a background which is seethrough at the top and when you scroll down the background color of the menu changes to black. In one of my pages the background of the whole website is white so when the user scrolls to the top, the menu background is white which makes it impossible to read the menu text. I was wondering if there is a code that can change the color of the text of the menu when the menu bar is at the top of the website the menu text changes black so it is readable. here is a picture when the menu bar is at the top of the website
and not at the top. I'll add the code that codes for the menu bar.
HTML & Script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Croydon Cycles</title>
<link rel="stylesheet" href="shop-style.css">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Location</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
setTimeout(function() {plusSlides(1) }, 1000)
})
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
font-family: verdana,sans-serif;
margin: 0;
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
box-sizing: border-box;
}
header {
width: 100%;
height: 60px;
background: url(hero.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}

You need to add the correct colors for .black class.
Before run the snippet click and Expand Snippet, because I added for large resolutions only, you can add in #media(max-width: 786px) for small resolutions (mobile devices).
I added <div style="height:1500px" class="only-for-scroll"></div> to force scroll.
I commented with //add this to you identify the changes that I did.
html, body {
margin: 0;
padding: 0;
width: 100%;
font-family: verdana,sans-serif;
margin: 0;
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
box-sizing: border-box;
}
header {
width: 100%;
height: 60px;
background: url(hero.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
/*add this lines*/
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
/*END*/
nav .logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #000;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #000;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Location</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div style="height:1500px" class="only-for-scroll"></div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
//setTimeout(function() {plusSlides(1) }, 1000)
})
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
</script>

How to make responsive iframe google maps full screen

I am trying to embed google maps in the website using iframes. I need this map to be fullscreen on any device when the map is shown. I can't figure out a way to do this, tried setting width and height to 100% which made it look like this ):
But right now my website looks like this:
Any way of making the map fullscreen?
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
height:100%;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
z-index:1;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
z-index: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="location-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" width="720" height="550px" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</body>
</html>

sorry i cant really get into adjusting your css right now but here is a little something i came up with when i need to output YouTube videos in iframes. try it out
<style>
#mediaPlayer{
position: relative;
height: auto;
padding-bottom: 56.25%;
padding-top: 1.875em;
overflow: hidden;
border: 0.1875em double #185875;
background-image:url('../video_loading.gif');
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
background-attachment: fixed;
/*to adjust the height and width*/
margin-right: 20%;
margin-left: 20%;
margin-top: 20%;
margin-bottom: 20%;
/*or you can use it in single line*/
margin:20%;
/*or if you want different margins for different sides in a single line*/
margin: 20% 20% 20% 20%;
/* the above means margin: top right bottom left; */
}
#mediaPlayer iframe{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 100%;
max-height: 100%;
}
</style>
/*instead of using margin just add a div and specify the exact height and width you want*/
<div style="height: 50%; width:50%;">
<center>
<div id="mediaPlayer">
<iframe id="play_now" width="100%" height="100%" src="" value="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</center>
</div>
The video_loading.gif background is usually a good idea for users with slow network to have something in the background while your iframe content is loading
but you have to find your own unique gif file/image and set it's location in the background-image:url('../file-location-here.gif');
just replace your <div class="box"></div> with the code above let me know how it turns out.

How about the following example. The solution came from Responsive iframe (google maps) and weird resizing. By tweaking padding-top and padding-bottom you can change the size.
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
.box {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
overflow: hidden;
}
.box iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
height:100%;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
z-index:1;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
z-index: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="location-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" allowfullscreen></iframe>
</div>
</div>
</body>
</html>
You can also try and use CSS variables:
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
let events = ['load', 'resize'];
let googleMaps = document.querySelector('.box iframe');
events.forEach( event => {
window.addEventListener(event, () => {
googleMaps.style.setProperty('--google-maps-height', `${window.innerHeight}px`);
});
});
.box {
height: 100%;
}
.box iframe {
width: 100%;
height: var(--google-maps-height);
border: none;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
height:100%;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
z-index:1;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
z-index: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="location-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" allowfullscreen></iframe>
</div>
</body>
</html>

Are you looking for something like this? Add the following code to your css and see if it does the trick.
iframe {
height: 100vh;
width: 100vw;
box-sizing: border-box;
}
Take a look at using viewport percentage