问题描述
我在我的网站上创建了一些社交媒体图标。我的链接在桌面上运行良好，但在移动浏览器中点击它们时没有任何反应。这是网站 https://theopenbay.weebly.com 和代码 —
<!DOCTYPE html>
<html>
<head>
<Meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
padding: 10px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none!important;
margin: 5px 2px;
border-radius:50%;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-telegram {
background: #30a2e7;
color: white;
}
.fa:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<!-- Add font awesome icons -->
<a href="https://www.facebook.com/TheOpenBay" target="_blank" class="fa fa-facebook"></a>
<a href="https://t.me/TheOpenBay" target="_blank" class="fa fa-telegram"></a>
</body>
</html>
解决方法
欢迎来到 SO。我发现了这个问题。这些图标被“navmobile”元素挡住了。它覆盖了图标，因此无法“按下”图标。
这是由该元素的显示块样式引起的。因此，通过删除它，您将能够再次使这些图标可点击。
您的问题是，div#navmobile 与您的页脚重叠，#navmobile 具有 z-index:8，您可以做的是，您可以将 div#my-footer 的位置更改为相对和 z-index 高于 8 ，这里是代码（你应该添加到css中）：
#my-footer{position:relative; z-index:99}
我通过将 display: block 更改为 display: table 来解决它，这降低了导航移动高度。
上下文：上面由 Iliass Nassibane 发布的图片。