Bug – .hidden-xs max-width value.

Hello, just reporting another bug.

From – QuadMenu > Options > Responsive > Screen Small

When setting the “Screen Small” px value, the plugin also automatically updates the “Extra Small” (.hidden-xs) breakpoint within the /wp-content/uploads/storefront-child/quadmenu-locations.css file.

The problem is that the “.hidden-xs” “max-width” value is set the same as the “min-width” for “.hidden-sm” – when XS should be set 1px LESS than the SM value (css excerpt below).

This problem becomes noticeable when you’re hiding a navbar item at handheld resolutions (XS) and say replacing it with something else. That item will be hidden 1px before switching to the handheld menu/nav item, meaning you lose that nav item at 768px (e.g. the native portrait resolution of an iPad mini). So when “Screen Small” is set to 768px, the plugin should set .hidden-xs to max-width: 767px.

I hope that makes sense, if not let me know. You can test this behavior on a desktop – just setup a menu with an item hidden at handheld resolution and then scale your window down to 768px, the nav item will be hidden (when it should still be displayed), then drag it 1px more and it switches over to the handheld/mobile menu.

In my local test environment I manually set xs to 767px in quadmenu-locations.css and it then works as expected.

@media (max-width: 768px) {
#quadmenu .quadmenu-navbar-nav .hidden-xs {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
#quadmenu .quadmenu-navbar-nav .hidden-sm {
display: none !important;
}
}

System
WordPress 5.8
Storefront (Theme) 3.7.0
WooCommerce 5.5.2
QuadMenu 2.1.4

The page I need help with: [log in to see the link]