Hamburger menu

Last updated: June 8, 2021 Written by: Avatar Justyna
Table of contents
Table of contents

The hamburger menu is a popular type of navigation, often found on mobile views. After clicking on the icon (three horizontal lines) the drop-down menu displays.

An example of implementation in Landingi platform:

You can download this landing page, import it on your account and customize the ready-to-use hamburger menu to your needs.

From this manual, you will learn how to create a simple hamburger menu on the mobile view of your landing page. It is possible also to create this menu type at the desktop view.

The exemplary implementation below:

hamburger menu landing page

Hamburger menu on a landing page

1. Log in to your Landingi account and go to the editor of your landing page. Enter the mobile view.

2. Add a new section on the top of your landing page.

3. Add an icon to this section – drag and drop the icon widget to the chosen place. Then select the icon and click Change.

change icon landingi

4. From the list of available icons choose the ‘fa-bars’.

choose hamburger icon

You can adjust, e.g., icon size or color by using the widget options on the right panel.

5. Make a navigation menu in the newly created section. You can create them from any elements and widgets. In our example, we used the text widget. Expanding and collapsing will be available after publication. Every menu position links to the landing page section or to the outside URL address. The section background will be the background for both the narrow bar at the top of your landing page (visible when the menu is collapsed) and the expanded menu.

add links to hamburger menu

6. Select the section and give it the class ‘menu-section’.

section class hamburger

7. Select the icon and give it the class ‘trigger’.

icon class hamburger menu

8. Enter the Page Settings on the right panel and click on Custom CSS button.

9. Add the CSS code indicated below. If you have also other codes here, add it above them, at the top (@import rule in our code cannot be placed below other CSS codes).

@import '';
.trigger {
	cursor: pointer !important;

.animated {
	-webkit-animation-duration: .35s !important;
	animation-duration: .35s !important -webkit-animation-fill-mode: both;
	animation-fill-mode: both;

10. Click on Save and close and publish your landing page.

11. Go to the Dashboard > JavaScript Codes of your landing page. Click Add script. You can also enter the JavaScript Codes tab directly from the editor.

dashboard javascript landingi

12. Paste the JavaScript code indicated below, on the Body bottom position on the Main page. More about custom codes you can find in the manual Your own JavaScript.

<script src=""></script>
<script src=""></script>
  let editorHeight = $('.menu-section').height()
  let minHeight = ($('.trigger').position().top * 2) + $('.trigger').height()
  $('.menu-section .container').css('height', 'inherit')
  $('.menu-section > div > div').children().not('.trigger').not('.logo').addClass('menu wow')
  new WOW().init()
  function burgerControl() {
    $('.trigger').toggleClass('fa-bars fa-times')
    if ($('.trigger').hasClass('fa-times')) {
      $('.menu-section').animate({height: editorHeight})
    } else {
      $('.menu-section').animate({height: minHeight})
  var burger = _.throttle(burgerControl, 650)

13. Click Add to save the changes.

Enter your landing page on the mobile device and check if it displays correctly.


Was this manual helpful?