[Tips & Scripts] Mobile Hamburger Navigation Menu

Had to pay some developer $$ but I just found that the problem with the script is in the stylesheet.

Here is the fix that was used:
notice that the z-index is now added.

/* Replace "#lp-pom-box-113" with the ID of your menu box and the 'top' value with the pixel height of your navigation bar */ #lp-pom-box-416{ display: none; position: fixed; top: 72px; left: 75%; margin-left: -160px; z-index : 9999; }

I know that digibomb mentioned it but as a coding amateur a z-index meant nothing to me.

And now for the painful part of going into all my past unbounce pages and changing the code :frowning:

Hi Nathan,
Was wondering how you figured your way around this? The same happens to me and I cannot figure it out

1 Like

Hello,

Can someone help me I downloaded the mpbole_menu.unbounce.zip but I’m not able to see the .unbounce file on the zipped folder?

Thanks,
Lawrence

Hi @lpaelmo,

Just delete the “.zip” end of the file and that’s your Unbounce file.

For some reason Google Drive adds the .zip at the end of the downloaded file.

Best,
Hristian

Oh ok… awesome thank you.

Need help on figuring this out for the Hamburger Nav. I can’t seem to find why the landing page’s text seems to be underneath the box for the mobile menu. I did use the template that was provided and this is the only issue I’m having and can’t figure it out please help…

Here’s the link to the site:
http://unbouncepages.com/copeley_hill_catering_menu

The menu works, but when I use the Fading menu together, the burger / fixed menu stops running, does anyone know how to solve it? I think they’re conflicting.

anyone know how to make this drop down menu pop for any button on the page and not just a sticky header?

Hey Uniting,

Did you ever find a solution for this issue? I followed the instructions to a “T” but when all is said and done the navigation box disappears on both desktop and mobile, while the button image in mobile is visible but does not function.

Hey Nathan,

Did you ever find a solution for this issue? I’m running into the same problems over here.

@Nathan_Lee @Uniting
Found a slide deck that helped me figure out the issue. The instructions are a little more clear for those of us who are newer to Unbounce.

Hope this helps!

Hi, could you explain how you solved this? I looked at the slide deck and still am having an issue where the menu is just not showing up at all.

Hey Tristan, did you ever find a fix to this?

Noah has the exact thing you describe on this example site that he used when describing how to build a sticky header (have to be on mobile to view) (https://calltoactionconference.unbounce.com/recap-2018/)

@Noah This article is three years old, and it seems like an important feature–many of the links are broken. Is it possible to get this updated? I’ve been trying to follow the instructions, but I keep getting directed to broken links.

For example, step 1…

If you don’t have your navigation bar set up yet, start here . - This link is dead

@mstewart13

Here are the articles you are looking for.

Not working for me either!

Hi @Havenly!

Would you mind sharing your page? It is hard to identify the issue without seeing it. Feel free to PM me if you don’t wish to post it on the thread!

Hi, I’ve implemented this but somehow it only responds to clicking of the hamburger icon (to open/close) the menu. This means when the user clicks a link or button within the open responsive menu, that link or button functions correctly but the menu doesn’t close afterwards - i.e. the slideToggle function is ignored or the event listener attached to the responsive menu doesn’t fire.

Would anyone have a guess as to how or why this may be happening?

I considered an event bubbling conflict of some sort and reviewed potential conflicts but the only other event listener attached here is a gtag attached to the CTA button within the responsive menu. However even when removing this the responsive menu still doesn’t close after the user taps a link within it.

I’ve implemented the jQuery and CSS code exactly as described above. Thanks for any ideas as to what may be going wrong.

I figured out the problem. Some other jQuery I wrote was interfering somehow with the responsive code.