Menu styles

⌘K

Menu styles

With menu styles, you can customize the way the menu looks. In order to ensure your bottom menu looks great, it comes with all the possible settings that can be adjusted.

This section is all about managing all of the settings for all the customizations you will make to your main menu.

Number of grids

The number of grids refers to how many menu items you wish to show on your menu. The input of the values can be done by you. There are usually 4 or 5 menu items that can be shown on mobile devices depending on the size of the device, but you can choose to display many more if you wish. A scrollable menu will be displayed in this case, so the user will be able to input as many menu items as he or she wants.

Background

It is possible for you to set the background color for each menu item in this section.

Padding

The padding setting is used to set the amount of padding applied to a menu.

Margin

Using the margin setting, you are able to adjust the amount of padding that is applied to the menu.

Item padding

The padding setting is used to set the amount of padding applied to the menu item.

Item offset

Setting the offset value of your menu item will allow you to create a spacing below or above the item in your menu. It is possible to set a value for every side attribute in order to achieve a space on every side of your menu item.

Item border

The border option can be used to set a border around menu items.

Item border-radius

Your website’s mobile menu items can be surrounded by a radius via this feature.

Item background

This setting can be used to change the item background color as well. If the same color is put on both options, the color will be one color, and if a different color is put on both options, the color will be a gradient color.

Item active background

Item active background allows changing the active color of the active menu. If the same color is put on both options, the color will be one color, and if a different color is put on both options, the color will be a gradient color.

Icon visibility

Using icon visibility, you can show or hide the menu item’s icon. A total of 4 options are available for this option.

  1. Show
  2. Hide
  3. Show when Active.
  4. Hide when active.

Depending on your preference, you can decide how to proceed.

Icon position

It allows you to set the item’s position in the menu list.

Icon offset

Icon Offset value offers the same spacing/black space on the top, bottom, right, and left of the Icon.

Icon typography

Changing the icon size and color for the menu item is possible with icon typography.

Active icon typography

Changing the active icon size and color for the menu item is possible with icon typography.

Text Visibility

Choosing text visibility determines whether or not text appears on a menu. There are several options available for displaying text, such as

  1. Show
  2. Hide
  3. Show when Active.
  4. Hide when active.

It’s up to you how you want to proceed.

Text typography

Provides a variety of text customization options, including color, font size, font family, line height, and letter spacing.

Active text typography

Provides a variety of text customization options for active text, including color, font size, font family, line height, and letter spacing.

This section is all about managing all the settings for all the customizations you will make to your sub-menu

Number of grids

There are grids that indicate the number of menu items that you want to display on your submenu. Values can be entered manually. It is possible to display a scrollable menu, allowing users to enter as many items as they like.

Background

This section allows you to customize the background color for each sub-menu item.

Padding

The padding determines how much padding is applied to the submenus.

Margin

You can adjust the padding that is applied to the submenu using the margin setting.

Item padding

The padding setting controls the amount of padding applied to the submenu item.

Item offset

Using the offset value of your sub menu item, you can create space below or above the item. To achieve a space on every side of your submenu item, you can set a value for every side attribute.

Item border

Submenu items can be surrounded by a border using the border option.

Item border radius

This feature allows you to surround the mobile submenu items on your website with a radius.

Item background

The item background color can also be changed using this setting. Putting the same color on both options will create a gradient while putting the different colors on both options will create a single color.

Item active background

It is possible to change the active color of the active submenu by changing the item’s active background. Putting the same color on both options will make the color one color, and putting the different colors on both options will make it a gradient color.

Icon visibility

Using icon visibility, you can show or hide the sub menu item’s icon. A total of 4 options are available for this option.

  1. Show
  2. Hide
  3. Show when Active.
  4. Hide when active.

Depending on your preference, you can decide how to proceed.

Icon position

It allows you to set the item’s position in the sub menu list.

Icon offset

Icon Offset value offers the same spacing/black space on the top, bottom, right, and left of the Icon.

Icon typography

Changing the icon size and color for the sub menu item is possible with icon typography.

Active icon typography

Changing the active icon size and color for the sub menu item is possible with icon typography.

Text Visibility

Choosing text visibility determines whether or not text appears on a sub menu. There are several options available for displaying text, such as

  1. Show
  2. Hide
  3. Show when Active.
  4. Hide when active.

It’s up to you how you want to proceed.

Text typography

Provides a variety of text customization options, including color, font size, font family, line height, and letter spacing.

Active text typography

Provides a variety of text customization options for active text, including color, font size, font family, line height, and letter spacing.

Child menu

This section is all about managing all the settings for all the customizations you will make to your child’s menu.

Number of grids

Grids indicate how many menu items you wish to display on your child’s menu. You can enter the values yourself. A scrollable menu can be displayed, allowing the user to input as many items as they wish.

Background

It is possible for you to set the background color for each child menu item in this section.

Padding

The padding setting is used to set the amount of padding applied to the child menu.

Margin

Using the margin setting, you are able to adjust the amount of padding that is applied to the child menu.

Item offset

Setting the offset value of your child menu item will allow you to create spacing below or above the item in your child menu. It is possible to set a value for every side attribute in order to achieve a space on every side of your child menu item.

Item border

The border option can be used to set a border around child menu items.

Item border radius

Your website’s mobile child menu items can be surrounded by a radius via this feature.

Item background

This setting can be used to change the item background color as well. If the same color is put on both options, the color will be one color, and if a different color is put on both options, the color will be a gradient color.

Item active background

Item active background allows changing the active color of the active child menu. If the same color is put on both options, the color will be one color, and if a different color is put on both options, the color will be a gradient color.

Icon visibility

Using icon visibility, you can show or hide the child menu item’s icon. A total of 4 options are available for this option.

  1. Show
  2. Hide
  3. Show when Active.
  4. Hide when active.

Depending on your preference, you can decide how to proceed.

Icon position

It allows you to set the item’s position in the child menu list.

Icon offset

Icon Offset value offers the same spacing/black space on the top, bottom, right, and left of the Icon.

Icon typography

Changing the icon size and color for the child menu item is possible with icon typography.

Active icon typography

Changing the active icon size and color for the child menu item is possible with icon typography.

Text Visibility

Choosing text visibility determines whether or not text appears on a child’s menu. There are several options available for displaying text, such as

  1. Show
  2. Hide
  3. Show when Active.
  4. Hide when active.

It’s up to you how you want to proceed.

Text typography

Provides a variety of text customization options, including color, font size, font family, line height, and letter spacing.

Active text typography

Provides a variety of text customization options for active text, including color, font size, font family, line height, and letter spacing.

 

 

 

 

Was this article helpful to you? No Yes 1

How can we help?