Close

Layers Help & Support

Layers 2.0.10 Update

Layers 2.0.10 Update

Removing the Envato Marketplace listings.

  • Fixed Image Ratio button in the Post widget
  • Removed redundant Envato Market listings

UPDATE LAYERS View on GitHub

How to Add Horizontal Menus to Any Spot in Layers Builder Pages

How To  Tutorials  Since: 1.2.9 Last Updated: Layers ver. 1.2.14 Time to Read: 2 minutes

Horizontal menus have a variety of uses in your page layout. This tutorial walks you through two ways to create horizontal menus – using a custom styled Custom Menu Widget, or without coding using the Content Widget.

Note that neither widget supports drop-down menus – those are best kept in your site header for the best user experience.

horizontal-menu

WordPress comes with a great little widget for displaying any menu you create in the Menu admin in any widgetized area of your site. Commonly used as a standard vertical menu in your sidebar for linking to specific posts or pages, this widget can be transformed into a horizontal menu similar to your main Header Menu and placed anywhere in a Layers page.  Use this technique to create category links on a magazine site post section, change the location of the main header menu on your homepage, or anything else you can think of!

  1. Go to Layers → Customize
  2. Browse to the page you want to add a menu to
  3. Expand Edit Layout, then expand the Body panel
  4. Click +Add Widget and select the Custom Menu Widget
  5. Select the menu you want to use drom the widget’s options panel

By default the menu will appear plain and stacked. Save & Publish, then click back to the main Customizer menu.

  1. Expand the CSS panel
  2. Enter the following CSS:

SAVE & PUBLISH your changes.

The Content Widget is especially useful for creating horizontal menus as you can manipulate how tall or wide the bar is, set its colors and determine the column layout more easily and without code. You can also combine links with featured images to get similar layouts to the site header.  The following walks you through how to get a similar effect to our screenshot, which supports up to 6 short links.

  1. Go to LAYERS → CUSTOMIZE
  2. Browse to the page you want to add a menu to
  3. Expand EDIT LAYOUT, then expand the BODY panel
  4. Click +ADD WIDGET and select the Content Widget
  5. Delete the default text in the Title and Excerpt
  6. Expand the first default column and remove the Title and Excerpt. Configure as follows:
    • Click the Featured Image button and upload a small image or select your logo. Try to keep this image below 100px by 100px for best results.
    • Click the Image Align button and choose the Left Align option
    • Click the Columns button and choose the highest column count possible. Example if you have 4 links using 2 of 12, this should be 6 of 12 to make up the difference.
  7. Expand the second and third columns andconfigure as follows:
    • Edit the Title to be your link text
    • Remove the Excerpt text
    • Remove any Button Text
    • Add your desired URL to the Button Link field. This will link the title, used here as our link.
    • Click the Text button and ensure the alignment is Left
    • Click the Column button and choose 1 of 12. If your links are being smooshed, choose 2 of 12. Keep in mind that the total of all columns cannot exceed 12.

SAVE & PUBLISH your changes.

See Layers Content Widget: Jumbo Menus for how to get a similar menu with icons and hover effects

Did you know?

Our friends at Jetpack are doing some incredible work to improve the WordPress experience. Check out Jetpack and improve your site's security, speed and reliability.

Jetpack