Appearance - Sub-Menu

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.

• Help ?. Click this button to open the user manual for this module and receive Help.

• 

• 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.

• [Desktop | Tablet | Mobile]. At the top of this column, you can switch between the device that you want to change the setting for.

• ● [Default Menu | Custom Menu]. This setting controls whether or not you will use the Default Menu or a Custom Menu for the respective device you have selected.

• 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 [Create New Template]. Click this button to open a new window prompting you to enter a Template Name. In this field you can assign a name for a Sub-Menu Template and then click Create New Template or click Close to return to the previous screen.

• 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.

• Copy this design to: [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.

• [Select a Template | New Sub-Menu Test | Apply]. Click this dropdown to select the Template to Apply the Copy to.

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

• Top row: Device [Desktop | Tablet | Mobile | Help?]. Click the icon of the device that you would like to design a Sub-Menu Customization for.

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.

• Help?. This will lead you to the Build user manual to receive Help with this module.

• 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 Shadow [Off | On]. This setting controls whether or not the Menu Shadow is displayed.

• 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 controls the row Background color.

• Text Color. This field controls the row Text Color.

• Height. This field controls the row Height.

• Scroll [Normal | Fixed | Scroll]. This setting provides three setting 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.

• 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

• Image. This function displays an uploaded Image.

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

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

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

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

• Rolex Plaque. This function displays the Rolex Plaque.

Here’s an example of a Sub-Menu on the front end of a website:

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