templates:header
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column data:eventrepeater data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker
Layout
layout:gallery layout:productgallery layout:rotator layout:stepper layout:stepperpanel layout:tablist layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs navigation:item navigation:primary navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:audio standard:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video
Templates
templates:button templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header
ATTRIBUTES
EXAMPLES
templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

<templates:header> </...>

Header element which provides structure to primary navigation and logo placement.

Content

any
Content to render inside the Header.

Attributes

contentSize
string
Content Size

Valid options: sm, md, lg
height
string
Height

Sets the height of the element. The default units are pixels. include the percentage symbol % to user percentage values.
id
string
Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
logo
string
Logo Src

Set a path for a logo image.
logoAlt
string
Logo Alt

Set an alternative text description for the Logo image.
logoLink
string
Logo Link

Set a link which should be applied to the Logo image.
maxLogoHeight
string
Logo Max Height

The max-height of the Logo. Can be in any standard CSS unit, but is usually px.
maxLogoWidth
string
Logo Max Width

The max-width of the Logo. Can be in any standard CSS unit, but is usually px.
width
string
Width

Sets the width of the element. The default units are pixels. include the percentage symbol % to user percentage values.
navbgcolor
string
Navigation Background Color

Sets the background colour of the header's navigation menu.
navfontcolor
string
Navigation Font Color

Sets the font colour of the header's navigation menu.

Examples

Slim Header Template

Using a Slim variant to display header section with logo, site navigation, and login button

HTML:

<templates:header variant="Slim" maxlogowidth="100px" maxlogoheight="70px" bgcolor="rgba(0,0,0,1)" contentsize="md" navbgcolor="rgba(0,0,0,1)" navfontcolor="#ffffff" logo="/_public/Controls/Forms/HTMLEditor/new/Core/Insert/Composition/images/art2.png"> <navigation:primary rootpage="/" id="headerNav" includestyles="true" preventwrap="true" autopopulatelevel="2" openonhover="true"> <navigation:item at="end" page="/search/"> <standard:icon name="search" library="fontawesome" style="width: 16px; height: 16px" /> </navigation:item> </navigation:primary> <templates:button headerposition="primary" variant="Classic" href="/community/login">Login</templates:button> </templates:header>

Header Widget

Add a section above the header to display additional details.

HTML:

<templates:section paddingtop="1rem" paddingbottom="1rem" paddingleft="0" paddingright="0" bgcolor=""> <templates:row verticalAlignColumns="center"> <templates:column width="2"> <standard:icon library="fontawesome" name="phone-volume-solid" size="4" style="width: 16px; height: 16px; margin-right: 0.5rem" /> <a href="tel: 123 456 789">Call Us</a> </templates:column> <templates:column width="2"> <standard:icon library="fontawesome" name="envelope" size="4" style="width: 16px; height: 16px; margin-right: 0.5rem" /> <a href="mailto:info@domain.com">Email Us</a> </templates:column> <templates:column width="7"> <standard:icon library="fontawesome" name="clock-solid" size="4" style="width: 16px; height: 16px; margin-right: 0.5rem" /> Mon - Fri: 9:00 - 19:00 </templates:column> <templates:column width="3"> <templates:sociallinks icon-width="33px" icon-height="33px" variant="Square" size="3" facebook="#" twitter="#" linkedin="#" instagram="#" youtube="#" color="#151414" /> </templates:column> </templates:row> </templates:section> <hr style="margin: 0" /> <templates:header variant="YinYang" maxlogowidth="200px" maxlogoheight="100px" logo="/_public/Controls/Forms/HTMLEditor/new/Core/Insert/Composition/images/art2.png" bgcolor="#ffffff" contentsize="md" navfontcolor="#ffffff" navbgcolor="#242424"> <navigation:primary includestyles="true" autopopulatelevel="1" classlicurrent="s8-navigationPrimaryLI-current" rootpage="/" /> <templates:button headerposition="primary" variant="Pulse" bgcolor="#151414" padding="10" borderRadius="0" color="#ffffff" href="/community/login">LOGIN</templates:button> </templates:header>