Menu does not toggle on mobile

Hi @182tage,

Looking at your site – I see the stylesheet in your child theme has this CSS…

@media (max-width: 910px)
.site-header .menu-toggle {
    display: none;
    margin-top: 5px;
}

That appears to be what is hiding the toggle – and it is specific to your child theme. I’d recommend double checking the CSS in that theme – and see if removing that section helps.

Hi jordesign,

thank you for answering. I implemented this section because of the problem. Because the menu was shown while toggling does not work on mobiles I hided the menu and secondly also the menu button for mobiles. For a review of yours I will restore the formerly bad status for a few days tomorrow.

Meanwhile I also validated css and html and checked JavaScript but did not find any cause. The problem appeared suddenly and I have no idea why.

I’ve been taking a further look and do see a 404 error pointing to a custom javascript file – that could definitely be related.

If you switch back to just using TwentySixteen instead of the child theme – do you still have the same trouble with the menu?

Thank you for taking that further look. When i switch back the theme, the trouble is back. The full menu is shown on mobiles (<910px width) and toggling does not work. On desktop version everything is fine. Could you tell me in which context that 404 error is thrown? Any idea how to check the javascript backbone?

Hey @182tage! The menu on your site seems to be working fine now. Are you still facing this issue?

Hello properlypurple, thanks for asking. No, the issue is still existing in the background. I started to program an oldfashioned Javascript-workaround. On mobiles the toggling of the main menu is working now. I will add a similar solution for the submenus. It is a bad and dirty solution but nothing else helped.

In the footer.php i added:

function einaus(o)
{
if(eval('document.getElementById("'+o+'").style.display == "none"'))
{
eval('document.getElementById("'+o+'").style.visibility="visible"');
eval('document.getElementById("'+o+'").style.display="block"');
}
else
{
eval('document.getElementById("'+o+'").style.visibility="hidden"');
eval('document.getElementById("'+o+'").style.display="none"');
}
}

// Menü ggf. ?ndern
function checkMenu(o)
{
if(window.innerWidth < 910)
{eval('document.getElementById("'+o+'").style.display="none"');}
else
{eval('document.getElementById("'+o+'").style.display="block"');}
}

// Breiten?nderung beobachten
const mediaQuery = '(min-width: 910px)';
const queries = window.matchMedia(mediaQuery);
queries.addEventListener('change', event => checkMenu('site-header-menu'));

To the body tag in the header.php i added:

onload=”checkMenu(‘site-header-menu’)”

And furtheron in the header.php i added to the toggle-button

onclick=”einaus(‘site-header-menu’)”

If you have a better solution, let me know …

Hey @182tage! Can you try setting up a test site and test your child theme there, just to rule out anything else that might be causing this? You can do this on something like Wp Playground or InstaWP.