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:
Menu Label: Enter a text that will appear beside the Toggle Button.
It is shown in the image below:
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:
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:
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:
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:
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:
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:
Menu Label: Enter a text that will appear beside the Toggle Button.
It is shown in the image below:
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:
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:
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:
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:
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:
Updated on: 17/01/2024
Thank you!