Accordeon menu - mobile vs non-mobile display

Yes, I was trying for that. My template is set to change the layout at 768px wide. In other words, at width=768px the sidebar-left position (where the Accordeon menu goes) shows to the left of the main content. At width=767.99999 that position switches to be full-width above the main content.

It seemed that I should therefore put 768 in the limit field of the Accordeon Mobile plugin. However, when plugin limit is 768 and screen width is 768, I get the menu sidebar showing with only the tiny mobile bar at the top of it. (see screenshot Capture_AccMenu-Limit768_ScrnWidth768.jpg)

When I set the plugin limit to 767.99999 and the screen width is 768, I get the sidebar showing with the regular Accordeon menu showing AND the mobile bar below it - so I get the menu twice. (see screenshot Capture_AccMenu-Limit767-99999_ScrnWidth768.jpg)

To test these, I am using Chrome's developer tools and setting the width, as well as simply resizing my Firefox screen (showing the width in the title).

The site is currently set to 768 limit in the plugin, if you wanted to check it yourself and see if you get the same thing.

Wendy

At width=767.99999

this means 767.99999px, and this does not exists. 1px is unsecable

my question now, have you tested with a tablet ? do you have strange behavior on it ?
because in fact the probability that you have just 768px with the given problem is really low in my mind

by my side tested at 768px and the menu mobile is active, the only difference between firefox and chrome is the template position that is not rendered identically

Hi CEd,

A decimal-place measurement might not be technically real, but it does seem to overcome problems in rendering. If I don't do that, the site sometimes loses styles around the breakpoints. And, as I've explained and provided screenshots for, I'm getting different results for different screenwidths and different mobile limit breakpoints, and none of them work the way they're supposed to.

I don't currently have access to a tablet, as such, but am trying to arrange for the site to be tested on an actual iPad, but this could take days to arrange. That's why I have tried testing it on a number of emulators, including manually resizing the screen in Firefox (with the screen dimensions showing), Chrome developer tools, and a couple of different emulator sites. The screenshots I uploaded before were taken from one emulation but confirmed to operate the same on the other emulators.

When you say the mobile Accordeon menu is active at 768px, are you testing it on a 768px wide tablet or an emulator?

Wendy

I also tested with firefox and chrome
by my side I don't have the issue like you that the mobile menu and normal menu are showing in the same time

the rule in your source code is like this you can see that both elements are hidden/shown at the same time
have you retested since I updated the plugin on your website ? because the error could be from before but not anymore by my side

That's so weird.

To answer your question, yes, the last set of screenshots I uploaded were done after you updated the plugin (and after I'd cleared my cache too). I hear you that you don't get the same results, but I'm at a loss to explain why I'm getting the results shown in the screenshots.

The only thing I can see that might cause a problem is the fact that you use the same class-name to hide both the Maxi and Accordeon mobile menus (see below). Is it possible this could be the cause of the problem?

hidemenumobileck

is a css class that you can apply to any menu item to not show it on mobile
this does not affect the menu display at all

I have just sent you an email with a new version to test, let me know