Nav - Icon Blocks (2 Column) Template | Communifire Documentation

The Nav - Icon Blocks (2 Column) template displays links and icons in a 2 column layout. The template is a built-in template and comes with your Communifire site.

How to Create the Sample Menu

1. Add or edit a Page Builder page in Control Panel > System > Page Builder
2. Click the Widgets tab
3. Drag a Navigation widget onto the page
4. Edit the Navigation widget
5. Update the widget Title
6. In Navigation items, configure an item:
   • Title: Enter the text to display
   • Item type: Select Content List
   • Space: Select a space
   • Content Type: Select a content type
   • Icon: The icon will automatically populate after selecting a content type
     Example:
     
7. Save the navigation item
8. Add more navigation items and configure them
9. Click the Template tab.
10. Select the Nav - Icon Blocks (2 Column) template.
11. Click Save Widget
12. Click Publish changes.

Customize the Nav - Icon Blocks (2 Column) Template

Change Icon Colors

You can change the icon colors in the Nav - Icon Blocks (2 Column) template. Add the following code in Control Panel > System > CSS Overrides. Replace #328194 with your desired color.

/*Set color of icons in Nav - Icon Blocks (2 Column) template*/
.axero-blocks.axero-lightning-navigation-list .axero-widget-body ul li a .x-icon i {
    color: #328194;
}

Change to 3 or 4 columns

You can customize a Nav - Icon Blocks widget to display 3 or 4 items per row.

1. Go to Control Panel > System > Page Builder Templates.
2. Under Widget Types, select Navigation.
3. Click the Nav - Icon Blocks (2 Column) template.
4. In the first line, find axero-blocks 
5. Add a space and {{CustomCSSClass}} after axero-blocks .
6. Click Save Template.
7. Click System > CSS Overrides.
8. Add the following code, at the bottom.

   /*Nav - Icon Blocks (2 Column) - 3 columns*/
   .axero-blocks-three-column .axero-widget-body ul li {
       width: 32% !important;
   }
   
   .axero-blocks-three-column .axero-widget-body ul {
       justify-content: space-evenly!important;
   }
   
   .axero-blocks-three-column .axero-widget-body ul li:nth-child(3) {
       padding-top: 0;
   }
   
   /*Nav - Icon Blocks (2 Column) - 4 columns*/
   .axero-blocks-four-column .axero-widget-body ul li {
       width: 24% !important;
   }
   
   .axero-blocks-four-column .axero-widget-body ul li:nth-child(3),
   .axero-blocks-four-column .axero-widget-body ul li:nth-child(4) {
       padding-top: 0;
   }
   
   .axero-blocks-four-column .axero-widget-body ul {
       justify-content: space-evenly!important;
   }

9. Click Save CSS Overrides.
10. Click System > Page Builder.
11. Edit the page that contains the Navigation widget.
12. Edit the Navigation widget.
13. Click Advanced.
14. In Custom CSS class,  enter one of the following:
    • axero-blocks-three-column - This will make the widget 3 columns.
    • axero-blocks-four-column - This will make the widget 4 columns.
15. Save the widget and page.

Example result:

Template HTML

Below is the HTML of this template, for your reference.

<div class="axero-widget axero-lightning-navigation-list axero-blocks">
    {{#if ShowWidgetHeader}}
    <div class="axero-widget-header">
        <h3>{{{WidgetTitle}}}</h3>
    </div>
    {{/if}}
    <div class="axero-widget-body">
        <ul>
            {{{Contents.ChildWidgetHTML}}}
        </ul>
    </div>
</div>