Unbounce: How to Add a Mobile Hamburger Navigation Menu

👉 Free Unbounce 14 day trial + 20% off for the next 3 months: https://unbounce.grsm.io/ivan?sid=u-mhamburger-1

👉 Community post with the code as shown in the video: https://community.unbounce.com/t/tips-scripts-mobile-hamburger-navigation-menu/3289

👉 Icon website mentioned: https://coolsymbol.com/

👉 My Unbounce playlist so you can find every important piece you need: https://www.youtube.com/watch?v=p6JljKqlwFc&list=PLS46f4aLJ2hOdr6ZRw-9cnSXVWfa0r86i

👉 Check out my courses!: https://www.ivanmana.com/all-courses

Hey all – in this video I show you how to add a mobile hamburger navigation menu in Unbounce.

This might seem like a confusing process (and it very well might be), but once you get into it and understand what every step means, it will all make much more sense to you.

Let’s get into it and go over all the steps:

✔ Step 1: Create a navigation menu bar

The first thing you have to do is add an actual navigation bar for both desktop and mobile.

It does NOT have to be a sticky header bar like shown in my video – it can be any regular navigation bar however you want to make one.

Just drag and drop buttons or text to the top and hyperlink them to specific sections of the page.

✔ Step 2: Copy your navigation menu bar from desktop to mobile

Now you just have to copy your desktop navigation menu bar and paste it into the mobile view.

HIDE all the buttons from the original navigation menu bar on mobile and tidy up the new navigation menu that you just posted.

THIS is the navigation menu that will show up when someone clicks on the hamburger menu in Unbounce on mobile – so pretty it up, make the options show up as you want them to, change the color, and so on.

You can then drag this navigation menu to the side – you no longer need it to show up on the main screen.

Head back over to desktop and HIDE the new navigation bar that we just copied – this is to be seen ONLY on mobile.

✔ Step 3: Add the mobile hamburger icon

Now we have to add the actual “button” that someone can click on in mobile in Unbounce to actually pull out the menu.

So you can just drag and drop a button and write the word “Menu” on there.

Now it would be good to add a little hamburger menu icon, so if you go to the website linked above (coolsymbol.com), you can find a wide of variety of symbols you can use.

Find one that YOU want to use, click on it, and paste it right after the “Menu” text in Unbounce.

We are done with adding the elements – now all we have to do is add the code for these new elements in Unbounce.

✔ Step 4: Add the JavaScript & CSS code to your page

First, copy the code provided on the page linked above into your Unbounce JavaScript tab.

Name it “Mobile hamburger Menu” or something of the like so you can refer to it later on quickly and easily.

Then go to the Unbounce community page linked above and click on the URL taking you to the codes.

Copy the JavaScript code provided and paste it just below the previous code we just added.

Then take the CSS code and paste that in the “CSS” tab of your Unbounce page.

Click “Save” to both and that’s it for the coding part – now we have to go in and edit these codes to match OUR page.

✔ Step 5: Change the code to match YOUR page

Now we just have to change the element IDs to match our specific page.

Go back into the JavaScript tab of your Unbounce page and change the element IDs here.

The first element ID you see should be changed with your ID for the actual mobile button someone will click on to trigger your menu.

The next two element IDs should be replaced with the ID of the mobile box that shows up when someone clicks on the button.

So select these corresponding IDs, go to the bottom-right of the page, scroll to the bottom, and copy the element ID provided into these areas in the JavaScript tab of Unbounce.

That is all for the JavaScript side.

Now onto the CSS side – change the element ID here with the ID of your mobile navigation box that pops up when someone clicks the button.

Also note the height for your mobile navigation bar – you need to set the height in this CSS field for the “top” part to match the height of your navigation bar.

This will indicate where your navigation dropdown should show up exactly… xxx pixels from the top.

That’s pretty much it – you might need to play around with this and keep in mind this isn’t a perfect mobile hamburger menu. There are some issues I came across when testing this, such as seeing a huge bar if you go to mobile, don’t select anything, and then head back into desktop.

If you find that this dropdown isn’t as centered as you might like, then change the “margin-left” pixel setting – it starts at -160px, but if you reduce that to -100px for example, it will center the dropdown a little more. So play around with this depending on your page.

And that’s it!

👉 Like my Facebook page! https://www.facebook.com/onlinemarketingessentials

👉 Check out my courses: https://www.ivanmana.com/all-courses

source