Home / Developer Tools / Documentation / ASU Modules & Themes / ASU Header & Footer, Version 4.4

ASU Header & Footer, Version 4.4

This is the current official ASU Header for all asu.edu sites, both Drupal and non-Drupal.

Previous versions: v.3.0, v.3.1, v.4.0, v.4.0-rsp, v.4.2, v.4.3

Contents

Getting started

This will be the last version of the ASU header and footer that will be hosted on AFS. Future versions will live on GitHub (more details on the way). The header and footer files are accessible through AFS and over HTTP:

Inside of the 4.4 folder you will find:

  • css/asu_header.min.css - Minified stylesheet for the header and footer
  • js/asu_header.min.js - Minified JavaScript code used by the header
  • headers/default.shtml - Header markup
  • heads/default.shtml - Embedded CSS and JavaScript code and references to css/asu_header.min.css and js/asu_header.min.js
  • includes/footer.shtml - Footer markup
  • includes/gtm.shtml - Google Tag Manager code

Single standard header

The ASU web standards established a single standard header, which replaces all previous headers. Consequently, headers with endorsed logos (custom headers) are no longer supported. The single standardized header is the only option.

Adding the header and footer

To a non-Drupal site

If you're using the header and footer on a non-Drupal site, follow the instructions for your application language below.

HTML (APACHE WITH SSI SUPPORT)

Note: You must have the path /afs/asu.edu/www/asuthemes mounted in Apache as /asuthemes in your document root. For this, the server must be able to access AFS. Sites already in AFS (e.g., www.asu.edu/my-site) and accounts on the legacy ASU Web Hosting Service (i.e., DirectAdmin) already have this access. ASU AFS FAQs (login required) | OpenAFS (client downloads, etc.)

Header: Place above </head> tag: <!--#include virtual="/asuthemes/4.4/heads/default.shtml"-->
Google Tag Manager: Place below <body> tag: <!--#include virtual="/asuthemes/4.4/includes/gtm.shtml"-->
Header: Place below Google Tag Manager: <!--#include virtual="/asuthemes/4.4/headers/default.shtml"-->
Footer: Above </body> tag: <!--#include virtual="/asuthemes/4.4/includes/footer.shtml"-->

PHP

Header: Place above </head> tag: <?php echo file_get_contents('http://www.asu.edu/asuthemes/4.4/heads/default.shtml'); ?>
Google Tag Manager: Place below <body> tag: <?php echo file_get_contents('http://www.asu.edu/asuthemes/4.4/includes/gtm.shtml'); ?>
Header: Place below Google Tag Manager: <?php echo file_get_contents('http://www.asu.edu/asuthemes/4.4/headers/default.shtml'); ?>
Footer: Above </body> tag: <?php echo file_get_contents('http://www.asu.edu/asuthemes/4.4/includes/footer.shtml'); ?>

To a Drupal site

Webspark

If you are building a new site, the ASU Webspark Site Builder is the preferred and recommended way to build an ASU web standards compliant site. In Webspark, the ASU header and footer are enabled and work out-of-the-box.

Drupal (stand-alone)

If you must build in Drupal 7, the ASU Brand Module adds the ASU header and footer to any Drupal site. See this note about theming and the brand module. (Thanks to Marcus Anthony for creating the original version of this module and making it available to the community.)

There is no Drupal 6 specific method for adding this version of the ASU header and footer. The method described in the "PHP" section above should work for Drupal 6.

To a non-responsive site

To make the header non-responsive, put the header inside of a div and add a min-width value that is greater than 930px. Do the same for the footer.

Configuring the header

The header search behavior and site title are configurable. Links can be added to the header mobile menu as well. See how to configure the header for Drupal and non-Drupal sites.

On a non-Drupal site

On non-Drupal sites, the configuration changes must be made manually by assigning values to pre-defined JavaScript variables.

Search Collection

The search by default searches against the ASU Google Search Appliance. To add a search collection—a search of just your site—you will need to add this variable in your javascript file and set it to your collection.

ASUHeader.gsa = 'Collection'

If you need assistance in finding your collection or creating a new collection, create a support ticket.

Mobile menu

In addition to the ASU global navigation menu, the ASU header can consume a site's local navigation menu and render it as part of its mobile menu. The mobile menu is visible when the browser viewport size is less than 931px.

The ASU header uses JavaScript to append the local navigation menu items to the mobile menu. The site menu needs to provided as a JSON formatted object:

ASUHeader.site_menu.json = 
'[{  
   "title":"Home",
   "path":"http://www.asu.edu/absolute_path"
},
{  
   "title":"Degree Programs",
   "path":"/absolute_path/page",
   "children":[  
	  {  
		 "title":"Admissions",
		 "path":"/?url=variable",
		 "children":[  
			{  
			   "title":"Student Life",
			   "path":"/#hash"             
			}
		 ]
	  },
	  {  
		 "title":"Ross",
		 "path":"https://www.asu.edu/"
	  }
   ]
},
{  
   "title":"Test",
   "path":"http://www.asu.edu/",
   "children":[  
	  {  
		 "title":"Beast Layout",
		 "path":"http://www.asu.edu/"
	  },
	  {  
		 "title":"Landing Page Test",
		 "path":"http://www.asu.edu/"
	  },
	  {  
		 "title":"Moscone w\/ 100% Banner Title",
		 "path":"https://www.asu.edu/"
	  },
	  {  
		 "title":"Plain Moscone Layout",
		 "path":"http://www.asu.edu/layout/this/that/theother"
	  }
   ]
}]';

Site title

The site title can be added to the mobile menu system.

ASUHeader.site_menu.site_name = 'Name of site';

On a Drupal site

On Drupal sites, the header is created by the ASU Brand Module and configuration changes are made through the administration interface directly on the site.

Search

The search by default searches against the ASU Google Search Appliance. To add a search collection—a search of a specific web site or collection of web sites—to a stand-alone Drupal site, you should install the ASU GSA Search Module. On Webspark sites, this module is already installed for you.

Follow the instructions for configuring the ASU GSA Search Module.

If you need assistance in finding your collection or creating a new collection, create a support ticket.

Mobile menu

For Drupal 7 and Webspark sites, the ASU Brand Module (version 7.x-1.7 and above) generates the site menu object by default. Modify menu headers and items by going to the Admin > Structure > Menus > Main Menu page ( /admin/structure/menu/manage/main-menu ). Create menu items for your pages on each pages' edit form.

There is a configuration option in the ASU Brand Module (version 7.x-1.7 and above) to specify a different menu for the Mobile menu.

Site title

For Drupal 7 and Webspark sites, change the site title on the Admin > Configuration > System > Site information page ( admin/config/system/site-information ).

Troubleshooting

Display issues

In Firefox or Chrome, open the console and make sure no errors are being reported. If there is an error:

  • In any file other than asu_header.min.js, the issue is with your site's JS, and you should make any required changes on your site
  • In the asu_header.min.js file, please create a support ticket
Menu items not linking up or displaying
  1. Make sure your json string is formatted correctly.
  2. Ensure that special characters are encoded or escaped.