11 April 2017

On mobile websites, due to limited display space, the classic menu is often replaced by the so-called "Hamburger" menu.

 

We used it in the mobile version of our tutorial. In this article, you will learn how to make such a menu in the WebWave editor. On the screens below you can see how does it look like.

    
 

 

Creating “hamburger” menu

 

To create that kind of menu on your website, add a regular menu to your page. In the edit menu, add all the tabs that appear after the menu is expanded, and one tab that leads to, for example, the home page. Replace the label of the latter with several spaces.

 

Then add all the other labels (that appear after the menu is expanded) as second level to the label containing the spaces. The effect should look similar to this:

 

The next step is to set the icon under which the menu will be displayed. To do this, select the menu and select the option “edit the first level menu”.



 

When you select this option in the bottom panel, choose the background color for the menu icon, and then add a background image. As a background image we select the chosen icon and select the option “adjust”.

 

Now the first level of our menu looks the way you want.



 

Finally we have to edit the appearance of the second level so that it matches the rest of the website and we have a ready-made “hamburger” menu. You can find more about the menu here.

GO BACK             

How to add a hamburger menu to your website?

 

 

Copyright © 2011 — 2018

All Rights Reserved

PRODUCT

CONTACT 

contact@webwave.me 

YOU SHOULD USE WEBWAVE TOO!

Try - it's free

SIGN UP

SUCCESS STORIES

HELP & SUPPORT

LANGUAGE

SIGN UP

LOG IN

SIGN UP

LOG IN