In this example, a hamburger menu will be created for mobile viewport only. However, it can be used for every viewport in Landingi, with ease.

Open the editor and go to mobile view. You need to create two elements, and set their visibility to mobile only:

  • Menu icon
  • Menu itself

The menu icon is required to toggle the menu in and out. It can be every icon you want or some other element as well. The key to making it work is to add an appropriate class for the widget. Our script uses "burger" class name.

Next, you need to create a menu. It is enough simply to use the text widget, and again, a class is required. Here we use "navimob" class.

Now it is time to add a CSS rule for the menu. Feel free to modify the rule as you please. As a default, I use a white background and padding of 25px.

.navimob {
background: #fff;
padding: 25px;


The last step is adding JavaScript code in the landing page dashboard:


<script>
$( ".navimob" ).hide();
$( ".burger" ).click(function() {
  $( ".navimob" ).toggle(500);
});
</script>

From now the menu should be hidden by default and click on a hamburger icon should unfold and hide it. 

Unfolding from above
If you prefer your element to unfold vertically from the top to the bottom and then fold back to the top, you can use another jQuery function - .slideToggle(), instead of .toggle().

Your code can look like so then:

<script>
$( ".navimob" ).hide();
$( ".burger" ).click(function() {
  $( ".navimob" ).slideToggle(500);
});
</script>

Please notice that you can change the time length of unfolding and folding in both .toggle() and .slideToggle() functions. You need to set time in milliseconds to do so. Just input adequate numerical value into the bracket, like in my example code.

Did this answer your question?