POSSIBLE BUG + PART SOLUTION: Mobile menu media query


I’m currently making sure my colorlib illdy theme translates well to tablets and mobile. I have found the following possible bugs.

  1. When opening a tablet in the portrait position, such as an iPad, and then tilting it to a landscape position, a media query forces the header menu to change from mobile view to the standard top header menu, however, this media query does not take into account the active state of the mobile menu. Video attached. Therefore if you have the mobile menu open it stays open when you tilt the screen.

2… Tilting a tablet from vertical to horizontal view, in most third party cases, closes the mobile menu automatically. However, the illdy theme leaves it active.

  1. The mobile menu does not support a touch feature to close it. This render users to think the site is broken.

SOLUTION This point may be my fault as I modified the styling of the mobile menu. However, I’ve come up with a solution below.

@media only screen and (min-width: 993px){
.header-has-sticky-menu .responsive-menu {

Let me know if I am wrong or if there are any better solutions. I’ve tried a few third-party mobile menu plugins but none support the scrolling feature the illy theme uses. The illdly men is integrated so well but needs modifying to functino correctly.

Website: danedits.co.uk