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:

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';
    }

  }

}

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;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" />
<header>
  <nav>
    <div  id="navbar">
      <center>
        <a  href="#"><i >   </i>&nbsp;Home</a>
        <a href="#"><i ></i>&nbsp;Pricing</a>
        <a href="#"><i ></i>&nbsp;API</a>
        <a href="#"><i ></i>&nbsp;Docs</a>
        <a href="mailto:[email protected]" name="email"><i ></i>&nbsp;Contact</a>
    </center>
    </div>
  </nav>
</header>
<header>
  <div  id="t-menu">
    <div  id="dropdown">
      <div onclick="ShowMenu()"  id="bars">☰</div>
    </div>
  </div>
</header>

CodePudding user response：

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.