How to Setup a Menu Area in Headway Themes

Posted OnMar 24, 2015     CategoryThemes     CommentsNo comment

In this section of the guide to Headway Themes, we will focus on how to add, modify, delete and switch blocks in the grid layout for the Menu Block.

Step 1) Login to the WordPress Dashboard.

Step 2) From the top toolbar, navigate to Headway -> Visual Editor -> Grid.

km-headway-design-01ab

Add & Modify the Menu Block

Step 3) Right mouse click over the Menu area to display a pop-up menu.

A black pop-up box also displays to show the dimensions of the Menu area.
Hover over this area and drag the mouse to expand/reduce the Menu width/height.

km-headway-menu-01aa

Step 4) Select Open Block Options to display the Navigation Block section at the bottom of the page.

Content Tab

Step 5) The next step is to create a Menu Structure.

For this example, we will assume that a few pages/posts already exist. If you do not have any pages/posts created, please create these prior to continuing.

km-headway-menu-02a

Step 6) Navigate to Admin -> Menus. A new tab will open where you can create your Menu Structure.

km-headway-menu-03a

Step 7) Create your Menu Structure as shown below. If you need help on how to create a menu, click here.

Step 8) Once you are satisfied with the new menu, click the Create Menu button to save the new Menu.

km-headway-menu-04a

Step 9) Click the Manage Locations tab.

km-headway-menu-05a

Step 10) Select the menu you created earlier (Main Menu) from the Navigation — Layout: Front Page dropdown list.

Step 11) Click the Save Changes button.

km-headway-menu-06a

Step 12) Navigate to the Visual Editor: Front Page tab in your browser.

Step 13) If you do not see the new menu, click View Site from the top toolbar to view the site where the menu will display.

km-headway-menu-07aB

Search Tab

Step 14) If you do not see the Navigation Block, click the Open Block Options as shown in Steps 3-4 above.

Step 15) Click the Search Tab at the bottom of the page to display the available options.

Step 16) Complete the fields as follows:

A. Enable Navigation Search To display a Search box in the menu, place a checkmark in this checkbox.

For this example, this field was checked.

B. Search Position Select the position of the Search box.

For this example, the default value of Right was not changed.

C. Search Placeholder. Enter the text that will display in the Search box.

For this example, no change was made.

km-headway-menu-08a

If the fields were completed as shown above, they will display as follows:

km-headway-menu-09aa

Step 17) Click the Save button on the top toolbar to save any changes.

Step 18) To view the changes, click View Site from the top toolbar.

km-headway-menu-50a

Home Link Tab

Step 19) Click the Home Link Tab at the bottom of the page to display the available options.

Step 20) To hide the Home link, place a checkmark in the Hide Home Link checkbox.

Step 21) To change the name of the Home link, enter the new name in the Home Link Text textbox.

For this example, no changes were made.

km-headway-menu-10aa

Step 22) Click the Save button on the top toolbar to save any changes.

Orientation Tab

Step 23) Click the Orientation tab at the bottom of the page to display the available options.

Step 24) From the dropdown list, select an Alignment for the menu. The default value is Left.

Step 25) Place a checkmark in the Vertical Navigation checkbox to change the Menu Orientation.

For this example, no changes were made.

km-headway-menu-11a

Step 26) Click the Save button on the top toolbar to save any changes.

Dropdowns Tab

Step 27) Click the Dropdowns Tab at the bottom of the page to the display the available options.

Step 28) From the Drop Down Effect dropdown, select an Effect. The default value is Fade.

Step 29) If the Hover Intent checkbox contains a checkmark, when the navigation item with a dropdown is hovered the dropdown will only be shown if the visitor has their mouse over the item for more than a split second. This field is checked by default.

For this example, no changes were made.

km-headway-menu-12a

Step 30) Click the Save button on the top toolbar to save any changes.

Responsiveness Tab

Step 31) Click the Responsiveness Tab at the bottom of the page to display the available options.

Step 32) Since we did not opt for Responsiveness in our initial setup, remove the checkmark from this checkbox.

Responsive Grid can be enabled under Setup -> Responsive Grid in the Grid mode.

km-headway-menu-13a

Step 33) Click the Save button on the top toolbar to save any changes.

Config Tab

Step 34) Click the Config Tab.

Step 35) Complete the fields of the Config Tab as shown below:

A. Mirror Block By using this option, you can tell a block to mirror another block and its content. This option is useful if you are wanting to share a block – such as a menu, across layouts on your site. Select the block you wish to mirror the content from the dropdown box.

For this example, no change was made.

B. Block Alias Enter a Block Alias which will be easily recognizable for the Block Alias and it will be used throughout your site admin. For example, if you add an alias to a widget area block, that alias will be used in the Widgets panel.

You can also set the Block Alias by hovering over the Menu and selecting Set Block Alias from the pop-up menu.

km-headway-menu-61a

For this example, Main Menu was entered.

C. Custom CSS Class(es) If you find you need more control? Add your CSS Class selectors here and they will be added to the Block’s Class Attribute. Do not put regular CSS here. Use the Live CSS Editor instead.

For this example, no changes were made.

D. Advanced: Add Custom CSS Class(es) to Row/Column Copy any custom CSS Class(es) to this block and add them to the parent row and column.

For this example, no changes were made.

E. Block Title Add a custom title which will appear above the block content.

For this example, no changes were made.

F. Block Subtitle Add a custom subtitle which will display above the block content and below the block title.

For this example, no changes were made.

G. Link Block Title? Place a checkmark in this checkbox if you want the block title to be a link.

For this example, no changes were made.

km-headway-menu-60a

Step 36) Click the Save button on the top toolbar to save any changes.

Switch Block

This area is covered in How to Setup the Header Area in Headway Grid Layout.

Delete Block

This area is covered in How to Setup the Header Area in Headway Grid Layout.

Import/Export Tab

This area is covered in How to Setup the Header Area in Headway Grid Layout.

The next step of the guide will focus on How to Setup the Body Area in Headway Grid Layout.

 


Leave a Reply

Your email address will not be published. Required fields are marked *

Send this to friend