Да они и будут скрыты, если меню кнопкой ≡ не раскрывалось.

Вы не поняли. Я не про скрытые пункты. Я про само поле на котором находится ≡ , лого и кнопка поиска. Все это поле активно (кликабельно).

Ну тут я не знаю как вы сделали, что-то во что-то не так вставлено у вас.

в Вашем примере тоже так. Вставьте свой код в хтмл и уменьшите экран и Вы увидите, что меню раскрывается при нажатии на любое место поля, а не только на ≡

Метка на которой находится кнопка меню на моб. устройстве имеет стиль block, то есть будет заниматься всю ширину области экрана, плюс отступы и т.п. Видимо об этом вопрос? У вас это должна быть отдельная кнопка (не такие стили иметь как в примере) со стилями которые вы для div ранее прописывали.

Читайте выше, вы не сделали того, что написано в html комментарии рядом с кнопкой.

.arrow {
    cursor: default;
}

Это удалить из стилей

кнопка toggle не работает (на маленьком/мобильном экране). На Вашем примере работает, а на сайте нет. Подозреваю, что конфликтует с label, input или еще с чем-то.

В таком меню нет конфликтов, если не работает, то проблему нужно искать в верстке.

Работа такого меню основана на верстке и стилях. За флажком находится его метка связанная с ним по атрибуту id. И хотя флажок скрыт, щелчки по его метке изменяют его состояние.

Я добавил в пример тег B с текстом Logo разместив его после метки кнопки меню, которой в режиме малого экрана изменил стиль с block на inline-block. Сейчас в верстке: флажок, за ним метка, за ней логотип, а за ним тег меню UL. Эти элементы имеют одного общего родителя, это элементы братья (родственные).

В CSS есть селектор соседних элементов A + B и родственных элементов A ~ B, а также псевдокласс :checked.

В мобильном режиме, щелчок по кнопке меню выберет флажок, поэтому будут работать эти CSS правила:

/* соседнему с флажком элементу, а это его метка, т.е. кнопка меню
устанавливается темный фон и светлый шрифт*/
input.toggleMenu:checked + label.toggleMenu{
        background: #000;
        color: #fff;
}
/*братским флажкам элементам UL, 
тут правила для меню и подразделов, 
а селектор братский выбран потому,
что , например, за флажком метка,
а для меню, за ней еще и логотип, и только потом само меню,
определяется позиция и макс. высота*/
input.toggleMenu:checked ~ ul,
input.toggleSubmenu:checked ~ ul{
        position: relative;
        max-height: 5000px;
}
/*а раскрытие меню и его подразделов
определено ранее до медиазапроса
так как горизонтальное меню также раскрывается щелчком*/
input.toggleMenu:checked ~ ul,
input.toggleSubmenu:checked ~ ul,
input.toggleSubmenu:checked ~ ul li{
    display: block;
}