1 Presets

Set of pre-defined layouts for sidebar menu.

2 Hide/Show Sidebar Menu

By default, the sidebar menu is active. If you would want to hide it, just uncheck this option and vice-versa.

3 Add/Edit Menu Item

Gives you the choice to select the page(s) on which you want to or don’t want to show the sidebar menu.

4 Container Properties

Modifies the properties of a submenu container like Margin, Padding, Border and Shadow.

5 Container Background

Applies a preferred color, gradient, or image to the menu’s background.

TemplateToaster features the following extended background options-

Color Picker-
TemplateToaster gives you a color picker to choose a background color. Here are the details of the Color Picker.

Custom Gradient-

You can create custom gradients with preferred angle, color, and offset choices. You can save the gradients as well. See this for more information about creating and saving the custom gradients.

Browse Images-

You can even apply an image in the menu background.TemplateToaster has an inbuilt stock of free images. You can select an image from the stock, or browse your custom images.

You can even edit the browsed images. TemplateToaster has an image editor with a dozen of edit options to customize the browsed images. For details, see this.

6 Header Properties

Customizes the look and feel of the Sidebar Menu’s header. You can set the following properties that are available with header:

Icon-
You can use an icon with the header. When you click this option, you can see a small stock of icons, which are commonly used in the websites. But, if you have your custom icons, you can also browse those icons. An option to change the color of the icon is also available here.

Margin-
Specifies the margin of the header for all four sides.

Padding-
Sets the padding of the header from all sides.

Heading Type-
To select a preferred heading type for the header of the sidebar menu.

7 Header Background

You can change the background of the sidebar menu’s header. You can choose a preferred color, gradient, or image to apply on menu’s background.

TemplateToaster has following options to modify the background-

Color Picker-
You can use a color picker to choose a color from anywhere in the template/website. Here is the full description of the Color Picker.

Custom Gradient-

You can create custom gradients with a preferred angle, color and offset choices. You can save the gradients as well. See this for more information about creating and saving custom gradients.

Browse Images-

TemplateToaster has an inbuilt stock of free images. You can select an image from the stock, or browse your custom images.

You can even edit the browsed images. TemplateToaster has an image editor with a dozen of edit options to customize the browsed images. For details, see this.

8 Header Border

Customizes the border of the menu’s header. You can select a preferred Style of the border, decide its Thickness, set the Radius of the edges, and choose the color.

More-
“More” lets you to explore more options for designing the border interactively. You can set different values of Thickness and Radius for individual side and edge of the border. See this to know more about designing the border.

9 Header Height

Specifies the height of the menu’s header.

More-
“More” is used to specify custom height of the menu’s header.

10 Header Typography

Defines the typography of the sidebar menu’s header. The typography includes options for choosing font, style, font size, font color, font effect, text alignment and text decoration.

More-

With “More”, you can open all the typography options in a single window as shown below. Here are the details.

11 Header Texture

To apply a texture to the background of the menu’s header.

More-
You can customize the transparency of texture with “More”. Click Here for more details.

12 Header Effects

To apply an effect on the background.

More-
You can customize the transparency of the effect with “More”. Click Here for more details.

13 Header Shadow

To apply a shadow effect on the header background.

More-
With “More”, you can even customize the color, angle, blur, and distance of the shadow effect. Click Here for more details.

14 Menu Button Properties

To set the properties of the menu button. You can apply separator between menu buttons, change their height, width, margin padding, specify content margin and more.

15 Menu Button Background

Changes the background of the Menu Buttons. You can separately apply the background for different states of the menu buttons. Such as Normal state, Hover state, and Active State.

16 Menu Button Border

Designs the border of the Menu Button. This option expands a drop down list of options to design the border for different states of a menu button, like Normal, Hover and Active. So, you can differently design the border of a menu button for these three states.

17 Menu Button Typography

Defines the typography for the menu buttons. You can set different text styles for a menu button in Active, Normal, and Hover states.

18 Expand (Submenu)

Avails the user with two choices to expand the submenu Horizontally and Vertically as follows:

Changes the way menu opens up when you hover. If you select this option, the menu will open up in horizontal direction, as shown below.

If you select this option, the menu will open up in vertical direction, as shown below.

19 Open (Submenu) On

Specifies that whether the menu will open on click or on hover.

20 Submenu Layout

Gets active only when you select to expand the menu horizontally. With this, you can choose Mega, Vertical, or Horizontal style for the submenu.

21 Submenu Container

Specifies the properties of the submenu container. You can change the background, border, and shadow effect of submenu container.

22 Submenu Item

Specifies the properties of the submenu items such as height, width, background, border, shadow, and more.

  • Was this article Helpful ?
  • Yes   No