CODEWITHSUNDEEP
wordpressbootstrap-4wordpress-themingwai-aria
Paul Wolf
Paul Wolf

Reputation: 3

The dropdown menu 'aria' only works below 714px Bootstrap Wordpress theme

I am building a custom site using a child theme of Wordpress 'storefront' but I have big problems with the mobile bootstrap NAV toggle.

With the Menu toggle responsive menu it does not reveal the drop down at 870px wide and only reveals at 714px wide. I've been trying to fix the issue but had no success the only thing I have noticed is the button class on the toggle. If you look in the code inspector the aria-expanded="false" is shown at around 870px wide and if I manually enter into the code the value "true" so reads aria-expanded="true" it works fine.

Any assistance is greatly appreciated I've been trying to fix for hours but had no success in correcting. Web link below it's the mobile main navigation menu top rightside

https://tiltrak.com/webdev/

Upvotes: 0

Views: 276

Answers (1)

slugolicious
slugolicious

Reputation: 17435

aria-expanded is a hint to screen readers as to the purpose of an element. It does not provide any kind of behavior. In general, whether you set that attribute or not will make no difference on how your website works.

However, since ARIA attributes are just like any other html attribute, you can have conditional logic in your CSS based on the value of an attribute, and if that conditional logic hides or unhides element, it could affect how your website looks.

In this case, there's a 

<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>

and when aria-expanded gets toggled when clicking on the button, the following CSS comes into play:

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

But that's kind of a red herring. Yes, there is an aria-expanded in the CSS but it's on a <ul>, and the <ul> is not being expanded, the menu button is. But, when the button is selected, the main <nav> has a "toggled" class added to it. It changes from

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

to

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

which causes the <div> that has the submenu to have a max-height, causing it to be displayed.

But the main problem is that there is a 

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

Only one of those <div> elements should be visible, and if the classname is a clue, the first one should be visible on desktop devices and the second one should be visible if on mobile. But when I try your sample URL on firefox, and press ctrl+shift+M to turn on the mobile simulator and set the device to "iphone X" and put it in landscape, I get an 812px wide display and the "primary-navigation" is visible and the handheld is hidden. I think that's the problem.

If I switch to "iphone X" but in portrait mode, the width is 375px and it works ok.

You might have a problem with a <link media="screen and (min-width:500px)"...>. (That's just a sample number, 500px, I'm not saying that's what you're using.)

Look for where the two <div> primary-navigation and handheld-navigation get initialized and how one of them gets display:none set.

Upvotes: 2

Related Questions