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.
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 –
TemplateToaster offers you a color picker to choose a background color. Here is the full description of the color picker.
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.
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.
Specifies the height of the menu. You can choose the height from given values.
“More” option facilitates you to specify a custom height on your own.
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.
Customizes the border of the menu by specifying Style, Thickness, Radius and Color of the border.
“More” is for more border customization options. See this for details.
Specifies the margin of the menu for all the sides (i.e. top, bottom, left and right).
You can specify custom margins using “More”.
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.
You can specify custom padding by clicking “More”.
To apply a texture to the menu background.
You can customize the transparency of texture with “More”. Here are the more details.
To apply an effect on the menu background.
You can customize the transparency of the effect using “More”. Here is the detail.
To apply a shadow effect on the menu background.
With “More”, you can even customize the color, angle, blur, and distance of the shadow effect. Here, you can get more details.
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.
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.
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 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.
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.
Use this option to specify left and right margins of the menu buttons.
To apply Padding on Menu buttons from the left and right sides.
Aligns the menu buttons along the menu strip.
To choose a preferred horizontal alignment for the menu buttons.
Aligns the menu buttons vertically in three different positions.
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.
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.
Applies the texture on the menu buttons. You can apply the textures on Normal, Hovered and Active menu buttons seperately.
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.
Background color for normal or passive menu button.
Background color for the menu button on hover.
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.
Lets you to choose border properties for the normal or passive menu button.
Specifies the border properties for the menu button on hover.
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.
To set border properties for normal or passive menu button.
Specifies the border properties for the menu button on hover.
To set the border properties for the active menu button.
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.
Creates a Mega menu for your template/website. Like this
Creates a vertical menu for your template/website. Like this
Produces a horizontal menu for your template/website. Like this
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-
Sets the different properties like Background, Border, Typography, Line, Alignment etc. at all the states Normal, Hover and Active.24. Toggle
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.
Increases/ decreases the height of the submenu items.
Increase/ decreases the width of the submenu items.
Changes the background color of the submenu items.
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.
Shows separators in the submenu items.
Specifies the margin to the submenu items according to your need.
Applies a padding to the submenu items according to your need.
Displays icons with the submenu buttons.
Changes the typography of the submenu buttons.