Cannot click on an item on mobile devices

When i view my page on PC, and when i click the <span> item below, the full screen search will open well.

<li><span class="text-white" id="open_search" onclick="openSearch()"><i class="fas fa-search mr-2"></i>Keresés</span></li>

But my problem is, on mobile, nothing happens when i click the span. Whats wrong with this?

I am using bootstrap 4, but i think this doesnt matter, because this search "plugin" is very simple and small.

function openSearch() {
  document.getElementById("myOverlay").style.display = "block";
}

function closeSearch() {
  document.getElementById("myOverlay").style.display = "none";
}
.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
}

.overlay-content {
  position: relative;
  top: 46%;
  width: 80%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  cursor: pointer;
  color: white;
}

.overlay .closebtn:hover {
  color: #ccc;
}

.overlay input[type=text] {
  padding: 15px;
  font-size: 17px;
  border: none;
  float: left;
  width: 80%;
  background: white;
  color:#333;
}


.overlay button {
  float: left;
  width: 20%;
  padding: 15px;
  background: #84bc3c;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.overlay button:hover {
  opacity:0.95;
}

#open_search { 
  cursor: pointer
}
<div id="myOverlay" class="overlay" onclick="closeSearch()">
  <span class="closebtn" onclick="closeSearch()" title="Bezárás">×</span>
  <div class="overlay-content">
    <form method="post">
      <input required="required" type="text" placeholder="Ide írja be a keresett termék nevét.." name="kereses" id="kereses">
      <button class="text-white" type="submit"><i class="fa fa-search text-white mr-2"></i></button>
    </form>
  </div>
</div>

1 answer

  • answered 2021-05-05 11:45 Eivind

    I tried to open the span both on mobile and on PC and it worked fine. So I suggest that you try to open the site on your mobile in incognito mode to make sure there isn't anything hanging in cache. It would also be helpful if you could specify what browser you are using on your phone and what version it is.