Mobile Menu Invisible Hamburger dropdown - Broadcast Theme

Hello all, working on a client project and the mobile menu within the broadcast theme appears to show up as it’s dimming the background of the site, but the options are not showing up. I have set the mobile menu section to the correct menu, using the “new” mobile menu section but alas to no avail.

Any solutions would be appreciated! The desktop version just has a regular on screen non-dropdown menu.

Looking at boradcast theme documentation hasn’t helped either I have recahed out, and can replicate the issue with a fresh template, so it appears as though its not any specific code I have implemented.

There is a new mobile-menu block that you add underneath the header, which also isnt working so I am currently at a loss. Site is live and under www.highpinemaine.com

TIA!

Hi @MJBTV

I have checked your website. It seems that this issue has been resolved. If you have any other questions, please let me know.

There seems to be confusion about the mobile menu on the Broadcast theme and visibility of it. I had to search far-and-wide and finally got me to this post. Which made me discover ….

Given my ‘initial’ setup for the menu:

  • nav1
  • nav2 |
    ———| sub-nav1
    ———| sub-nav2
    ———| sub-nav3
    ———| sub-nav4
  • nav3
  • nav4

where i had 4 top-level items and 4 sub-nav items nested under one of the top-level items.

What happens is that Broadcast “hides” the sub-nav menu items when you click to expand the top-level item IN MOBILE.

I wondered - was there a setting “limiting” the height of the container? Makes no sense, right! So WHY THEN was it not showing all of my nav items, whereby the sub-nav items were able to be seen if only I “scrolled” (with my finger) to reveal the sub-nav level items.

Not sure I explain that right - but I could not see ALL OF my sub-nav items, in Broadcast theme, on mobile only.

Come to find out, the “container height” is set by the total number of TOP-level nav items, in my case four (4).

So, clicking to expand the top-level nav item, it revealed “too much content to fit” in the original mobile container placed into the DOM. Essentially in navigating the “second level” navigation item exposes (height-wise) more than the original four (4) items allocated into the DOM height for mobile menu, thus ‘hidding’ the sub-nav items.

Solution: place “more items” in the first-level nav than any second level navigation. So, like, you cannot place 2-top level items, and 26-sub nav items, and then expect the secondary navigation to display.

Thats our experience at the least. No custom .css to fix, I had to manipulate my site-structure in order to get the layout to work for us.

Hope this post helps someone to solution, and … they can stop digging.