×
Menu
Index

Navigation Bar Mobile tab

Navigation Bar Mobile tab
1

Use mobile menu

1. Use mobile menu
Select this option to show the navigation bar in mobile menu when in mobile layout. For example:
 
from:
to:
 
2

Menu name

2. Menu name
Set the name of the mobile menu. The default is "Menu".
3

Hide borders around menu if any

3. Hide borders around menu if any
Select this option to hide the borders of the menu.
4

Hide mobile menu image if any

4. Hide mobile menu image if any
Some navigation bars use images on the main items. They work well in desktop and tablet layout but not mobile. Select this option will hide these images in mobile menu. For example, the following works on desktop and tablet but not mobile.
As sub-menu styles are used for mobile menu even for the main items, select this option will fix the problem.
5

Hide first item

5. Hide first item
For some navigation bars, the first item is not used for showing any menu items, it is just used for placing decoration like the example below. However this item is unnecessary and may break the mobile menu in mobile layout. So select this option will hide the first item in mobile menu.
 
6

Hide last item

6. Hide last item
For some navigation bars, the last item is not used for showing any menu items, it is just used for placing decoration like the one above. However this item is unnecessary and may break the mobile menu in mobile layout. So select this option will hide the last item in mobile menu.
7

Hide images on sub-menu items if any

7. Hide images on sub-menu items if any
Some navigation bars may use images on the sub-menu. They may not be needed for mobile-menu. Select this option will hide them. Like the following example:
 
After selecting the option, the mobile menu will looks like below:
8

Indent images on sub-menu items if any

8. Indent images on sub-menu items if any
Rather than using "Hide images on sub-menu items if any". You can retain the images but you can indent them according to the levels of the menu items. Select this option instead of the above will show the following result:
9

Show button only

9. Show button only
Instead of using a full width mobile menu, you can use a button instead by selecting this option. The mobile menu like the one below:
will becomes this one:
10

Button alignment

10. Button alignment
Align the button to the left or to the right.
11

Margin from the edge of the alignment

11. Margin from the edge of the alignment
Set the margin between the mobile button and the left or right edge of the browser window depending on the alignment.
12

Rounded corners

12. Rounded corners
Select this option to use rounded corners for the button and to set the radius of the corners. It will change to this one .