Выпадающее меню «aria» работает только под темой Bootstrap Wordpress размером 714 пикселей

aria-expanded — это подсказка для программ чтения с экрана о назначении элемента. Он не обеспечивает никакого поведения. В целом, независимо от того, установите ли вы этот атрибут или нет, работа вашего веб-сайта не изменится.

Однако, поскольку атрибуты ARIA такие же, как и любой другой атрибут html, у вас может есть условная логика в вашем CSS, основанная на значении атрибута, и если эта условная логика скрывает или показывает элемент, это мог влияет на внешний вид вашего веб-сайта.

В этом случае есть

<nav id = "site-navigation" class = "main-navigation" role = "navigation" aria-label = "Primary Navigation">
  <button class = "menu-toggle" aria-controls = "site-navigation" aria-expanded = "false"><span>Menu</span></button>
  <div class = "primary-navigation">
    ...
  </div>
  <div class = "handheld-navigation">
    <ul id = "menu-mobile-main-navigation" class = "menu">
    ...
  </div>

и когда aria-expanded переключается при нажатии на кнопку, в игру вступает следующий CSS:

.main-navigation.toggled .handheld-navigation,
.main-navigation.toggled .menu>ul:not(.nav-menu),
.main-navigation.toggled ul[aria-expanded = "true"] {
  max-height: 9999px;
}

Но это своего рода отвлекающий маневр. Да, в CSS есть aria-expanded, но он на <ul>, а <ul> не раскрывается, кнопка меню есть. Но когда кнопка выбрана, к основному элементу <nav> добавляется «переключаемый» класс. Он меняется от

<nav id = "site-navigation" class = "main-navigation" role = "navigation" aria-label = "Primary Navigation">

к

<nav id = "site-navigation" class = "main-navigation toggled" role = "navigation" aria-label = "Primary Navigation">

что приводит к тому, что <div> с подменю имеет максимальную высоту, что приводит к его отображению.

Но главная проблема в том, что есть

<div class = "primary-navigation">...</div>
<div class = "handheld-navigation">...</div>

Только один из этих элементов <div> должен быть виден, и если имя класса является подсказкой, первый должен быть виден на настольных устройствах, а второй — на мобильных устройствах. Но когда я пробую ваш образец URL-адреса в Firefox и нажимаю ctrl+shift+M, чтобы включить мобильный симулятор, установить для устройства «iphone X» и перевести его в альбомную ориентацию, я получаю дисплей шириной 812 пикселей и «основную навигацию». " виден, а КПК скрыт. Я думаю, это проблема.

Если я переключаюсь на «iphone X», но в портретном режиме, ширина составляет 375 пикселей, и все работает нормально.

У вас может быть проблема с <link media = "screen and (min-width:500px)"...>. (Это просто примерный номер, 500 пикселей, я не говорю, что это то, что вы используете.)

Найдите, где инициализируются два <div> primary-navigation и handheld-navigation и как один из них устанавливает display:none.