Как сделать так, чтобы мои элементы верхней панели реагировали на клики?

Question

В верхней панели у меня есть скользкое меню, логотип и элемент поиска.К сожалению, я не могу понять, как сделать их кликабельными одновременно на моем планшете и мобильном телефоне.Из-за z-индекса я думаю, что они сложены / прозрачны - вот в чем проблема.Я могу только сделать меню + поиск кликабельным или логотип.Я попытался изменить их на 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

Мне трудно понять этот пост.

В частности, что это значит «Когда я перемещаю его на верхнюю панель, он становится неактивным»?Что такое «это» и «сдвинуть его вверх»?

Я вижу, на вашем сайте вы завернули <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>?