[Tips & Scripts] Mobile Hamburger Navigation Menu

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:

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


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.

What do you mean by that? Like what exactly do I have to do so that I get a drop down menu? How to hide my buttons?

When we open the page, the menu is default open. It is covering the hero title of the page. How can I make it default closed? Quick help is appreciated :sos:

hello there, could someone please help me out?

I’ve got my sticky nav bar up, hamburger drop-down done and also checked against the .unbounce file from above - I still can’t figure out why the hamburger drop-down isn’t from the sticky bar.

Here’s the landing page i’ve built: https://discover.cardup.co/personal/every4free/

Can anyone figure out how we can make it, so that it just goes off when clicked outside of drop down box? Right now, it use to stick even when we start scrolling down the page.