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 Smartpages platform:

https://landpage.co/burger-menu

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 on a landing page

  1. Log in to your Smartpages 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.
  1. From the list of available icons choose the ‘fa-bars’.

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

  1. 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.
  1. Select the section and give it the class ‘menu-section’.
  1. Select the icon and give it the class ‘trigger’.
  1. Enter the Page Settings on the right panel and click on Custom CSS button.
  2. 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).
  1. Click on Save and close and publish your landing page.
  2. 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.
  1. 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.
  1. Click Add to save the changes.

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

Was this article helpful to you?

admin

Posts  

Comments are closed.