css - 如何在响应中使顶部栏元素可单击？

我的顶部栏中有一个菜单，徽标和搜索元素。不幸的是，我无法弄清楚如何使它们同时在我的平板电脑和移动设备响应中都可单击。由于z索引，我认为它们是堆叠的/透明的-这就是问题所在。我只能使菜单+搜索可单击或徽标。我尝试将它们更改为在每个元素上进行内联块处理，尝试了指标事件属性，还围绕z-index值进行了更改，但没有成功。我该如何解决？

您可以在这里查看我的网站：www.rachelclayton.co

CSS：

@media only screen and (max-width: 767px) {
    #top-bar-logo {
    text-align: center;
    position: absolute;
}}

@media only screen and (max-width: 941px) {

#top-bar-logo {
    display: block;
}
#top-bar-logo img {
    max-width:60%;
    height:auto;
}
#mobile-social {
    display: none;
}
    #top-bar {
    height:40px;
    position:relative;
    line-height:40px;
    background:#ffff;
    z-index:99999;
}}

@media only screen and (max-width: 490px) {
#header {
    padding-top: 10px;
    padding-bottom: 10px;
}
#top-bar {
    height:35px;
    position:relative;
    line-height:35px;
    background:#ffff;
    z-index:99999;
}
#top-bar-logo img {
    max-width:70%;
    height:auto;
}
#top-bar-logo {
    display: inline-block;
}}

最佳答案

我很难理解这篇文章。

具体来说，这是什么意思：“当我将其移至顶部栏时，它变得不可单击。”？什么是“上调”？

我在您的网站上看到您用<img>包裹了<a>-很好。

  <a href="https://rachelclayton.co/"><img src="https://rachelclayton.co/wp-content/uploads/2019/05/RClogo.png" alt="Rachel Clayton" /></a>

您是否也尝试过将<div id="top-bar-logo">包装在<a>标记中？

关于css - 如何在响应中使顶部栏元素可单击？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56585219/