Appearance - Sub-Menu – buildsupport

Breadcrumb path: Appearance / Sub-Menu

You can access this page by clicking on Appearance from your main menu and then clicking Sub-Menu from the dropdown menu.

Appearance - Sub-Menu Fundamentals

In this section, you will learn to use the Appearance - Sub-Menu module. Sub-Menu enables you to design the appearance of the dropdown part of your website, which extends from the top row (from the Header + Menu). Note: any part of the Menu other than the top row will fall under the Sub-Menu.

Here are some important notes about using this module effectively.

Sub-Menu’s Relationship to the Navigation Module

All Sub-Menu items within your Menu are sourced directly from the Navigation module. Therefore, the initial setup of your Sub-Menu should be done from there. The main screen of Appearance - Sub Menu will show you Sub-Menu Customizations that reflect what the Navigation module displays under Navigation Items. These can be then modified further from the Sub-Menu screen.

Here is an image displaying the Navigation Items from the Manage Navigation screen and how they relate to what you see on the Sub-Menu module’s main screen.

Default vs. Custom Sub-Menu settings

The Build system comes preloaded with a Default Sub-Menu that was designed with general users in mind. Here is an example of how the Default Sub-Menu will display on your website:

However, creating a fully customized Sub-Menu is also an option for users desiring a unique layout for their website. For any Sub-Menu Item, you can choose between Default or Custom settings.

Now that you have learned the fundamental ideas, this guide will walk you through the Sub-Menu module, starting with the Main Screen.

Sub-Menu Main Screen

From this page, you can view and manage Sub-Menu Customizations and Sub-Menu Templates which are split into two sections of this screen. These two sections will be explained below.

● 1 Sub-Menu Customizations. This area lists all available Sub-Menu Customizations. Note: these are sourced directly from the Navigation module.

● 2 Top Right.

Default Menu Setting. Clicking this button will bring up a new window allowing you to edit the Default Menu Setting. These specifications will be applied globally whenever Default Menu is selected.

Search. This field enables you to Search for Sub-Menu items already in your system.

● 3 Columns. These columns display information and functions related to Sub-Menu Customizations.

Menu Categories. This column displays the Name of the Sub-Menu Customization.

Published. This column displays whether the Sub-Menu Customization has been Published.

Created At. This column displays when the Sub-Menu Customization was Created.

Updated At. This column displays when the Sub-Menu Customization was Updated.

● Actions [Customize | Publish]. This column displays Actions you can perform on the corresponding Sub-Menu Customization:

Customize. This allows you to Customize a Sub-Menu Customization. This will bring up a new screen to be covered in the following section.

Publish. This allows you to Publish a Sub-Menu Customization.

In this area, you can view and manage your Sub-Menu Templates. These are individual templates that you can apply to your Sub-Menu Customizations listed above.

● 4 Sub-Menu Templates. This area lists all available Sub-Menu Templates.

● 5 [Template Name | Create New Template]. In this field, you can assign a name for a Sub-Menu Template and then Create New Template by clicking the button.

● 6 Search. This field allows you to Search for a Sub-Menu Template already in the system.

● 7 Columns. These columns display information and functions related to Sub-Menu Templates.

Name. This column displays the Name of the Sub-Menu Template.

Created At. This column displays the date the Sub-Menu Template was Created.

Updated At. This column displays the date the Sub-Menu Template was Updated.

Actions [Copy | Edit | Delete]. In this column, you can perform various Actions on the Sub-Menu Template.

Copy. This button enables you to Copy the Sub-Menu Template.

Edit. This button enables you to Edit the Sub-Menu Template.

Delete. This button enables you to Delete the Sub-Menu Template.

Now that you have learned about the functions of the Sub-Menu Customizations and Sub-Menu Templates, this guide will walk you through the steps to Customize a Sub-Menu item.

Customize Sub-Menu Item

● 1 Top Left.

[Select a Template | New Sub-Menu Test > Apply].

[Tablet | Mobile > Copy]. Choose the device setting you want to copy a Customization from, and then click Copy. Note: this will Copy over any unsaved progress you have made.

● 2 Top right. In this section, you will find several functions:

Top row: Device [Desktop | Tablet | Mobile]. Click the icon of the device that you want to design a Sub-Menu Customization.

Every device requires its own separate Sub-Menu design.

For Tablet and Mobile modes, it is recommended to use the Default Menu setting, as shown below:

Middle row: [View Page | Save | Publish].

View Page. This will display a preview of how the page will look in its current state.

Save. This will Save any progress made on your current design.

Publish. This will Publish the current design on the front end of your webpage.

Bottom row: [Default Menu | Custom Menu].

[Default Menu]. Selecting this option will activate the Default Menu, which is useful for many users, and is included in the system automatically.

[Custom Menu]. Selecting this option will activate the Custom Menu, which is available for use instead of the Default Menu if you desire to customize your own menu.

Note: this option will be active immediately upon selection. The moment this choice is made, the current appearance of the Sub-Menu Customization will display on your webpage.

● 3 General Settings. In this section, you can change various settings for your Sub-Menu Customization.

Menu Width. In this field, you can edit the Sub-Menu Width. This is generally fixed and has no need to be changed. The default setting is 100.

Menu Max Width. In this field, you can edit the Sub-Menu Max Width. This is generally fixed and has no need to be changed. The default setting is 100.

Element Table. This section displays the current Elements in your Sub-Menu Customization.

● 4 Element. The blue up and down arrows can be used to change the element of a given row.

● 5 Rows and Columns. Functions can be dragged and dropped into this area in order to design your Header Template.

● 6 Delete and Edit. Clicking Delete will remove a Row from the available configuration. Clicking Edit will bring up a new Edit screen as follows:

● Row Settings. This window displays a variety of settings related to the specific row.

Name. This field allows you to enter a Name for the row.

Status [On | Off]. This setting controls whether the row is turned On or Off.

Columns. This field controls how many Columns are in the row.

Transparent [Yes | No]. This setting controls whether or not the row background is Transparent.

Background. This field sets the row Background color.

Text Color. This field sets the row Text Color.

Height. This field sets the row Height.

Scroll [Normal | Fixed | Scroll]. This setting provides three options for the row Scroll.

Normal. This option provides a standard scroll setting, where the row is left at the top when a user scrolls down the page.

Fixed. This option provides a Fixed scroll setting, where the row follows the user while scrolling down.

Scroll. This option provides a special Scroll setting.

When finished filling out the desired settings for the row, you can click outside of the box to return to the main screen.

● 7 Add New Row. Clicking on this button will Add New Row to your Element Table that can be edited for your Sub-Menu Customization.

● 8 Element Functions. In this area, you will see a collection of Functions that can be dragged and dropped into the Element Table section.

Social Icons. This function displays Icons with quick access to Social media.

Designer Icons. This function displays Icons specific to a given Designer. This is an easy way for a user to show a designer’s logo.

Button Link. This function displays a Button Link you have entered.

Image. This function displays an uploaded Image.

Menu List. This function displays a Menu List of the system. This is normally used when managing sub-categories and sub-sub-categories.

Line. This function displays a dividing Line

Account icons. This function displays various Account icons, including shopping cart, my account, favorites, and so on.

Custom code. This function displays Custom code you have entered.

Custom Text. This function displays Custom Text you have entered.

● 9 View. This button allows you to View the current design in preview mode. You will also see a ruler below to provide perspective on the Sub-Menu dimensions, as shown in the following image.

Now that you have learned how to set up Sub-Menu, that completes this section of the help manual.