Using Mobile Menu CK you can create a mobile menu that looks like an application using icons. What you need to do is to click on the icon theme and add the icons for your menu items. Let see more in details ...

 

1. Edit the styles

 

From the component

Go in the Admin menu >> Components >> Mobile Menu CK to edit the style of your module. Click on the style title to edit it, or create a new one.

mobile menu styles list

From the module

Go in your Module options >> Mobile Menu CK >> Select style, then choose your style in the list or create a new one. Once you have selected it you can edit it directly using the Edit button.

mobile menu style option

 

2. Select the icon preset

Once you are in the edition interface, you can click on the Presets tab and then on the Icon theme. It will load the styles to give your menu the desired look.

mobile menu icon preset

 

3. Add the icon for each menu item

For now your menu has the icon theme applied but you don't have any icon for your menu item. You must edit your menu and select which icon to use for each item. go in the Admin menu >> Menus >> YOUR_MENU >> MENU_ITEM >> Edit. You will see the additional options in the Mobile Menu CK tab.

mobile menu menuitem options

Here you can use the following options

  • Mobile icon : Set an image that will be used only for the mobile menu, this will not be rendered into your normal menu (desktop menu). This is where you must set your icon
  • Text replacement : this is an alternative text. In this example test 1 will be used on the desktop menu, and Agenda on the mobile menu. If you want to use the same text for both desktop and mobile menus, then you can leave this field empty
  • Enable for mobile : this allows you to totally disable your menu item for the mobile menu and only show it on the desktop menu

 

Now that you have added an icon for your menu items, you can have a look at the final result : your mobile menu looks like a mobile application with nice icons.

preview icon theme

Download Mobile Menu CK

 

Newsletter

Outil de création rapide, puissant et responsive.

En savoir plus

Extensions favorites

logo maximenuck 110 logo pagebuilderck 110 logo slideshowck 110template creator ck large 449