如何使我的顶部栏元素在响应中可点击？

Question

我的顶部栏中有一个漂亮的菜单、一个徽标和一个搜索元素。不幸的是，我无法弄清楚如何在我的平板电脑和移动响应中同时使它们全部可点击。由于 z-index，我认为它们是堆叠/透明的——这就是问题所在。我只能使菜单+搜索可点击或徽标。我尝试在每个元素上将它们更改为 inline-block，尝试了 pointer-events 属性，并且还更改了 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;
}}

Answer 1

我很难理解这篇文章。

具体是什么意思“当我将它移到顶部栏时，它变得不可点击。”？ “上移”中的“它”是什么？

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

  <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> 标记中？