Mobile Menu is Hidden - Script Error in functions.min.js

Sydney
#1

Mobile Menu is no longer shown.

The has “hidden” class, making it display:none.

Resize handler is erroring out in functions.min.js.

“Uncaught TypeError: a is undefined”

In menu function:

c = document.getElementsByClassName(“btn-menu”)[0];

which is passed into

this.toggle(c, b);

“a” is undefined is “c” here, so its not finding anything with class name “btn-menu”.

I have disabled Max Mega Menu plugin and this does not affect this.

#2

Ok, as our theme is a child theme, looks like maybe I can update the header.php file and apply our customizations. Hopefully this works.

#3

Script error is gone after updating that file, but the mobile menu is still hidden.

<nav id=“mainnav-mobi” class=“mainnav hidden” role=“navigation”>

This element is not having the “hidden” class removed past the 1024 breakpoint.

#4

functions.js or its min variant:

menu: function() {

    if ( window.matchMedia( "(max-width: 1024px)" ).matches ) {
        const mobileMenu = document.getElementsByClassName( 'mainnav' )[0];          
        const menuToggle = document.getElementsByClassName( 'btn-menu' )[0];

        mobileMenu.setAttribute( 'id', 'mainnav-mobi' );

        mobileMenu.classList.add( 'hidden' );

Why is the nav hidden here? I can understand if there were 2 navs one for mobile and one for non, but it actually changes the id of the primary navigation and then hides it.

#5

Hi,

I am sorry to hear that you have run into issues with the mobile menu. I am happy to help out.

Perhaps there is other script from one of your plugins that is conflicting with the .hidden class.

To help me investigate this directly, please share a link to your website here.

Regards,
Kharis
aThemes Support

#6

As stated, the “hidden” class is being applied directly from the script in functions.min.js for breakpoint 1024px or below. This is the theme script.

If I do document.getElementById(‘mainnav-mobi’).classList.remove(‘hidden’); then I can see it.
I don’t understand why the theme script adds the hidden class.

#7

Hi,

I have passed this to our development team to check this further and find best possible solution for such this case.

Regards,
Kharis
aThemes Support

#8

Thank you!
As mentioned, this would make sense if there were two <nav> blocks…one for mobile and one for non mobile, but inspecting the source code, there is only one <nav> block, which “hidden” class does not affect if it has id “mainnav”, but it does in the case of “mainnav-mobi”.

#9

Hi,

We add the hidden class to hide the actual menu because the mobile toggle is outside of the menu. Max mega menu puts the toggle button inside the nav element, therefore it’s hidden.

The solution for you is simple, just use this:

#mainnav-mobi.hidden {
    display: block;
}

We should add built-in integration for it though.

Vlad

#10

Thanks Vlad!

That brings it back! But now the main horizontal menu is present above 768px breakpoint, which is fine, but due to the change in containers, it drops down now as it seems not to fit. Do you know which container specifically I might modify the CSS to get it to be at same level as logo?

menu1
menu11006×124 11.7 KB

#11

Ok, modifying the top: property from 28px to -18px positions it right and then i set background to transparent and all is well.

    document.getElementById('mainnav-mobi').style.top = '0px';
    document.getElementById('mainnav-mobi').style.backgroundColor = 'transparent';
    document.getElementById('mega-menu-wrap-primary').style.backgroundColor = 'transparent';

I will add some overrides in the css for this.

Thank you!

#12

for posterity

    @media screen and (max-width:1025px) {
      nav#mainnav-mobi {
        top:-18px;
        background-color:transparent !important;
      }
      
      div#mega-menu-wrap-primary {
        background-color:transparent !important;
      }
      div.mega-menu-toggle {
        background-color:transparent !important;
      }
    }