Menu disappearing bug

Hi,

While testing and tweaking the theme (Author: Writer WDA by WPDevArt), I came across a minor issue and a workaround that I wanted to share (quite fitting, given that it’s soon Easter 🙂 ).

If you start on a large screen (desktop) and then resize the window down to tablet or mobile width, the responsive behavior works as expected.

However, if you then open the mobile menu (the three-line “hamburger” icon) and close it again, and after that resize the window back to desktop width, the menu links in the header (on the right side) suddenly disappear.

The only way to get them back is to reload the page or clicking logotype/name (top left menu). Not a critical bug, but definitely a bit annoying. I’ve tested this both on live pages using the theme and on your demo site, and the same thing happens—the menu links are gone.

As a workaround, I fixed it by adding a small JavaScript snippet (using the WPCode plugin, free version). The code needs to be placed in the footer. Thought I’d share this in case anyone else runs into the same issue (I think they will) and wants the menu links to remain visible after resizing.

Maybe there are other ways to solve this, but hopefully WPDevArt will include a proper fix in a future update. And yes, all versions (wordpress, plugins and theme) are up to date, running the latest versions.

Regards
Freddie G

PS. As I mentioned, the placement of the snippet is important; i.e. Location: Footer (or in WPCode choose “Auto insert –> Footer”
Save and Activate by Toggle: Active

(function() {
function fixMenu() {
const nav = document.querySelector('.navbar-wpdevart');

    if (!nav) return;
    if (window.innerWidth > 960) {
        // remove all screensizes
        nav.classList.remove('open', 'active', 'toggled', 'menu-open');

        // repair styles
        nav.style.display = '';
        nav.style.height = '';
        nav.style.maxHeight = '';

        // show desktop menu again
        const menu = nav.querySelector('ul');
        if (menu) {
            menu.style.display = '';
        }
    }
}
// Execute both on resize and direct when page loads
window.addEventListener('resize', fixMenu);
window.addEventListener('load', fixMenu);

})();

• This topic was modified 1 month, 3 weeks ago by gotmeister.