Header with Navigation Template | Axero Documentation

Create a template for the Navigation Widget with a header, welcome message, and sub navigation. You can use the Navigation widget to link to specific content, personal tools, external pages, and more.

Add Template

1. Click the gear icon > Control Panel > System > Page Builder Templates.
2. Click Add a new template.
3. In Template Name, enter Header with Navigation Item.
4. In Widget Type, select Button.
5. In the editor, paste the following code.

   <li class="{{CustomCSSClass}}"><a {{{Contents.ngCode}}} href="{{{Contents.URL}}}" {{#if Contents.OpenNewTab}}target="_blank"{{/if}}>{{#if Contents.IconCSSClass}}<span class="{{Contents.IconCSSClass}}"></span>&nbsp;{{/if}}{{WidgetTitle}}</a></li>

6. Click Save Template.
7. Click Add a new template.
8. In Template Name, enter Header with Navigation.
9. In Widget Type, select Navigation.
10. In Link item template, select Header with Navigation Item.
11. In the editor, paste the following code.

    <div class="container-fluid axero-widget-full-header">
        <div class="container">
            <div class="row-fluid">
                <div class="span12">
                    <div class="axero-entity-formatted-content">
                        <h3>{{WidgetTitle}}</h3>
                        <p>Get help, access company information, stay updated, and connect with coworkers.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid axero-widget-full-header-navigation">
      <div class="container">
        <div class="row-fluid">
          <div class="span12">
            <ul class="inline">
                 {{{Contents.ChildWidgetHTML}}}
            </ul>
          </div>
        </div>
      </div>
    </div>

12. In line 7, replace Get help, access company information, stay updated, and connect with coworkers. with your own subtitle.
13. Click Save Template.

Add CSS Overrides

1. Click System > CSS Overrides.
2. Add the following code, at the bottom.

   /*Style for Header with Navigation template*/
   .axero-widget-full-header {
       color: #FFF;
       padding: 30px 0;
       margin: -30px 0 0px;
       background: #012281;
   }
   
   .axero-widget-full-header h3,
   .axero-widget-full-header p {
       text-align: center;
   }
   
   .axero-widget-full-header-navigation {
       background: #016281;
       margin-bottom: 30px;
   }
   
   .axero-widget-full-header-navigation .row-fluid .span12 {
       min-height: auto;
   }
   
   .axero-widget-full-header-navigation ul {
       margin: 0;
   }
   
   .axero-widget-full-header-navigation ul li {
       padding: 0;
   }
   
   .axero-widget-full-header-navigation ul li a {
       padding: 15px 20px 15px;
       display: inline-block;
       color: #fff;
   }
   /*End style for Header with Navigation template*/

3. Click Save CSS Overrides.

How to Use the Template

1. Add or edit a Page Builder page in Control Panel > System > Page Builder.
2. Click the Layouts tab and add a 12 column layout onto the page.
3. Click the Widgets tab.
4. Drag a Navigation widget onto the page.
5. On the Navigation widget, click the gear icon > Edit properties.
6. Update the widget Title. The widget title will appear on the page.
7. In Navigation Items, configure an item. Example:
   
8. Click Template.
9. Select the Header with Navigation template.
10. Click Save Widget.
11. Click Publish changes.
12. Click Go to page.