Custom header and menu

The page header (or banner) is automatically included on all of your website’s client facing pages. The page header will generally have a menu and other elements as required.

For example; a quick search box, a login / logout link, a logo and so on. The default header is generated automatically and it will contain elements that you have selected in your configuration settings – but depending on the user’s permissions and session state. Although there are many settings provided for the standard page header, if you want more control and flexibility, then you can create your own page header and menu, which is explained in this article.

Even if you create a custom header, you can still use the menu that you have configured in Back office with the xs tags and functions. This has the advantage that the menu can be changed without having to change the actual code.

Building a custom page header

Go to Site configuration and click on Code editor. Next choose Page header HTML in the dropdown box at the top of the page. If there’s no custom HTML yet, then the editor will be empty. If a custom header already exists, the code will be displayed and you can see who last changed it and when. Click on the revision link to view and/or restore previous versions of the code. A maximum of 50 revisions can be stored.

Embedding CSS in your custom header

You can embed CSS in the code that you enter for your header while you are developing and testing. When you are done, you should remove the CSS from the page header template, and you should then put it in the Custom CSS instead. To embed CSS, use the

tags at the top of the code. For example:

<style>
    .h1 {
        border:1px solid red;
    }
</style>

HTML

It is best to use the classes that already exist. Use a browser with developer extensions installed (we recommend Chrome) so that you can inspect the elements used by the standard header. You can also click “view page source” to see what the standard header looks like while browsing your website in a separate window. Also, some of the script on the pages depends on certain class names and id’s. For instance the dropdown menu script.

The main menu is an unordered list (UL) and the menu items are list items (LI). The unordered list(s) must have the class menuitems for the mobile device menu to work.

A custom banner/header with the default XS menu

You can develop a custom header/banner, while still using the default menu (by use of the menu builder) – as opposed to manually creating the menu. The advantage of using this option, is first of all that it’s much quicker and simpler to develop a custom header this way, but also that you can still configure the menu and related settings using the Back office functions. Using the standard menu’s also allows for more efficient caching.

You can load a starting template by clicking Load example and the select the file default-banner-1.txt. It is recommended that you first configure the standard menu and banner settings (without enabling the code for your custom page header). If you then enable the custom page header, the resulting HTML will look the same as the standard version. You can then start changing the template as required.

In the example template (default-banner-1.txt) you’ll see this code fragment:

<div class="menuwrapper fixcenterwidth">
   <div id="mainMenuContainer" xsmenu="1">
      <ul id="left" class="menuitems" style="margin-left:<?xs rproperty('mnu_left','0') ?>px">
<?xs html('xs-leftsidemenu.inc') ?>
      </ul>
      <ul id="right" class="menuitems">
<?xs html('xs-rightsidemenu.inc') ?>
      </ul>
   </div>
</div>

The xs tags include the standard HTML code for the left side of the menu (xs-leftsidemenu.inc) and for the right side of the menu (xs-rightsidemenu.inc). Note that if you want to use the standard menu, then you must add the property xsmenu=”1″ to the mainMenuContainer div container element. Like so:

<div id="mainMenuContainer" xsmenu="1">

If you don’t use the standard menu, then remove the property xsmenu=”1″ from the div element.

Note that the xs script that takes care of showing and hiding the drop down menus looks for a container with the id mainMenuContainer. Using this id however means that its CSS will also be applied. This may interfere with what you’re trying to achieve. This has been addressed in 31.2 by letting you use the id xsmenucontainer (all lower case) instead. The script will still work and there’s no CSS for this element which leaves you in control.

Below is an example of a custom made menu that uses the container id xsmenucontainer:

            <div class="masthead right" id="xsmenucontainer" xsmenu="1">
            
                <div class="mastheadrightmobile">
                    <a id="mobilemenubutton">☰</a>
                </div>
            
                <ul class="menuitems">
<?xs if guest {
                    <li><a href="/login" class="needlogin">log in</a></li>
                    <li><a href="/register">register</a></li>
                    <li><a href="/cart" class="needlogin">basket</a></li>
                    <li class="last"><a href="#">chat</a></li>
} ?>                    
<?xs if not guest {
                    <li id="lmenu_5"><a id="menu_5" pdid="menuaccountlist" href="/myaccount" class="menuaccountlist menu_5 arrow pulldownitem">my account</a></li>
                    <li><a href="/lightbox">lightbox</a></li>
                    <li class="last"><a href="/cart">basket</a></li>
} ?>                    
                </ul>

<?xs if not guest {
                <div class="userinfobox">
                    <ul class="userinformation">
                        <li><a class="username" href="/myaccount"><?xs session('username') ?></a></li>
                        <li><a href="/logout">log out</a></li>
                    </ul>
                </div>
} ?>
            </div>

The standard HTML code for the dropdown menus is included by use of the tag:

<?xs html('xs-dropdownmenus.inc') ?>

The above tag will output all the required HTML based on the settings that you have configured.

You can of course create your own pulldown menu’s and as many as you need. If you want to control how and where dropdown menu’s are displayed then you can add the function “onpulldownmenu” to the client object in your script – see below examples:

    onpulldownmenu: function(li,menu) { /* li is the list item, menu is the pull down menu */
        menu.show().position({of:li,my:"center bottom-15",at:"center"}); /* A) show the menu centered underneath the menu item */
        //or menu.slideDown(200).position({of:li,my:"center bottom-15",at:"left"}); /* B) slide down the menu left aligned with the menu item */
        //or menu.fadeIn(500).position({of:li,my:"center bottom-15",at:"center"}); /* C) fade in centered underneath the menu item */
    }

The Infradox script uses JQueryUI to position and display the pulldown menu’s, so you can use all supported animations et cetera.

Furthermore, you’ll see this code fragment in the example template:

<?xs if config('xsp_searchpos==1') {
      <?xs html('quicksearchbar.inc') ?>
} ?>

This takes care of including the quick search HTML code in the position that you have configured in Back office. You can of course simply remove the code fragments and add the

<?xs html('quicksearchbar.inc') ?>

to include the HTML in the position where you want it to appear.

Creating your own menu

You can of course take things into your own hands entirely. Have a look at the example code below that doesn’t use the XS tags to insert the standard menu:

...
<li class="headpart formenu">
     <div id="userInfo" class="searchpos<?xs rproperty('xsp_searchpos','0') ?>">
<?xs if not guest {
          <a href="/myaccount"><?xs print('1:Hello','2:','3:Bonjour') ?>, <?xs session('username') ?></a>
} ?>
     </div>
     <div id="mainMenuContainer" xsmenu="1">
          <ul id="right" class="menuitems isguest<?xs session('guest') ?>">
               <li id="lmenu_4"><a id="menu_4" href="/contact-us"><?xs locale('pag_contactustitle') ?></a>
<?xs if guest {
               <li><a href="/login" class="needlogin"><?xs locale('loc_login') ?></a></li>
               <li class="last bar"><a href="/register"><?xs locale('loc_register') ?></a></li>
} ?>
<?xs if not guest {
               <li id="lmenu_5"><a id="menu_5" class="arrow" href="#"><?xs locale('pag_myaccounttitle') ?></a></li>
               <li id="lmenu_6"><a id="menu_6" href="/cart"><?xs locale('lbl_cart') ?> <span id="menucartcount" title="Order"><?xs session('cartcount') ?></span></a></li>
               <li id="lmenu_8" class="lightboxall_1 last bar"><a id="menu_8" href="#"><?xs locale('lbl_lightbox') ?></a></li>
} ?>

          </ul>		
     </div>		
</li>
...

Using the tags to insert the entire menu have the advantage that checking if a user is logged in or not – and hiding/displaying HTML accordingly, is automatic. If you create a menu yourself, then you’ll have to check the user status also. In the above example, the guest conditions are used to hide or show HTML depending on who’s visiting the website.

If you have created dynamic subdomains

Some of the subdomain settings will not take effect automatically if you use a custom header and menu. You can however control everything from within your code. Use subdomain conditions to include or exclude page fragments, apply different CSS and so on.

Examples:

<?xs if subdomain(0) {
     NO subdomain active
} ?>
<?xs if subdomain(11) {
     subdomain with id 11 is active
} ?>

You can use the conditions as shown in the above examples to show or hide html elements, to apply special CSS and so on.

You can also use the following tags for subdomains:

<?xs session('subdomainname') ?>

to output the active subdomain name.

<?xs session('subdomainid') ?>

to output the subdomain id. If no subdomain is active (i.e. www) then this will output 0.

You can use this to e.g. apply different CSS based on the subdomain. The example below outputs … class=”subdomain0″ or class=”subdomain1″ etc, so that you create and apply different classes based on which subdomain is active.

Step by step

This sections explains step by step how to load the default template and how to make changes to it. First load the template default-banner-1.txt into the code editor. This will output the same html as you would get without using a custom template. This template uses the menu that you have built with the menu builder, it inserts the quick search box html and it uses all the settings that you have configured in backoffice / site configuration.

<!-- this is a starting point template which outputs the same html as you would get without using a custom template -->
<div id="mastheadcontainer">
   <div id="masthead" class="fixcenterwidth">
      <div class="masthead-inner">
         <div class="mastheadleft">
            <a href="/home"><img decoding="async" id="topcompimg" src="<?xs session('logo') ?>" class="noalign"
               style="position:relative;top:<?xs rproperty('lgo_top','0') ?>px;left:<?xs rproperty('lgo_lft','0') ?>px" 
               title="<?xs rproperty('ts_pagetitle') ?>" /></a>
         </div>
         <div class="mastheadright">
            <div id="userInfo" class="searchpos<?xs rproperty('xsp_searchpos','0') ?>">
               <ul>
<?xs if guest {
    <?xs if config('men_loglogpos==0') {
                  <li class="bar"><a href="/login" class="needlogin"><?xs constant('loc_login','defaults') ?></a></li>
    } ?>
    <?xs if config('men_logregpos==0') {
                  <li class="bar"><a href="/register"><?xs constant('loc_register','defaults') ?></a></li>
    } ?>
} ?>
<?xs if not guest {
                  <li class="bar"><a href="/myaccount"><?xs constant('cSignedinas') ?> <?xs session('username') ?></a></li>
    <?xs if config('men_logoutpos==0') {
                  <li class="bar"><a href="/logout"><?xs constant('loc_logout','defaults') ?></a></li>
    } ?>
} ?>
                  <li id="activelocale" locale="<?xs var('localeid') ?>" class="bar locales_<?xs rproperty('loc_localecount','0') ?> locale_<?xs var('localeid') ?>">
                     <a href="#"><?xs var('localename') ?></a>
                  </li>
               </ul>
<?xs if config('loc_localecount<>1') {
               <div id="localedropdown">
                  <ul id="uilocales">
                     <?xs localemenulist() ?>				        
                  </ul>
               </div>
} ?>
            </div>
<?xs if config('xsp_searchpos==1') {
    <?xs html('quicksearchbar.inc') ?>
} ?>
            </div>
         </div>
      </div>

      <div class="menuwrapper fixcenterwidth">
         <div id="mainMenuContainer" xsmenu="1">
            <ul id="left" class="menuitems" style="margin-left:<?xs rproperty('mnu_left','0') ?>px">
<?xs html('xs-leftsidemenu.inc') ?>
            </ul>
            <ul id="right" class="menuitems">
<?xs html('xs-rightsidemenu.inc') ?>
            </ul>
         </div>
      </div>
<?xs html('xs-dropdownmenus.inc') ?>
</div> <!-- masthead container -->

<?xs if config('xsp_searchpos==0') {
    <?xs html('quicksearchbar.inc') ?>
} ?>

As you can see, the template has instructions and conditions that you don’t need if you know what items you want to appear where. So we can now remove what we don’t need. Fewer instructions/conditions means that there’s less to parse so the output will be faster. Note that changing settings in backoffice will of course no longer have an effect as a result.

The settings men_loglogpos and mem_logoutpos are used to configure where to position the log in and log out links, and the setting men_logregpos is used to configure where to position the register link. If we know where we want these links to appear, then we can change the template accordingly by removing the conditions for these settings. These links appear in a div (with id userInfo) and we want this div on the right side in the banner. The class searchpos0 has CSS to make it appear there. So we can remove the tag and replace it by the number 0.
Note that if you don’t want these links in the page header but for example in the menus instead, then remove them from the template and use the menu builder to put the items where you want them to appear.

Furthermore, we know where we want the logo so we can remove the inline style from it and we can then add the CSS for this to the custom CSS file. We could of course replace the constants with normal text too, but this is not recommended. By keeping the constants, we can change the text/labels without having to edit the template and if the website supports multiple locales then the correct language will be automatically used in the resulting HTML.

Our website supports multiple languages, so we can remove the condition that checks if there is more than one language configured in backoffice (loc_localecount). The localemenulist() tag outputs the configured locales for the language selection menu, so we do want to keep that. If your website doesn’t support multiple locales, then you can of course remove everything that has to do with that (e.g. you can remove the div localedropdown and everything in it).

The tag that applies a margin with inline style to the left side menu can also be removed (rproperty(‘mnu_left’,’0′)).

Finally, we want the quick search box to appear on the right side of the banner, so we can remove the code with the xsp_searchpos condition too (xsp_searchpos==1 puts the quick search HTML in the banner on the right, xsp_searchpos==0 puts it in the banner underneath the menu and on the left).

Below is the template after the above changes (note that this is also available as a default-banner-2.txt).

<div id="mastheadcontainer">
   <div id="masthead" class="fixcenterwidth">
      <div class="masthead-inner">
         <div class="mastheadleft">
            <a href="/home"><img decoding="async" id="topcompimg" src="<?xs session('logo') ?>" class="noalign"			     
               title="<?xs rproperty('ts_pagetitle') ?>" /></a>
         </div>
         <div class="mastheadright">
            <div id="userInfo" class="searchpos0">
               <ul>
<?xs if guest {
                  <li class="bar"><a href="/login" class="needlogin"><?xs constant('loc_login','defaults') ?></a></li>
                  <li class="bar"><a href="/register"><?xs constant('loc_register','defaults') ?></a></li>
} ?>
<?xs if not guest {
                  <li class="bar"><a href="/myaccount"><?xs constant('cSignedinas') ?> <?xs session('username') ?></a></li>
                  <li class="bar"><a href="/logout"><?xs constant('loc_logout','defaults') ?></a></li>
} ?>
                  <li id="activelocale" locale="<?xs var('localeid') ?>" class="bar locales_<?xs rproperty('loc_localecount','0') ?> locale_<?xs var('localeid') ?>">
                     <a href="#"><?xs var('localename') ?></a>
                  </li>
               </ul>
               <div id="localedropdown">
                  <ul id="uilocales">
                  <?xs localemenulist() ?>				        
                  </ul>
               </div>
            </div>
<?xs html('quicksearchbar.inc') ?>
         </div>
       </div>
   </div>

   <div class="menuwrapper fixcenterwidth">
      <div id="mainMenuContainer" xsmenu="1">
         <ul id="left" class="menuitems">
<?xs html('xs-leftsidemenu.inc') ?>
         </ul>
         <ul id="right" class="menuitems">
<?xs html('xs-rightsidemenu.inc') ?>
         </ul>
      </div>
   </div>
<?xs html('xs-dropdownmenus.inc') ?>
</div> <!-- masthead container -->

We want a large search box on the home page. We can use the quicksearch widget for this. To learn more about creating a custom page, read Creating a custom Home page. The quicksearch html – that is inserted in the header with the tag html(‘quicksearch.inc’) – has elements with id’s and these id’s are important for the search script. So on the home page, we don’t want the quick search box to appear in the banner – or we would have duplicate id’s which will cause the script to fail. The condition tag server(‘homepage<>1′) takes care of this.
The html below shows how we exclude the quick search box when on the home page:

<div id="mastheadcontainer">
   <div id="masthead" class="fixcenterwidth">
      <div class="masthead-inner">
         <div class="mastheadleft">
            <a href="/home"><img decoding="async" id="topcompimg" src="<?xs session('logo') ?>" class="noalign"			     
               title="<?xs rproperty('ts_pagetitle') ?>" /></a>
         </div>
         <div class="mastheadright">
            <div id="userInfo" class="searchpos0">
               <ul>
<?xs if guest {
                  <li class="bar"><a href="/login" class="needlogin"><?xs constant('loc_login','defaults') ?></a></li>
                  <li class="bar"><a href="/register"><?xs constant('loc_register','defaults') ?></a></li>
} ?>
<?xs if not guest {
                  <li class="bar"><a href="/myaccount"><?xs constant('cSignedinas') ?> <?xs session('username') ?></a></li>
                  <li class="bar"><a href="/logout"><?xs constant('loc_logout','defaults') ?></a></li>
} ?>
                  <!-- remove the li and its contents below if you don't use multiple locales -->
                  <li id="activelocale" locale="<?xs var('localeid') ?>" class="bar locales_<?xs rproperty('loc_localecount','0') ?> locale_<?xs var('localeid') ?>">
                     <a href="#"><?xs var('localename') ?></a>
                  </li>
               </ul>

               <div id="localedropdown"> <!-- remove this div and its contents if you don't use multiple locales -->
                  <ul id="uilocales">
                  <?xs localemenulist() ?>				        
                  </ul>
               </div>
} ?>
            </div>
<?xs if server('homepage<>1') {           
<?xs html('quicksearchbar.inc') ?>
} ?>
         </div>
       </div>
   </div>

   <div class="menuwrapper fixcenterwidth">
      <div id="mainMenuContainer" xsmenu="1">
         <ul id="left" class="menuitems">
<?xs html('xs-leftsidemenu.inc') ?>
         </ul>
         <ul id="right" class="menuitems">
<?xs html('xs-rightsidemenu.inc') ?>
         </ul>
      </div>
   </div>
<?xs html('xs-dropdownmenus.inc') ?>
</div> <!-- masthead container -->

Adding a menu item to the HTML

You can add a menu item to the HTML without using the menu builder. Menu items are list elements containing links. The example below shows how a simple menu item is added after the generated menu html. You should of course use constants or locale conditions if your website supports multiple locales.
Note that the list item must have an id that starts with lmenu_ followed by a unique number, and that the link must have an id that starts with menu_ followed by the same number.

    <div class="menuwrapper fixcenterwidth">
    	<div id="mainMenuContainer" xsmenu="1">
            <ul id="left" class="menuitems" style="margin-left:<?xs rproperty('mnu_left','0') ?>px">
<?xs html('xs-leftsidemenu.inc') ?>
<li order="6" id="lmenu_88"><a id="menu_88" title="My extra menu item" href="/galleries">Extra menu item</a></li>
            </ul>
            <ul id="right" class="menuitems">
<?xs html('xs-rightsidemenu.inc') ?>
            </ul>
        </div>
    </div>

Although not recommended, you can of course write your own menu this way without using any of the xs tags.

Adding a submenu item to the HTML

The menu builder lets you add one extra dropdown menu. If you need more submenu’s, you can simply add the HTML. Using the correct id’s and classes will make sure that the default menu script will also work for your custom menu items (i.e. it will show the dropdown menu when you hover over its menu item). Below is just a simple example, actual menu’s may need more work to support localisation etc.

    <div class="menuwrapper fixcenterwidth">
    	<div id="mainMenuContainer" xsmenu="1">
            <ul id="left" class="menuitems" style="margin-left:<?xs rproperty('mnu_left','0') ?>px">
<?xs html('xs-leftsidemenu.inc') ?>
<!-- this is the item that appears in the menu. The class names and id's are important. The actual pull down menu is added below -->
<li order="8" id="lmenu_8"><a id="menu_8" class="menucustomlist menu_8 arrow pulldownitem" pdid="menucustomlist" title="My extra menu item" href="#">Extra submenu</a></li>
            </ul>
            <ul id="right" class="menuitems">
<?xs html('xs-rightsidemenu.inc') ?>
            </ul>
        </div>
    </div>
<?xs html('xs-dropdownmenus.inc') ?>
<!-- this is the html for the dropdownmenu. Its id is menucustomlist which is added as a class to the menu item above and as the value for the pdid attribute -->
<div id="menucustomlist" class="dropdownmenu lmenu_8">
	<ul>
<li class="c31"><a title="My Galleries" class="group" href="/my-galleries.html">My Galleries</a></li>
<li class="c32"><a title="Photographers" class="group" href="/photographers.html">Photographers</a></li>
<li class="c33"><a title="Portfolio" class="group" href="/portfolio.html">Portfolio</a></li>
	</ul>
</div>

Adding your own HTML to replace the quicksearch.inc HTML

Provided that your HTML uses the correct id’s and classes, you can replace the quicksearch.inc HTML with your own HTML. Below is example HTML to replace the quicksearch.inc HTML.

<div id="searchelements" class="elementshiding0">
   <table class="fsearchtable">
      <tbody>
      <tr class="searchinputrow">
         <td class="inputcontainer">
            <input type="hidden" id="lastsearchval" value="<?xs search('lastsearchvalue') ?>" />
            <input class="isearch" opt="1" type="text" deftxt="<?xs locale('qck_defaulttext','defaults') ?>" 
               name="quicksearchtext" id="quicksearchtext" value="<?xs locale('qck_defaulttext','defaults') ?>" autocomplete="off" />
         </td> 
         <td class="optionscontainer"> 
            <a href="#" id="optionsbutton"></a>
         </td>
         <td class="searchcontainer">
            <a id="linksearch" href="#"><img src='/siteowner/artwork/artwork/magnifier.png' width="30"></a>
         </td>
      </tr>
      <tr>
         <td class="searchwithin">
            <input type="radio" class="searchradio" name="searchstyle" value="0"> <?xs constant('clblRadioNew') ?>
            <input type="radio" class="searchradio" name="searchstyle" value="1"> <?xs constant('clblRadioWithin') ?>
         </td>
         <td colspan="2" class="researchoptions">
            <a id="qssearchservice" href="/searchrequest/new"><?xs print('1:Send Search Request','2:Zoekopdracht','3:Demande de Recherche') ?></a>
         </td>
      </tr>
      </tbody>
   </table>		
</div>

FAQ

I don’t want a menu at all in the page header. Is that possible?
That’s of course possible, just remove the menu html and tags from your template. You will then have to add links to other pages/templates to access certain pages yourself.
I only want a single menu, how do I do that?
You can use the menu builder to add all items to either the left- or right side menu. Then remove the html for the menu that you don’t want to use – i.e. html(‘xs-leftsidemenu.inc’) or html(‘xs-rightsidemenu.inc’)
I don’t want to use the menu builder, can I create a menu myself?
That’s possible. You’ll need to add the html and script yourself. The xs menu tags generate HTML with specific id’s and classes for the script to work. Use your code inspector to see what the generated HTML looks like.
There’s only one item for a custom drop down menu. Can I add more menu’s?
You can add your own html and script to add as many menu’s as you want.
How do I remove the quick search box on the home page?
Use the condition server(‘homepage<>1′) as explained above.

Custom header and menu

Recommended reading

Building a custom page header

Embedding CSS in your custom header

HTML

A custom banner/header with the default XS menu

Creating your own menu

If you have created dynamic subdomains

Step by step

Adding a menu item to the HTML

Adding a submenu item to the HTML

Adding your own HTML to replace the quicksearch.inc HTML

FAQ

Share this

Related Posts

Buy now function

AI keywording API’s

Problems with sending or receiving website e-mail

Working with synced sub websites

Configuring Stripe for online payments

Responsive images slideshow with WebP support