Menus

The Genesis Sample theme includes two (2) default menu locations:

1. The Header Menu displays in the site header, next to the site title or header image.
2. The Footer Menu displays above the site footer and one level deep.

Go to Appearance > Customize > Menus to assign your previously created menus to the location(s) you wish to use.

Click View All Locations to reveal the available options.

Use the drop downs to select the menu you’d like to display in each location.

Be sure to click Publish at the top of the customizer to preserve your settings.

Highlight a Menu Item

In the Genesis Sample theme demo, the Header Menu displays two highlighted links, as shown in the image below.

1. Gutenberg Optimized – a bold text link.
2. Download – a button-style link.

This is accomplished by adding one of the following CSS classes to the menu items:

• menu-bold: The menu-bold class creates a bold text link.
• menu-highlight: The menu-highlight class creates a button-style link.

If you’d like to highlight a menu link, enable the CSS Classes field for menu items, as described and shown below.

1. In the customizer, click the gear icon to reveal the advanced menu properties that can be configured.
2. Check the CSS Classes box.

Next, open the menu you’ve assigned to the Header Menu location and then open the menu item you’d like to highlight.

Add “menu-bold” or “menu-highlight” (without quotes) to the CSS Classes field, as shown below.

Be sure to click Publish to preserve your setting.

Mobile Menu Display

When viewing your site on devices with smaller widths, a “hamburger” icon button is automatically available to open the menu.

The menu items are revealed when clicking the “hamburger” menu button. Click the ‘X’ icon to close the menu.