Mobile Menu Overview (Pro)
Location : Appearance > Customize > Header & Navigation > Primary Menu > Mobile Menu
The Zakra Pro Add-On enables you to have a separate Mobile Menu in place of your default menu. It comes with the following options:
Breakpoint
Background Color: Select the background color of the Mobile Menu.
It is shown in the image below:
![Change Mobile Menu Background Color](https://storage.crisp.chat/users/helpdesk/website/13f4d7c1b96d0000/zakra-mobile-menu-background-c_4z1i1m.png)
Menu Label: Enter a text that will appear beside the Toggle Button.
It is shown in the image below:
![Add Menu Label](https://storage.crisp.chat/users/helpdesk/website/13f4d7c1b96d0000/zakra-add-menu-label_1add3mi.png)
Menu Text Position: Select whether the Menu Text appears on the Left of the Toggle Button or on its Right.
Style:
Choose between these two Styles for your Mobile Menu.
First option: Mobile Menu only covers the Left part of the screen.
Second option: Mobile Menu covers the screen completely.
The First option is shown in the image below:
![Zakra Mobile Menu Style 1](https://storage.crisp.chat/users/helpdesk/website/13f4d7c1b96d0000/zakra-mobile-menu-style_18d3jec.png)
Close Icon: Choose the icon for the button that closes the Mobile Menu.
Style
Font Size: Change the size of the Toggle Button for the Mobile Menu.
Color: Set the color of the Toggle Button for the Mobile Menu.
It is shown in the image below:
![Change Toggle Color](https://storage.crisp.chat/users/helpdesk/website/13f4d7c1b96d0000/zakra-change-toggle-menu-color_5au7bt.png)
Color: Select the color of the Menu Items.
Hover Color: Select the color of the Menu Items in Hover state.
Active Color: Select the color of the Active Menu Item.
Border Bottom: Set the size of the borders under the Menu Items.
Border Bottom Style: Choose between Solid, Dotted, and Dashed Style for the borders.
Border Bottom Color: Choose the color of the borders.
These options are shown in the image below:
![Customize Mobile Menu Items](https://storage.crisp.chat/users/helpdesk/website/13f4d7c1b96d0000/zakra-customize-mobile-menu-it_12whl53.png)
Open Icon: Select the icon for the button which opens up the Sub Menu.
Close Icon: Select the icon for the button that closes the Sub Menu.
These options are shown in the image below:
![Mobile Open and Close Icon](https://storage.crisp.chat/users/helpdesk/website/13f4d7c1b96d0000/zakra-mobile-open-and-close-ic_8p7768.png)
Color: Choose the color for the Sub Menu items.
Hover Color: Choose the color for the Sub Menu items in the Hover state.
Active Color: Choose the color for the Active Sub Menu item.
These options are shown in the image below:
![Change Sub-Menu Items Color](https://storage.crisp.chat/users/helpdesk/website/13f4d7c1b96d0000/zakra-change-mobile-sub-menu-i_17eq136.png)
The Zakra Pro Add-On enables you to have a separate Mobile Menu in place of your default menu. It comes with the following options:
Toggle Menu
Breakpoint
Background Color: Select the background color of the Mobile Menu.
It is shown in the image below:
![Change Mobile Menu Background Color](https://storage.crisp.chat/users/helpdesk/website/13f4d7c1b96d0000/zakra-mobile-menu-background-c_4z1i1m.png)
Menu Label: Enter a text that will appear beside the Toggle Button.
It is shown in the image below:
![Add Menu Label](https://storage.crisp.chat/users/helpdesk/website/13f4d7c1b96d0000/zakra-add-menu-label_1add3mi.png)
Menu Text Position: Select whether the Menu Text appears on the Left of the Toggle Button or on its Right.
Style:
Choose between these two Styles for your Mobile Menu.
First option: Mobile Menu only covers the Left part of the screen.
Second option: Mobile Menu covers the screen completely.
The First option is shown in the image below:
![Zakra Mobile Menu Style 1](https://storage.crisp.chat/users/helpdesk/website/13f4d7c1b96d0000/zakra-mobile-menu-style_18d3jec.png)
Close Icon: Choose the icon for the button that closes the Mobile Menu.
Toggle Button
Style
Font Size: Change the size of the Toggle Button for the Mobile Menu.
Color: Set the color of the Toggle Button for the Mobile Menu.
It is shown in the image below:
![Change Toggle Color](https://storage.crisp.chat/users/helpdesk/website/13f4d7c1b96d0000/zakra-change-toggle-menu-color_5au7bt.png)
Menu Items
Color: Select the color of the Menu Items.
Hover Color: Select the color of the Menu Items in Hover state.
Active Color: Select the color of the Active Menu Item.
Border Bottom: Set the size of the borders under the Menu Items.
Border Bottom Style: Choose between Solid, Dotted, and Dashed Style for the borders.
Border Bottom Color: Choose the color of the borders.
These options are shown in the image below:
![Customize Mobile Menu Items](https://storage.crisp.chat/users/helpdesk/website/13f4d7c1b96d0000/zakra-customize-mobile-menu-it_12whl53.png)
Sub Menu Items
Open Icon: Select the icon for the button which opens up the Sub Menu.
Close Icon: Select the icon for the button that closes the Sub Menu.
These options are shown in the image below:
![Mobile Open and Close Icon](https://storage.crisp.chat/users/helpdesk/website/13f4d7c1b96d0000/zakra-mobile-open-and-close-ic_8p7768.png)
Color: Choose the color for the Sub Menu items.
Hover Color: Choose the color for the Sub Menu items in the Hover state.
Active Color: Choose the color for the Active Sub Menu item.
These options are shown in the image below:
![Change Sub-Menu Items Color](https://storage.crisp.chat/users/helpdesk/website/13f4d7c1b96d0000/zakra-change-mobile-sub-menu-i_17eq136.png)
Updated on: 17/01/2024
Thank you!