Zeppelin Header - Icon Blocks Group Template | Communifire Documentation

The Zeppelin Header - Icon Blocks Group template displays a link in the header that opens a dropdown menu. The template is a built-in template and comes with your Communifire site.

In the primary navigation, the header link can appear as an icon only, as text only, or both.

In the sub navigation, the header link appears as text.

How to use the Zeppelin Header - Icon Blocks Group template

1. Go to Control Panel > System > Page Builder > Header
   
   
   
   
   
2. Clone the Global Header with Sub Navigation header
   
   
3. Set the Active Header to the clone
   
4. Click Save
   
5. Edit the clone
   
6. Click the Widgets tab

Option 1: Add a menu in the primary navigation

This section explains how to add a link in the primary navigation that opens a dropdown menu.

1. Expand the "Navigation" Section widget
   
2. Drag a Navigation widget onto the page
   
3. Edit the Navigation widget
   
4. Update the widget Title
5. In Navigation items, configure an item
   Example:
   
6. Click the Template tab
   
7. Select the Zeppelin Header - Icon Blocks Group template
   
8. Click the Advanced tab
   
9. Select an Icon (Optional)
10. In Custom CSS class, enter pull-right
11. Uncheck Show Header (Optional. If unchecked, the link will display with the icon only. If checked, the link will display with both the icon and the widget title.)
    
12. Click Save Widget 
    
13. Click Publish changes 

Option 2: Add menu in sub navigation

This section explains how to add a menu in the sub navigation that opens a dropdown menu.

1. Expand the "Sub Navigation" Section widget
   
2. Drag a Navigation widget into the Section widget
   
3. Edit the Navigation widget
   
4. Update the widget Title
5. In Navigation items, configure a navigation item
   Example:
   
6. Click the Template tab
   
7. Select the Zeppelin Header - Icon Blocks Group template
   
8. Click Save Widget
9. Click Publish changes 
   

Template HTML

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

<li class="dropdown {{CustomCSSClass}}">
    <a data-toggle="dropdown" data-target="#" {{{Contents.ngCode}}} title="{{WidgetTitle}}">
       <span class="x-icon"><i class="{{IconCSSClass}}"></i></span>
       {{#if ShowWidgetHeader}}<span class="x-label"><span>{{{WidgetTitle}}}</span></span>{{/if}}
    </a>
    <ul class="dropdown-menu {{CustomCSSClass}}">
        {{{Contents.ChildWidgetHTML}}}
    </ul>
</li>