Skip to content

Latest commit

 

History

History
41 lines (31 loc) · 1.68 KB

usage.md

File metadata and controls

41 lines (31 loc) · 1.68 KB
Raw

Usage

To customise the Hackney Council template

Refer to the table of template blocks and their default values.

Skip link

The hackney_template sets a skip link to #content, but doesn't provide an element with id="content". You'll need to add id="content" to your main content area, to ensure the skip link will work.

Propositional title and navigation

You can get a propositional title and navigation by setting the content for header_class to with-proposition and proposition_header in the form:

<div class="header-proposition">
  <div class="content">
    <a href="#proposition-links" class="js-header-toggle menu">Menu</a>
    <nav id="proposition-menu">
      <a href="/" id="proposition-name">Service Name</a>
      <ul id="proposition-links">
        <li><a href="url-to-page-1" class="active">Navigation item #1</a></li>
        <li><a href="url-to-page-2">Navigation item #2</a></li>
      </ul>
    </nav>
  </div>
</div>

This will then create a navigation block which is shown on desktop sized devices but collapsed down on smaller screens.

For menus with only one item, the collapsible functionality is not necessary, it is recommended that you use the following markup

<div class='header-proposition'>
  <div class='content'>
    <nav id='proposition-menu'>
      <a href='/' id='proposition-name'>Service Name</a>
      <p id='proposition-link'>
        <a href='url-to-page-1'>Navigation item #1</a>
      </p>
    </nav>
  </div>
</div>