In this presentation, it is described how a Responsive WordPress menu can be created, by using AllWebMenus Pro and the AllWebMenus WP Plugin. Nowadays, Responsive Design is very popular as it is a great way for websites to be viewed perfectly by all the devices (PCs, tablets, smartphones).

1. How to create a Responsive
WordPress menu in AllWebMenus Pro
In this presentation we will see how we can create a
Responsive WordPress menu using AllWebMenus Pro
and the AllWebMenus WP plugin.
www.likno.com

2. The responsive menu feature was first included in AllWebMenus Pro v5.3.902
(January 2013).
To download the latest AllWebMenus version go to:
http://www.likno.com/download.html
www.likno.com

3. AllWebMenus Pro has a WordPress plugin to help you create WordPress menus with
ease in AllWebMenus Pro.
The AllWebMenus WordPress Menu add-in & plugin combination is designed to
transfer information from your blog (such as posts, pages, etc.) into the AllWebMenus
application and then create stylish, feature-rich navigation menus based on those
posts, pages, etc.!
Apart from creating menu items derived from your blog's structure, you can also fully
customize your menus by adding your own non-WordPress menu items with external
or internal links, html-rich content, colors, borders, effects, designs of your choice and
many more!
www.likno.com

4. You can download AllWebMenus Pro: http://www.likno.com/download.html
You can download AllWebMenus Pro WordPress plugin:
http://www.likno.com/addins/wordpress-menu.html
You can download WordPress: https://wordpress.org/download/
www.likno.com

5. Login to your WordPress and go to Plugins -> AllWebMenus.
Create a new menu and give it a name.
Then, you need to select the Menu Structure. You can populate the menu either with
an existing WordPress menu or by choosing Pages, Posts, Categories etc.
For this presentation, we select to populate the menu from an existing menu.
www.likno.com

6. Then, select the Menu Type.
We select “Static” Menu Type as we want the 2nd menu version to be a menu
item that clicking on it will display the whole menu as a sliding menu.
So, we cannot have Dynamic or Mixed type as we need to manually add the
new menu item in AllWebMenus Pro.
www.likno.com

7. Last, but not least, we select the Menu Positioning.
Then, hit the Publish menu (also saves changes in settings).
www.likno.com

8. Select the Generated “Menu Structure Code” and Copy that.
www.likno.com

9. Open AllWebMenus Pro.
A welcome screen appears, choose “Create a new menu project” and then click on “Continue”.

10. A new window is displayed, in this window you can choose the menu theme
you would like to start from.
After you have selected the desired theme click on “Select”.
www.likno.com

11. Go to the main menu and click on “Add-ins” -> “WordPress Menu” ->
“Import/Update Menu Structure from WordPress”.
www.likno.com

12. This popup window will appear, paste the menu structure code (you
previously copied from AllWebMenus WordPress plugin) and click on “Next”.
www.likno.com

13. Click on “Import Menu Structure (and replace existing)”.
www.likno.com

14. The Menu Structure seems like in the following screenshot.
The “W” icon in front of each menu item means that this is a menu item imported
from WordPress.
www.likno.com

15. We want our menu to be responsive, so we need to create the menu versions we need.
Go to Global Properties -> Responsive Menu -> Select Yes -> Select 2 menu versions and
change the width to 479.
So, the menu version 1 will be displayed for screens with width greater than 479px and
menu version 2 will be displayed in screens with smaller than 478px width.
www.likno.com

16. We select Version 2 from the toolbar.
We notice that the Menu Structure is copied by the version 1 menu structure.
www.likno.com

17. Now, it’s time to add a new menu item in Menu Structure of menu version 2,
so that the whole current menu structure will fit in it.
This way, we will create the effect we need for the responsive version of our menu.
www.likno.com

18. www.likno.com
Right click on Main Menu Group and select Add Item.
When you create it the following dialog will appear,
write the name you want and hit the right arrow to
copy it in all menu states.

19. www.likno.com
Select the item we just added and click on the
up arrow. This will move this item upper in the
structure.
Alternatively, you can right click on it and select
Move Item Up.

20. www.likno.com
Next step is to move the whole menu structure inside
that new MENU item.

21. www.likno.com
We select each of the main menu items and click on
the right arrow to move them under the MENU item.

22. www.likno.com
The structure now looks like in the following screenshot.
The whole menu structure we previously had, is inside the new MENU item we added.
As a main menu item we only have the MENU item and the actual menu is inside this,
as a submenu.

23. We need to change the Menu Type to Sliding.
Click on Menu Type and select Sliding.
www.likno.com

24. We need to also define as Sliding Menu types the other levels of our menu.
In Style Editor, we select the Sub Groups Style and click on Type, select the Sliding
menu type and click on Refresh.
We do the same process for the Sub Groups Style+.
www.likno.com

25. Let’s give some minimum width to our menu version 2 so that it takes the full width.
Go to Style Editor -> Main Group Style -> Minimum Width and type 478 (px).
www.likno.com

26. You are free to make any other customization you need.
The menu version 1 looks like:
www.likno.com
The menu version 2 looks like (MENU appear first and on click or mouse over
the users will see the rest of the menu):

27. Finally, you can set the Menu Positioning for your menu versions.
In case all the versions will have the same menu positioning, you can set it in one menu
version and then Clone the positioning to the other versions, as well.
www.likno.com

28. Compile the menu project.
Go to Tools -> Compile WordPress Menu…
www.likno.com

29. Finally, switch back to your WordPress Admin page (in AllWebMenus Plugin).
Choose the zip file produced and click Upload ZIP file.
The menu will be published and act as responsive according to your settings.
www.likno.com

30. Visit
www.likno.com
for more information
www.likno.com