Why does my Contact anchor element not working
Question
I was trying to do a dropdown menu for my API, but I can't make the anchor links work. I have already tried to change the "a" element to onclick call javascript:void(0) and add a function on it to get the gmail opened but when I do it it doesn't work too. Can you review this code, please. I appreciate your answers. Thanks.
Here it is the code:
<html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" />
<header>
<nav>
<div class="navbar" id="navbar">
<center>
<a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
<a href="#"><i class="fa fa-fw fa-credit-card"></i> Pricing</a>
<a href="#"><i class="fa fa-fw fa-code"></i> API</a>
<a href="#"><i class="fa fa-fw fa-book"></i> Docs</a>
<a href="mailto:example@gmail.com" name="email"><i class="fa fa-fw fa-envelope"></i> Contact</a>
</div>
</center>
</div>
</nav>
</header>
<header>
<div class="t-menu" id="t-menu">
<div class="dropdown" id="dropdown">
<div onclick="ShowMenu()" class="bars-icon" id="bars">☰</div>
</div>
</div>
</header>
<script>
var tmenu = document.getElementById('t-menu');
var dropdown = document.getElementById('dropdown');
var bars = document.getElementById('bars');
var navbar = document.getElementById('navbar');
function ShowMenu(){
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
if(tmenu.style.display = 'flex'){
tmenu.style.display = 'none';
bars.style.display = "flex";
navbar.style.display = 'block';
}else{
dropdown.style.display = 'block';
navbar.style.display = 'none';
}
}
}
</script>
<style>
html{
font-family: open sans,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen-Sans,Ubuntu,Cantarell,helvetica neue,sans-serif;
overflow-x: hidden;
}
h2{
font-size: 1.8rem;
}
a{
transition: 0.7s ease-in-out;
text-decoration: none;
}
a:hover{
transition: 0.7s ease-in-out;
text-decoration: underline;
}
.header-menu{
display: flex;
width: 100%;
background-color: black;
}
/* Style the navigation bar */
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
header{
position: absolute;
inset:0;
width:100vw;
}
/* Navbar links */
.navbar a {
float: none;
text-align: center;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
/* Navbar links on mouse-over */
.navbar a:hover {
background-color: #000;
}
/* Current/active navbar link */
.active {
background-color: rgba(82, 87, 247, 1);
}
.t-menu{
display: none;
}
@media screen and (max-width: 640px) {
.navbar{
display: none;
transition: 0.7s ease-in-out;
}
.navbar a {
transition: 0.7s ease-in-out;
float: none;
display: flex;
height: auto;
}
.t-menu{
display: inline-block;
position: fixed;
z-index: 1;
width: 100%;
height: 6vh;
background-color: #555;
}
.bars-icon{
position: flex;
text-decoration: none;
color: white;
font-size: 8vw;
margin-bottom: 1vw;
margin-left: 2vw;
}
}
</style>
</html>
1 answers
solution1
0 2022-08-13 23:17:30
Your second header , with your t-menu inside, is rendering on top of your first header menu and receiving all the click events, so they're not making it to the a tags in your first header . I'd recommend setting your second header to display: none or pointer-events: none when it's not open.
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.