Я пытаюсь понять, как настроить адаптивную панель навигации с логотипом по центру. ⇐ CSS

[Anonymous]

Я здесь новичок, но мне не удалось найти ответ на этот вопрос, используя только HTML, CSS и JS. Это моя первая экспедиция за пределы Wordpress. Я застрял на 3 дня и что-то упустил. Мне не с кем связаться, чтобы привлечь к этому внимание еще одной пары, поэтому я решил попытать счастья здесь. Десктопная версия работает, а вот мобильная у меня не работает. Я подумывал о создании отдельной панели навигации только для мобильных устройств, но решил, что, вероятно, есть способ сделать это без этого.
Заголовок прозрачен до наведения (понял)
Он липкий и преобразуется в другой цвет при прокрутке (понял)
Однако отзывчивая часть меня убивает, я теряю логотип по центру и не могу нажать кнопку, чтобы открыть раскрывающееся меню. Любая помощь приветствуется.

Код: Выделить всё

header {
display: flex;
flex-direction: row;
justify-content: center;
font-weight: 600;
height: 78px;
width: 100%;
background-color: transparent;
position: sticky;
transition: background-color 0.3s;
z-index: 10;
top: 0;
}

/* BLUE HEADER BACKGROUND ON HOVER */

header:hover {
background-color: #7B97A6;
}

/* START HEADER BACKGROUND TRANSITION ON SCROLL */

header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, #7B97A6 0%, #2C4149 50%);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
opacity: 0;
transition: opacity 0.3s;
z-index: -1;
}

.header-scrolled::before {
opacity: 1;
}

.menu {
display: flex;
flex-direction: row;
height: 100%;
align-items: center;
justify-content: space-evenly;
font-size: 1.8rem;
width: 100%;
height: 100%;
column-gap: 7vw;
}

.menu a {
color: #fff;
font-weight: 600;
text-decoration: none;
letter-spacing: 0.1rem;
}

.menu a:hover {
color: #cf0a2c;
transition-duration: 0.6s;
}

.btn-toggle,
.menu-container .links {
display: none;
}

.nav-logo {
display: block;
width: 144px;
margin: 0 auto;
float: none;
}

.logo {
width: 100%;
height: auto;
}

.icons {
height: 20px;
margin-right: 2px;
align-items: center;
vertical-align: middle;
}

.menu ul {
display: flex;
flex-direction: row;
list-style: none;
text-transform: uppercase;
column-gap: 6vw;
}

Код: Выделить всё

[list]
[*]
[img]icons\products-icon.svg[/img]
[url=#]Products[/url]

[*]
[img]icons\shopping-cart.svg[/img]
[url=#]Order-now[/url]

[/list]

[img]images\logo.png[/img]

[list]
[*]
[img]icons\service-locator.svg[/img]
[url=#]Service Locator[/url]

[*]
[img]icons\contact-icon.svg[/img]
[url=#]Contact[/url]

[/list]


[img]icons\mobile-toggle.svg[/img]

Вот изображение меню рабочего стола с логотипом в версии для настольных компьютеров.
Это именно тот внешний вид, который я ищу для мобильных устройств. Адаптивная раскрывающаяся навигация для мобильных устройств

Подробнее здесь: https://stackoverflow.com/questions/783 ... tered-logo