Layers Content Widget: Jumbo Menus

How To  Tutorials  Last Updated: Layers ver. 1.5 Time to Read: 2 minutes

This tutorial is part of our Content Widget tutorial series and will walk you through how to create a “jumbo” horizontal menu in your Layers pages using the Content Widget.

Before you begin, you will need a handful of icons to add to your links.

You can find free icons at flaticon.com, or download a free custom icon kit by enabling Layers Messenger from Layers →Dashboard.

  1. From your Edit Layout tab of the Customizer, click +Add a Widget and choose the Content Widget
  2. Delete the default title and description
  3. Delete the second and third default columns by expanding them and clicking the red trash-can icon. You should be left with one column.
  4. Click the List Style option and ensure Grid is selected, and Gutter is unchecked
  5. Click the Background option on the right-hand Design Bar and choose a background color
  6. In your one column, edit the column Title to reflect your desired link text
  7. Delete the default Excerpt content
  8. Click the Insert Link bar and add your link URL. Leave the Link Text blank.
  9. In the column options bar, click the Featured Media icon image-iconand upload or select your desired icon.
  10. Click the Text icon text-icon  in the options bar and choose the centered aignment
  11. Click the Column Width icon columns-icon in the options bar and choose 3 of 12. In this example, we will have 4 link blocks, totalling 12.
  12. Click +Add New Column to duplicate this column three times.
  13. You may now edit the new 3 columns to choose an icon under Featured Media, and to edit the Title and Link URL

content-widget-jumbo-menu

The above steps will leave you with a basic jumbo menu with clickable icon links. You can customize this further by adding different background colors to each column, or adding some custom styling to change the background color on hover. To do that, you need to use the Advanced option in the design bar.

  1. Click the Advanced button in the design bar
  2. Add a Custom Class of
    my-jumbo-menu
  3. Add Custom CSS to set a hover background like this:

The first style adds a nice transition effect when the mouse hovers over. The second style changes the background color when a block is hovered:

jumbo-menu-hover

You can add padding to each column to adjust the space around each link by clicking the Advanced button on the column options bar (our example here adds 20 to the padding fields). Make sure each column has the same padding settings for best results.

To make the entire widget/bar taller or shorter, you can set the Padding below the Custom CSS box in the Advanced option on the widget Design Bar. Our example above has the Top and Bottom set to 0.

The top and bottom margin settings can be set to a custom value to increase or decrease space between this widget and others.

The WordPress Custom Menu widget can be used to achieve similar results, though requires more custom styling. See How to Add Horizontal Menus to Any Spot in Layers Builder Pages