I have a simple slide in and out menu, Hamburger to open and X to close. It was working great before I loaded it into PHP and onto Wordpress. When I copied to Wordpress I originally put the script in my head before my meta tags like I usually do, this didn't work. I tried it in a few other places too without success. When I am inserting this into PHP and previewing my site both the open and close button show up and when clicked the menu does not appear. I am new to this, so any help is appreciated. Thank you.
I attempted to make a working example here: https://jsfiddle.net/zq7egqzf/
var button = document.getElementById("button");
var d3 = document.getElementById("d3");
function openNav() {
button.style.display="none";
d3.style.display="block";
}
function closeNav() {
button.style.display="inline-block";
d3.style.display="none";
}
html {
font-family: "Quicksand", sans-serif;
font-size:12px;
}
/* Header */
header {
border-bottom: 1px solid #E1E0E1;
margin-left: 35px;
margin-right: 35px;
height: 53px;
}
.sidenav {
height: 100%;
width: 200px;
position: absolute;
top: 60px;
left: 0;
z-index: 1;
font-size: 36px;
background-color: #ffffff;
opacity: 0.8;
transition: 0.5s;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 16px;
color: #000000;
display: block;
transition: 0.3s;
}
.sidenav a:hover, .offcanvas a:focus {
color: #BCBCBC;
}
#d3 {
display: none;
}
.lch {
padding-top: 11px;
padding-left: 13px;
width: 85%;
min-width: 250px;
max-width: 1175px;
position:relative;
}
.lolo {
position: relative;
width: 14%;
min-width: 80px;
max-width:
}
.wrapper {
display: flex;
align-items: content;
vertical-align: middle;
}
h1 {
margin: 0;
}
@media only screen and (max-device-width: 540px) {
h1 {width: 100%;}
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
#button {
padding-top: 15px;
}
.homephoto {
margin:30px;
}
<header>
<div class="wrapper">
<h1 class="menu">
<input id="button" type="image" src="hamburger2.png" onclick="openNav()">
<div id="d3">
<input id="button" type="image" src="close.png" onclick="closeNav()">
<br>
<br>
<br>
<div class="sidenav">
<a href="#"> - p o r t f o l
i o</a> <br>
<a href="#"> - m e e t
l o l o</a><br>
<a href="#"> - i n
s t a </a><br>
<a href="#"> - p r e s s </a>
<br>
<a href="#"> - c i a o</a>
</div>
</div>
</h1>
<h1 class="lch"> <a href="#"> <img
src="lcg2.svg"/> </h1>
<h1 class="lolo"> <a href="#"> <img
src="lolo2.svg"/> </h1>
</div>
</header>
<center>
<div>
<img class="homephoto" src="eclecticmaison.jpg"/>
</div>
</center>
</div>