JS/CSS - Function openNav() not working on Homepage(Only)
Question
For some reason, this element (Menu Element) is unclickable on the website (XXXXXXXXXXXXXXXXX.com) but ONLY on the homepage.
The element works perfectly fine on other pages and in editors.
I can't put the finger on what causes it to break on the homepage.
I'm inspecting with Chrome's debugger, but I still don't find the issue, even less how to fix it.
Q: What could be possible causes of this issue and what do you think would be a good starting point to troubleshoot?
Website:
www.somewhatmystical.com
Menu Element: https://www.w3schools.com/code/tryit.asp?filename=GD13CSPL7EEC
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: 'Lato', sans-serif;
}
* {
box-sizing: border-box;
}
.column1 {
color: white;
float: left;
width: 50%;
padding-left: 200px;
padding-right: 100px;
padding-top: 200px;
text-align: right;
font-size: 50px;
height: 575px;
border-right: 1px solid gray;
background-color: black;
}
.column2 {
color: white;
float: right;
width: 50%;
text-align: left;
padding: 10px;
font-size: 22px;
padding-left: 100px;
padding-top: 150px;
text-decoration: none;
height: 575px;
background-color: black;
}
a:link {
color: white;
}
a:hover {
color: #C0A539;
}
.row:after {
content: "";
display: table;
clear: both;
}
.overlay {
height: 0px;
width: 100%;
position: fixed;
top: 0;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
color: #FFFFFF;
}
.overlay a {
padding: 8px;
text-decoration: none;
color: #FFFFFF;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #C0A539;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
</head>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<div class="row">
<div class="column1">
<p>welcome to our online art journey. You can read our thoughts or you can simply write to us</p><br><br>
</div>
<div class="column2">
<a href="#" style="text-decoration: none;">blog</a>
<a href="#" style="text-decoration: none;">quotes</a>
<a href="#" style="text-decoration: none;">shop</a>
<a href="#" style="text-decoration: none;">about</a>
<a href="#" style="text-decoration: none;">contact</a>
<br><br><br><br><br>
</div>
</div>
</div>
</div>
<span style="font-size:50px;cursor:pointer;color:rgba(192,192,192,0);text-align:center;display:block;margin-top: -65px" onclick="openNav()">MENU</span>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0";
}
</script>
</body>
</html>
3 answers
solution1
0 2020-03-20 00:32:41
It is clicable. It does in function problem is about showing. You may change heigt to display but u should also try to change style in your sub elements in menu
<script>
function openNav() {
document.getElementById("myNav").style.display= "contents";
}
function closeNav() {
document.getElementById("myNav").style.height = "none";
}
</script>
solution2
0 2020-03-20 00:55:18
Put it in a div and position the div in the top-right corner with position: absolute , then add the onclick listener to it. Make sure it has a width and height .
To confirm it's clicking you can set a console.log as the initial event handler function.
solution3
0 ACCPTED
The issue was:
Another element was using an ".overlay" class, which conflicted with the menu element ".overlay" class.
I simply renamed the different class to ".overlay1"
- Credits to JBis for pointing it out.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.