Nav - Banner Navigation Item Template | Communifire Documentation

The Nav - Banner Navigation Item template displays a link with an image to the left. The template is a built-in template and comes with your Communifire site.

How to use the Nav - Banner Navigation Item template

1. Add a Navigation Widget on a Page Builder page
2. Edit the widget
3. Add navigation items
4. Upload foreground images in the Advanced tab of each navigation item
   
   
5. Select the Nav - Banner Navigation Template in the Template tab (not Nav - Banner Navigation Item)

Template HTML

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

<li class="{{CustomCSSClass}}">
    <a href="{{{Contents.URL}}}" {{{Contents.ngCode}}}>
        <div class="xs-content">
            <div class="xs-media">
                <div class="xs-image" style="background-image: url('{{Contents.ForegroundImageURL}}');">
                    <img src="{{Contents.ForegroundImageURL}}" />
                </div>
            </div>
            <div class="xs-info">
                {{#if ShowWidgetHeader}}<h4>{{{WidgetTitle}}}</h4>{{/if}}
                <span class="xs-learn-more">{{{Resources.LearnMoreText}}}</span>
            </div>
        </div>
    </a>
</li>