[Tips & Scripts] Mobile Hamburger Navigation Menu

navigation
ui
design

#23

Is it possible to change the animation to slide from the right instead of toggle?


#24

Thanks for sharing everyone but I am struggling here.

I went through the process to create a Desktop Sticky Nav Bar and that works beautifully.

When I follow the instructions to create the Mobile Menu my Desktop Nav Bar goes blank. (appears as expected at first but if you click on one of the buttons they all disappear after the page scroll).

The Mobile Menu doesn’t toggle at all for me.

Obviously this is user error on my part as I am new to Unbounce, JS and CSS. Any thoughts on the best way to source a solution?


#25

Super quick question guys - can I do this just on mobile?
I don’t want this for the desktop. I mean, I have a navbar for the desktop… but just don’t want it to stick. However, I need the hamburger menu for mobile.

Is it possible?


#26

Just used this in a project - love it!

As an FYI to others, in my case I needed to update the CSS with a z-index. There were some overlapping elements.

Also, I used visibility of sections to hide sticky on desktop and show on mobile, works great. :slight_smile:


#27

I’m looking to do something similar to this where I have a hamburger menu at the top left corner on mobile, but instead of the menu sliding down, I need it to slide in from the left. I want a close button in place of the hamburger when the menu is open to close it (slides back out) and the menu will contain links to iTunes apps instead of anchors on the page.

Is there a way I can modify the CSS/js to do this? I have the viewport width set to 320 currently.


#28

Absolutely Mark. You just need input the box IDs for your mobile nav and none from desktop. They just used the desktop sticky nav as an example of what you can do. You can apply the same script/css for mobile only if you want. Also anything you create for the mobile view can be hidden from the desktop view using the Contents tab on the left.


#29

Hi Noah, thank you for this awesome tip!

If anybody else was wondering how to get the menu drop down box to not show out of bounds and be easier to edit go to your guide settings and untick out-of-bounds warnings.

Took me a little while to figure that out!


#30

Great tip @Mark_Standeven!


#31

This is great. Thank you!

One question. When I add Google tag manager to my page, the hamburger menu doesn’t function correctly. Any thoughts on what to do?


#32

How did you solve this? I’m having the same issues.


#33

My menu is not showing up in both mobile and desktop.


#34

Hey I’ve been running this script for a while now. Thought it looked great and all was well but then I just looked and noticed that when I scroll down to another section, the menu is overlapped by content. Meaning that the menu is actually pushed behind text and images. Can anyone help me on this? Ridiculous that this isn’t an inbuilt feature.


#35

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:


#36

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


#37

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


#38

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


#39

Oh ok… awesome thank you.


#40

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…


#41

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


#42

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.