[Tips & Scripts] Mobile Hamburger Navigation Menu

  • 29 February 2016
  • 67 replies
  • 5171 views
Noah
Userlevel 7
  • Noah
  • Former Unbouncer
  • 126 replies

community tips scripts banner

Building on the Sticky Navigation Bar Community Post, this tutorial shows you an easy way to take your navigation bar in Unbounce and make it mobile friendly.

The benefit of doing this is to give your users a way to quickly navigate your mobile landing page while allowing them to jump to the form at any time.

See this effect in action here (view on mobile):
http://landingpage.noahmatsell.ca/mobile-menu/

How to Install in Unbounce

Click Here for Instructions

🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.

⚠️ Before We Begin…

If you don’t have your navigation bar set up yet, start here.

Download the Scripts

Grab the latest menu_box.css and  menu_toggle.js files here:
https://gist.github.com/noahub/2c67b14bc043b049f394

Optional: Download the .unbounce template

You can download the .unbounce file for this project here.

Instructions

Step 1.
Copy your navigation bar box element in desktop, switch to the mobile editor, and paste the box on your page. This will be your mobile dropdown menu! Style to your liking.

Step 2.
Still in mobile, you will now want to hide the buttons in the original navigation bar and add your toggle button/image.

Step 3.
Switch to the desktop editor and hide the newly created dropdown menu box element.

Step 4.
Copy and paste the following snippet to the Javascript section with placement ‘Before Body End Tag’.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

This is the reference to the jQuery library. Next, paste the menu_toggle.js Javascript code below the snippet.

Step 5.
Replace “#lp-pom-image-120” with the ID of your toggle button/image from Step 2 and both instances of “#lp-pom-box-113” with the ID of your menu box created in Step 1.

Step 6.
Paste the menu_box.css CSS code in the Stylesheets section.

Step 7.
Replace “#lp-pom-box-113” with the ID of your menu box from Step 1 and the ‘top’ value with the pixel height of your original navigation bar.

Testing:
Like anything else you implement on your page, you’re going to want to test this out thoroughly to see what effect (if any) it has on your conversion rates. We recommend running an A/B test and segmenting a small portion of traffic towards the page - just to be safe.

Conclusion:
We’ve given you the ground work, but we would love to see how you implement this on your own pages. For example, maybe you choose to make your header fully transparent and only include a menu icon? This is your chance to get creative and show the Unbounce community how you’re using this.


Can’t see the instructions? Log-in or Join the Community to get access immediately. 🚀

Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

67 replies

Finge
Userlevel 6
Badge +4

Thank you for this, Noah! Excellent!

Finge
Stefano
Userlevel 7
Badge +4

Incredible!

Thanks for the share, Noah!

Noah
Userlevel 7

Thanks Finge, glad you like it!

Noah
Userlevel 7

My pleasure Stefano!

Trishan_Arul

Trying to implement this with a menu bar that is on the bottom of the page but on mobile, the entire menu box is just blank. I only know basic HTML/CSS so I don’t fully understand what’s going on here. Seemed like perhaps the hamburger icon needed to be outside the menu box but I did that and everything in that section is still blank.

Since the “support team will be unable to assist if things go awry”, was wondering if anyone else could help. The page is: http://www.ohpisi.com . I published the mobile version anyway since its better to have that without a menu than no menu at all.

Noah
Userlevel 7

Hi Trishan, this solution is meant to build on the Sticky Navigation Bar from Joel’s post here. I’d recommend going through that post first before trying to implement this solution. I hope this helps!

Noah
Userlevel 7

Hi Trishan, this solution is meant to build on the Sticky Navigation Bar from Joel’s post here. I’d recommend going through that post first before trying to implement this solution. I hope this helps!

Trishan_Arul

Actually, I just realized the menu box was hidden on desktop as well so I went back to my original version without the hamburger… 😕

Trishan_Arul

I was trying to build it without the sticky nav bar because of the transparency but I now see why that won’t work. Thanks!

A

thanks for this - in the big picture this functionality SHOULD be an unbounce  widget - hopefully they are working on it.  Issues like this that are holding the product back…

Chris_Hockenberry

Everytime I try to upload the file to my account is fails…

J

Hi Chris, 
You should be able to upload the .unbounce file into your account without issue. Go ahead and give these steps another try and if that doesn’t work, let us know. 

S

How do I create a dropdown menu box element?
And I cannot change my ID…

Please help!

M

Works perfectly, BUT my menu is loading open. Any idea why? Copied the JS code exactly…

A

USing this on mobile and desktop  - much cleaner than horizontal menu on dekstop

A

 display: none; has to be in your CSS for the box

J

Ooooh, that sounds slick AJ!

D

I cant get this to work for love nor money. This should be part of Unbounce and not have to hack

My menu does appear if  _remove  display: none;  but in the wrong place and once you click on the toggle, the whole menu vanishes

Update - worked it out_

L

My menu is not showing anything. Can you take a look to my page please ? 
Thanks !

Kenji_Sano

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

N

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?

M

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?

digibomb
Userlevel 6
Badge +1

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. 🙂

Tristan_Ramberg

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.

Tristan_Ramberg

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.

Reply


Terms & ConditionsCookie settings