Whenever I check my webpage on a computer, clicking the <span> item below opens the full-screen search perfectly.
<li><span class="text-white" id="open_search" onclick="openSearch()"><i class="fas fa-search mr-2"></i>Search</span></li>
However, the issue arises on mobile devices where nothing happens when I click the span. What could be the problem?
I am utilizing bootstrap 4, but I don't believe that is relevant as this search "plugin" is quite basic and compact.
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="Close">×</span>
<div class="overlay-content">
<form method="post">
<input required="required" type="text" placeholder="Enter product name to search.." name="search" id="search">
<button class="text-white" type="submit"><i class="fa fa-search text-white mr-2"></i></button>
</form>
</div>
</div>