Skip to main content

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

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!

Great tip @Mark_Standeven!

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?

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

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

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.

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 😦

Hi Nathan,

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

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…

32%20PM

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.

Reply


Terms & ConditionsCookie settings