1 Presets

Displays the pre-designed styles of menu. You can choose a pre-designed menu and modify its look as per needs of your template or website.

2 Edit Menu

To select the pages you want to show in the menu and simply uncheck the pages you don’t want to display.

3. Menu Position

Opens a Sticky Menu Dialog as shown below:

Sticky Menu –
A sticky menu doesn’t disappear when you scroll down the page, unlike normal menu. It sticks to the top of the page as you scroll down the page. Hence, a sticky menu is quick to navigate for the users. TemplateToaster facilitates you to create such a sticky menu for your template/website.

4. Background

To make a selection for preferred color, gradient, or image to apply to the menu background of your template or website. TemplateToaster features the following extended background options –

Color picker-
TemplateToaster offers you a color picker to choose a background color. Here is the full description of the color picker.

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

Browse Images-
You can apply an image in the background of the menu. TemplateToaster has an inbuilt stock of free images. You can also browse your custom images.

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

5. Height

Specifies the height of the menu. You can choose the height from given values.

More –
“More” option facilitates you to specify a custom height on your own.

6. Width

Changes the width of the menu with a single click. Three option are available for specifying the width of the menu as:

Full Width – Makes the width of menu equal to the width of the browser window.

Equal To Page Width – Sets the width of menu equal to the page width. This option is activated by default.

Custom Width – Use this to specify a custom width of the menu according to your need.

Note: If you have chosen Fixed width layout for your template/website, you can set custom width in pixels. Otherwise, if you have chosen Fluid width layout, you can set custom width in percentage.

7. Border

Customizes the border of the menu by specifying Style, Thickness, Radius and Color of the border.

More –
“More” is for more border customization options. See this for details.

8. Margin

Specifies the margin of the menu for all the sides (i.e. top, bottom, left and right).

More –
You can specify custom margins using “More”.

9. Padding

Padding specifies the white space (or distance) between the content and the border of the element. You can set top, bottom, left and right padding of the menu using this option.

More –
You can specify custom padding by clicking “More”.

10 Texture

To apply a texture to the menu background.

More –
You can customize the transparency of texture with “More”. Here are the more details.

11 Effects

To apply an effect on the menu background.

More –
You can customize the transparency of the effect using “More”. Here is the detail.

12. Shadow

To apply a shadow effect on the menu background.

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

13 Logo

To apply a logo of your brand on the menu. You can choose the logo from TemplateToaster’s logo stock or you can browse your own.

More –
Click “More” to browse your own logo. You can also link your logo to a URL.

Logo Formatting –
You can do formatting of the Logo. For this, click the Logo and a Format tab will appear as shown below. This format tab provides you the options for changing the alignment, height, width and angle of the Logo.

14 Foreground Image

Inserts a foreground image in the menu to make template/ website more professional and appealing.

More –
You can even link the image to a custom URL with More option. The link can be configured to open in a new window. If needed, you can change the transparency of the image and flip it around X or Y axis.

Foreground Image Formatting –
You can do formatting of the Foreground Image. For this, click the image and a Format tab will appear as shown below. This format tab provides you the options for changing the alignment, height, width and angle of the foreground image.

15 Text Areas

To draw the text areas in the menu. You can add custom text, image, and video in your text areas. Click this option and place the cursor where you want to create the text area. Just drag the cursor and you are done. You can also format the text area

Text Area Formatting –
For text area formatting in the menu, click the text area. On your single click, a Format tab will appear as shown below. This format tab provides you the options for changing the alignment, height, angle, and background of the text area. You can even apply effects and border to the text area.

16. Menu Button Properties

Provides different Menu Button Properties as follows:

Separator-

Separator provides a horizontal or vertical dividing line. It is most commonly used in Menus and Tool bars. In above image, Grey lines in Menu depicts the Separator. You can even customize the separator. For this, many options are provided to choose Style, Thickness and Color.

Height-

You can set the height of the menu according to your preference. You can choose from pre-defined values or you can specify a custom value. Click “More” to specify custom height of menu buttons.

Margin –
Use this option to specify left and right margins of the menu buttons.

Padding –
To apply Padding on Menu buttons from the left and right sides.

Alignment –
Aligns the menu buttons along the menu strip.

Horizontal Alignment-
To choose a preferred horizontal alignment for the menu buttons.

Vertical Alignment-

Aligns the menu buttons vertically in three different positions.

Icon-

To use icons with menu buttons. For this, you can also browse your own icons.

You can change the color of icons for normal menu buttons, on hover, and active menu button for professional look of template/website.

Arrow –

To apply an arrow with a menu item which have a submenu. You can change the thickness and color of the arrow according to your preference.

Texture –
Applies the texture on the menu buttons. You can apply the textures on Normal, Hovered and Active menu buttons seperately.

Shadow –
To apply different shadow effects on the menu buttons.

17. Menu Button Background

To apply different background colors for different states of a menu button.

Normal –
Background color for normal or passive menu button.

Hover –
Background color for the menu button on hover.

Active –
Background color for the active menu button.

18. Menu Button Border

To apply and customize the border of menu buttons. You can craft the different border designs for different states of the menu buttons.

Normal –
Lets you to choose border properties for the normal or passive menu button.

Hover –
Specifies the border properties for the menu button on hover.

Active –
Sets the border properties for the active menu button.

19. Menu Button Typography

Defines the typography of menu buttons. You can set different typography for different states of the menu buttons.

Normal –
To set border properties for normal or passive menu button.

Hover –
Specifies the border properties for the menu button on hover.

Active –
To set the border properties for the active menu button.

20 Hamburger

Gives the latest Hamburger look to the main menu.

21 Open (Submenu) On

Offers you to make a choice to : open sub menu on Click or open submenu on Hover.

22 Submenu Layout

TemplateToaster supports to make three types of submenus- Mega Menu, Vertical Menu and Horizontal Menu.

Mega –
Creates a Mega menu for your template/website. Like this

Vertical –
Creates a vertical menu for your template/website. Like this

Horizontal –
Produces a horizontal menu for your template/website. Like this

23 Design
This option is enabled when Hamburger is checked. It is used to set hamburger icon look that whether it will be Text, Icon or Text & Icon.

Text –

Icon-

Text & Icon-

24 Toggle
Sets the different properties like Background, Border, Typography, Line, Alignment etc. at all the states Normal, Hover and Active.24. Toggle

25 Slide
Specifies that how to open the menu- Slide Down, Slide Left, Slide Right, Pop up.

26. Submenu Container

You can even customize the look and feel of the submenu container. Click this option to customize the background of submenu container, to design its border and to apply a shadow effect on it.

27 Submenu Item

You can change the properties of Submenu Item like you can do with Menu Button.

Height –
Increases/ decreases the height of the submenu items.

Width –
Increase/ decreases the width of the submenu items.

Background –
Changes the background color of the submenu items.

Shadow –
Applies the shadow effect to the submenu items.

Hover Border –
Changes the look of border when the mouse is hovered over submenu item.

Hover Shadow –
Applies the shadow for the Hover state of the submenu item.

Separator –
Shows separators in the submenu items.

Margin –
Specifies the margin to the submenu items according to your need.

Padding –
Applies a padding to the submenu items according to your need.

Icons –
Displays icons with the submenu buttons.

Typography –
Changes the typography of the submenu buttons.

  • Was this article Helpful ?
  • Yes   No