Расширение изображения за пределы панели навигации с помощью разделенного меню ⇐ CSS

[Anonymous]

Я переношу свой сайт с Wix на хостинг и сам работаю над его кодированием, но у меня возникли проблемы с панелью навигации. Предполагается, что это разделенное меню с изображением посередине, которое выходит за край панели навигации (желаемый дизайн заголовка от Wix Studio), и оно должно оставаться фиксированным все время. У меня получается исправить навбар и изображение по центру, но получается так: Текущий навбар. Кнопки не работают, панель навигации не разделена. Когда я комментирую позицию #logo в CSS, navLeft помещается поверх логотипа поверх navRight, и все кнопки работают. Я не хочу использовать JS без необходимости, и это будет полностью статический сайт.
HTML



Home
Schedule








Gallery
Contact





CSS
*,
*::after,
*::before {
box-sizing:border-box;
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
margin: 0;
padding: 0;
}

body {
margin:0;
}
header {
width:100%;
position:relative;
}

#logo {
width:100%;
z-index:2;
position: fixed;
}
.topnav {
text-align:center;
position:relative;
padding:5px;
background:#141B47;
position: fixed;
}
.topnav a {
float: none;
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

@media (min-width: 1060px) {
.navLeft {
float:left;
}
.navRight {
float:right;
}
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... split-menu