Menu not responsive. Not working iPad/iPhone. Chosen theme

Thanks for using Chosen!

I’m sorry to hear about this issue. Can you link me to your site? I will be able to debug this once I can check it out.

Thanks!

I was about to address the same issue. On the iPad, when using Safari, the dropdown menu in the header does not unfold when you hold the iPad in landscape (long side down). There’s no problem to access the menu when holding the iPad like a phone, with the short side down and also not when looking at my website on an Android tablet or using Firefox on the iPad. The issue only occurs for iPad and Safari.

My website is https://daviocious.com and I’m using the Chosen Theme with the Pro Plugin. The dropdown menu that’s causing the problems is the one under ‘Portfolio’.

Thanks for all the detail, it was very helpful!

I was able to find the source of the bug. I’ll fix this in the next update for Chosen, but for now you can use the following CSS to get the dropdown menus working on iPads in landscape mode:

.menu-primary-items .menu-item-has-children.open > ul {
  visibility: visible;
  top: 100%;
  top: calc(100% + 1px);
  opacity: 1;
}

Please copy and paste the above code into the “Custom CSS” section in the Customizer (Appearance > Customize). Once added there, it should take affect right away.

Got it and checked on my ipad, the dropdown menu works fine now. Thanks a lot Ben ??

You’re welcome ??

Hey guys,

I’m having a similar issue with my site (roseangel.nyc)

I’m viewing my site on a Samsung Note 4 and the drop down menu is not responding. The menu works fine on a laptop because it’s not dropdown. I’ve got a child theme, Chosen. How do I fix this?

I read the edits above but couldn’t find this in the header.php.

Here is what I currently have in my header php.

<?php

if ( is_home() ) {
echo ‘<h1 class=”screen-reader-text”>’ . get_bloginfo(“name”) . ‘ ‘ . __(‘Posts’, ‘chosen’) . ‘</h1>’;
}
if ( ! is_archive() ) {
return;
}

$icon_class = ‘folder-open’;

if ( is_tag() ) {
$icon_class = ‘tag’;
} elseif ( is_author() ) {
$icon_class = ‘user’;
} elseif ( is_date() ) {
$icon_class = ‘calendar’;
}
?>

<div class=’archive-header’>
<h1>
<i class=”fa fa-<?php echo $icon_class; ?>”></i>
<?php the_archive_title(); ?>
</h1>
<?php the_archive_description(); ?>
</div>

I’ll try to deactive and reactivate all my plugins to see if that helps.

Hello,

The error with the dropdown items on iPads was fixed in a previous update, so I believe this is a separate issue.

It looks like a Javascript error on the site is preventing the Javascript in Chosen from working. This is needed to make the menu open when the button is pressed.

Could you try deactivating your plugins and then testing the mobile button? I think the Javascript error must be coming from one of them, but I can’t tell which one.

Hey! Thanks for your advice. I deactivated all of my plugins and I’m still experiencing the same issue.

It’s strange, this problem arises on two separate occasions. When I’m viewing my website from mobile, and when I’m viewing my website on a computer browser while I’m in “Customize” Other wise the website appears normal.

I just visited the site again, and it’s now working for me on mobile. Have you changed anything else on the site, and is it working on your end now as well?

If it is still not working, it could be a caching issues. Try emptying the cache on the site if you use a caching plugin, and clear your browser’s cache before visiting again.