The post How to Setup a Menu Area in Headway Themes appeared first on WP Knowledge Base.
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.
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.
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.
Step 6) Navigate to Admin -> Menus. A new tab will open where you can create your Menu Structure.
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.
Step 9) Click the Manage Locations tab.
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.
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.
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.
If the fields were completed as shown above, they will display as follows:
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.
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.
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.
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.
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.
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.
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.
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.