City of Ghent Style Guide

Header

When to use this component

All websites and all pages must include the header.

How it works

The header component is the first visible component on every page. The position of the header is fixed on the page.

Depending on the device’s screen resolution, the header switches to one of the two following modes:

  • Desktop header: Desktop resolutions and tablet in landscape mode
  • Mobile header: Tablet in portrait mode and mobile resolutions

Desktop header

The desktop header is used on desktop resolutions and tablets in landscape mode.

The desktop header can consist of four parts:

  1. Top header with Ghent logo (always required)
  2. Menu with main navigation (optional)
  3. Breadcrumbs (required for most websites)

The top header with Ghent logo has the following components:

  • Ghent logo (always required)
  • Site title (optional, only for separate websites)
  • Search (optional, only if applicable)
  • Language switch (optional, only for multilingual websites with synchronous translations)

To get an idea of different combinations for the desktop header, how they look and how they work, see the examples.

Further specific requirements for the City of Ghent website and for separate websites are listed below.

Mobile header

The mobile header is used on tablet in portrait mode and below (mobile resolutions).

The mobile header can consist of three parts, from top to bottom:

  1. Top header with Ghent logo (always required)
  2. Site title (optional, only for separate websites)
  3. Breadcrumbs (required for most websites)

The top header has the following components:

  • Ghent logo (always required)
  • Search button with link (optional, only if applicable)
  • Menu button (optional, only if applicable)
  • Language switch (optional, only if applicable and for multilingual websites with synchronous translations)

For the top header of the mobile header, the following conditions apply:

  1. When the website has a search function, the search function is always shown in the header.

  2. When the website has main navigation, the menu button is always shown in the header. The menu button opens the mobile menu with the main navigation.

  3. When the website has main navigation and also a language switch, the language switch is integrated in the menu. In these cases, the menu button is always shown in the header. The menu button opens the mobile menu with the main navigation and the language switch. In other words: whenever the website has main navigation, the menu button is used and the language switch (if applicable) is integrated in the mobile menu.

  4. When the website has no main navigation, but has a search function and a language switch, the menu button is used and the language switch is integrated in the menu. The search button is always shown in the header.

Taking the above conditions into account, only the following combinations of elements are possible in the top part of the mobile header:

  • Ghent logo + Search button + Menu button
  • Ghent logo + Search button + Language switch
  • Ghent logo + Search button
  • Ghent logo + Language switch
  • Ghent logo + Menu button
  • Ghent logo only

To get an idea of different combinations for the mobile header, how they look and how they work, see the examples.

Further specific requirements for the City of Ghent website and for separate websites are listed below.

Requirements

City of Ghent website

  • The desktop header includes the following elements:
    • Top header with Ghent logo, Search and authentication component
    • Breadcrumbs
    • The Ghent logo links to the homepage of the City of Ghent general website.
  • The mobile header includes the following elements:
    • Top header with Ghent loco, Search button and authentication component
    • Breadcrumbs
  • The first item of the breadcrumbs is “Home” and links to the homepage of the City of Ghent general website.
  • The search function searches the content of the whole City of Ghent general website.

Separate websites

  • The combination of the City of Ghent logo with the title of the separate website links to the homepage of the separate website.
  • The first item of the breadcrumbs is “Home” and links to the homepage of the separate website.
  • The search function - if included - only searches the content of the separate website.

Further documentation

Language switch

For multilingual websites with synchronous translations, the language switch is included in the header. The language switch shows the current language and is a drop-down menu to let the user switch to another language. In the drop-down menu, the current language is shown first (as a label, not a link). After that, the other language in which the current page is available are shown. These other languages are shown as links that each link to the current page in those specific languages. See the examples.

Header 

{% set hasMenu = menu or (search and auth and translate) %}

{% if is_frontpage %}
  <div class="is-frontpage">
{% endif %}

<header class="header{{ hasMenu ? ' header--menu' : '' }}">
  <div class="content-container">
    {% include '@logo' with {
      site_name: site_name,
      type: subsite ? 'subsite'  : ''
    } %}

    {% if search %}
      {% include '@link' with {
        link: "#",
        text: "search",
        modifier: "search--link",
        title: "search"
      } %}

      {% include '@search' with {
        label: header_search_label,
        search_id: _self.name ~ '-header-search',
        placeholder: header_search_placeholder,
        modifier_search: header_search_modifier_search,
        text: header_search_text,
        modifier_submit: header_search_modifier_submit
      } %}
    {% endif %}

    {% if translate %}
      {% include '@language-switcher' with {
        accordion: true,
        id: _self.name ~ '-translate'
      } %}
    {% endif %}

    {% if hasMenu %}
      {% set Translate %}
        {% if translate %}
          {% include '@language-switcher' with {
            accordion: false,
            id: _self.name ~ '-translate-mobile'
          } %}
        {% endif %}
      {% endset %}

      {% include '@main-menu' with {
        items: menu_items,
        translate: Translate,
        id: _self.name ~ '-menu',
      } %}
    {% endif %}
  </div>

  {% if subsite %}
    <div class="site-name">
      <span>{{ site_name }}</span>
    </div>
  {% endif %}

  {% if breadcrumbs_items %}
    {% include '@breadcrumbs' with {
      items: breadcrumbs_items,
      id: _self.name ~ '-header-crumbs'
    } %}
  {% endif %}
</header>

{% if is_frontpage %}
  </div>
{% endif %}
 
<!-- Default -->
<header class="header">
    <div class="content-container">
        <a href="#" title="Home" class="site-logo " rel="home">
            Stad Gent
        </a>

        <a href='#' class="search--link" title="search">
            search </a>

        <form class="form search">
            <label for="default-header-search">Search
            </label>

            <input type="search" id="default-header-search" name="default-header-search" class="search" placeholder="Search" required="true" />
            <button type="submit" class="button button- ">
                Search
            </button>
        </form>

    </div>

    <nav class="breadcrumb section--default" aria-labelledby="default-header-crumbs">
        <div class="content-container">
            <h2 id="default-header-crumbs" class="visually-hidden">Breadcrumb</h2>
            <ol class="no-style">
                <li><a href='#'>Home</a></li>
                <li><a href='#'>Society, Welfare & health</a></li>
                <li><a href='#'>News & Events</a></li>
                <li><span>Page title</span></li>
            </ol>
        </div>
    </nav>
</header>


<!-- Default - on frontpage -->
<div class="is-frontpage">

    <header class="header">
        <div class="content-container">
            <a href="#" title="Home" class="site-logo " rel="home">
                Stad Gent
            </a>

            <a href='#' class="search--link" title="search">
                search </a>

            <form class="form search">
                <label for="default_on_frontpage-header-search">Search
                </label>

                <input type="search" id="default_on_frontpage-header-search" name="default_on_frontpage-header-search" class="search" placeholder="Search" required="true" />
                <button type="submit" class="button button- ">
                    Search
                </button>
            </form>

        </div>

    </header>

</div>


<!-- Seperate multilingual site with synchronous translations -->
<header class="header">
    <div class="content-container">
        <a href="#" title="Home" class="site-logo subsite" rel="home">
            ICT Supplier District09
        </a>

        <div class="language-switcher accordion">
            <button aria-controls="seperate_translation-translate" aria-expanded="false" class="toggle accordion--button">
                NL
            </button>
            <div id="seperate_translation-translate" class="accordion--content" aria-hidden="true">
                <ul class="content links">
                    <li>
                        <strong>NL</strong>
                    </li>
                    <li>
                        <a href="#" hreflang="en" title="Continue in English" lang="en">
                            EN </a>
                    </li>
                    <li>
                        <a href="#" hreflang="fr" title="Poursuivez en français" lang="fr">
                            FR </a>
                    </li>
                    <li>
                        <a href="#" hreflang="de" title="Weiter auf Deutsch" lang="de">
                            DE </a>
                    </li>
                </ul>

            </div>
        </div>

    </div>

    <div class="site-name">
        <span>ICT Supplier District09</span>
    </div>

    <nav class="breadcrumb section--default" aria-labelledby="seperate_translation-header-crumbs">
        <div class="content-container">
            <h2 id="seperate_translation-header-crumbs" class="visually-hidden">Breadcrumb</h2>
            <ol class="no-style">
                <li><a href='#'>Home</a></li>
                <li><a href='#'>Society, Welfare & health</a></li>
                <li><a href='#'>News & Events</a></li>
                <li><span>Page title</span></li>
            </ol>
        </div>
    </nav>
</header>


<!-- Seperate multilingual site with menu + synchronous translations + search -->
<header class="header header--menu">
    <div class="content-container">
        <a href="#" title="Home" class="site-logo subsite" rel="home">
            ICT Supplier District09
        </a>

        <a href='#' class="search--link" title="search">
            search </a>

        <form class="form search">
            <label for="seperate_hmenu_translation_search-header-search">Search
            </label>

            <input type="search" id="seperate_hmenu_translation_search-header-search" name="seperate_hmenu_translation_search-header-search" class="search" placeholder="Search" required="true" />
            <button type="submit" class="button button- ">
                Search
            </button>
        </form>

        <div class="language-switcher accordion">
            <button aria-controls="seperate_hmenu_translation_search-translate" aria-expanded="false" class="toggle accordion--button">
                NL
            </button>
            <div id="seperate_hmenu_translation_search-translate" class="accordion--content" aria-hidden="true">
                <ul class="content links">
                    <li>
                        <strong>NL</strong>
                    </li>
                    <li>
                        <a href="#" hreflang="en" title="Continue in English" lang="en">
                            EN </a>
                    </li>
                    <li>
                        <a href="#" hreflang="fr" title="Poursuivez en français" lang="fr">
                            FR </a>
                    </li>
                    <li>
                        <a href="#" hreflang="de" title="Weiter auf Deutsch" lang="de">
                            DE </a>
                    </li>
                </ul>

            </div>
        </div>

        <nav class="menu">
            <button type="button" class="modal-trigger toggle" aria-expanded="false" aria-controls="seperate_hmenu_translation_search-menu">menu
            </button>

            <ul class="">
                <li><a href='#' class='active'>Home</a></li>
                <li><a href='#'>News & events</a></li>
                <li><a href='#'>Subpage</a></li>
                <li><a href='#'>Another page</a></li>
            </ul>

            <div id="seperate_hmenu_translation_search-menu" class="modal has-custom-binding menu" role="dialog" aria-modal="true" tabindex="-1">

                <div class="modal-inner">
                    <div class="modal-header">
                        <button class="button button-secondary close icon-cross modal-close" data-target="seperate_hmenu_translation_search-menu">
                            <span>Close</span>
                        </button>
                    </div>
                    <div class="modal-content">
                        <div class="header">
                            <a href="#" title="Home" class="site-logo " rel="home">
                                ICT Supplier District09
                            </a>
                        </div>
                        <div class="menu-links">

                            <ul class="">
                                <li><a href='#' class='active'>Home</a></li>
                                <li><a href='#'>News & events</a></li>
                                <li><a href='#'>Subpage</a></li>
                                <li><a href='#'>Another page</a></li>
                            </ul>

                        </div>

                        <div class="language-switcher">
                            <ul class="content links">
                                <li>
                                    <strong>NL</strong>
                                </li>
                                <li>
                                    <a href="#" hreflang="en" title="Continue in English" lang="en">
                                        EN </a>
                                </li>
                                <li>
                                    <a href="#" hreflang="fr" title="Poursuivez en français" lang="fr">
                                        FR </a>
                                </li>
                                <li>
                                    <a href="#" hreflang="de" title="Weiter auf Deutsch" lang="de">
                                        DE </a>
                                </li>
                            </ul>

                        </div>

                    </div>
                </div>

                <div class="modal-overlay modal-close" data-target="seperate_hmenu_translation_search-menu" tabindex="-1"></div>
            </div>
        </nav>
    </div>

    <div class="site-name">
        <span>ICT Supplier District09</span>
    </div>

    <nav class="breadcrumb section--default" aria-labelledby="seperate_hmenu_translation_search-header-crumbs">
        <div class="content-container">
            <h2 id="seperate_hmenu_translation_search-header-crumbs" class="visually-hidden">Breadcrumb</h2>
            <ol class="no-style">
                <li><a href='#'>Home</a></li>
                <li><a href='#'>Society, Welfare & health</a></li>
                <li><a href='#'>News & Events</a></li>
                <li><span>Page title</span></li>
            </ol>
        </div>
    </nav>
</header>


/* Default */
{
  "search": true,
  "translate": false,
  "header_search_id": "header-search",
  "header_search_label": "Search",
  "header_search_placeholder": "Search",
  "header_search_text": "Search",
  "breadcrumbs_id": "system-breadcrumb",
  "breadcrumbs_items": [
    "<a href='#'>Home</a>",
    "<a href='#'>Society, Welfare & health</a>",
    "<a href='#'>News & Events</a>",
    "<span>Page title</span>"
  ],
  "figure_logo_src_dark": "/styleguide/img/stock/district09-dark.svg",
  "figure_logo_src_light": "/styleguide/img/stock/district09-light.svg",
  "site_name": "Stad Gent",
  "menu_items": [],
  "is_frontpage": false,
  "hero_image_src": null
}


/* Default - on frontpage */
{
  "search": true,
  "translate": false,
  "header_search_id": "header-search",
  "header_search_label": "Search",
  "header_search_placeholder": "Search",
  "header_search_text": "Search",
  "breadcrumbs_id": "system-breadcrumb",
  "breadcrumbs_items": [],
  "figure_logo_src_dark": "/styleguide/img/stock/district09-dark.svg",
  "figure_logo_src_light": "/styleguide/img/stock/district09-light.svg",
  "site_name": "Stad Gent",
  "menu_items": [],
  "is_frontpage": true
}


/* Seperate multilingual site with synchronous translations */
{
  "search": false,
  "translate": true,
  "header_search_id": "header-search",
  "header_search_label": "Search",
  "header_search_placeholder": "Search",
  "header_search_text": "Search",
  "breadcrumbs_id": "system-breadcrumb",
  "breadcrumbs_items": [
    "<a href='#'>Home</a>",
    "<a href='#'>Society, Welfare & health</a>",
    "<a href='#'>News & Events</a>",
    "<span>Page title</span>"
  ],
  "figure_logo_src_dark": "/styleguide/img/stock/district09-dark.svg",
  "figure_logo_src_light": "/styleguide/img/stock/district09-light.svg",
  "site_name": "ICT Supplier District09",
  "menu_items": [],
  "is_frontpage": false,
  "subsite": true
}


/* Seperate multilingual site with menu + synchronous translations + search */
{
  "search": true,
  "translate": true,
  "header_search_id": "header-search",
  "header_search_label": "Search",
  "header_search_placeholder": "Search",
  "header_search_text": "Search",
  "breadcrumbs_id": "system-breadcrumb",
  "breadcrumbs_items": [
    "<a href='#'>Home</a>",
    "<a href='#'>Society, Welfare & health</a>",
    "<a href='#'>News & Events</a>",
    "<span>Page title</span>"
  ],
  "figure_logo_src_dark": "/styleguide/img/stock/district09-dark.svg",
  "figure_logo_src_light": "/styleguide/img/stock/district09-light.svg",
  "site_name": "ICT Supplier District09",
  "menu_items": [
    "<a href='#' class='active'>Home</a>",
    "<a href='#'>News & events</a>",
    "<a href='#'>Subpage</a>",
    "<a href='#'>Another page</a>"
  ],
  "is_frontpage": false,
  "subsite": true,
  "menu": true
}
  • Content: 
    @use "sass:math";

header.header {
  position: relative;

  // first row
  > .content-container {
    display: flex;
    align-items: center;

    @include tablet {
      flex-wrap: wrap;
    }

    > :not(:first-child) {
      margin-left: $gutter-width;
    }

    .site-logo {
      margin-right: auto;
      padding: 20px 0;

      .is-frontpage & {
        align-items: flex-start;
        padding: 20px 0;

        @include tablet {
          padding: 20px 0 0;
        }
      }

      &.subsite {
        flex: 1;
      }
    }

    .search {
      display: none;
      flex: 1;
      flex-wrap: nowrap;
      justify-content: flex-end;

      label {
        @extend %visually-hidden;
        @include bold-text;
      }

      input {
        margin-bottom: 0;
      }

      input[type=submit],
      button[type=submit] {
        max-width: 0;
        padding-right: 0;
        padding-left: 0;
        transition: opacity .2s ease-in-out, max-width .2s ease-in-out, padding .2s ease-in-out, background-size .3s;
        box-shadow: none;
        opacity: 0;

        &:focus {
          max-width: 9999px;
          padding-right: 15px;
          padding-left: 15px;
          opacity: 1;
        }
      }

      input[type=search],
      input[type=text] {
        flex: 0 1 auto;
        width: 100%;
        min-width: 0;
        max-width: 210px;
        margin-right: 0;
        transition: max-width .2s ease-in-out;

        &:invalid {
          box-shadow: none;
        }

        &:focus,
        &:valid {
          max-width: 440px;
          margin: 0 0 0 8px;

          ~ input[type=submit],
          ~ button[type=submit] {
            max-width: 9999px;
            padding-right: 15px;
            padding-left: 15px;
            opacity: 1;
          }

        }
      }

      @include tablet {
        display: flex;
      }
    }

    .search--link {
      @include theme('background-color', 'color-zero', 'header-search-background-color');

      display: block;
      min-width: 44px;
      max-width: calc(16px + 32px);
      height: 44px;
      border-bottom: 0;
      background: svg-as-background('search', color('white'), 24, 24) no-repeat left 10px center;
      text-indent: -9999px;
      overflow: hidden;

      @include tablet {
        display: none;
      }
    }

    .authentication {
      align-items: center;
      margin-left: 16px;

      @include tablet {
        margin-left: $gutter-width;
      }
    }

    .authentication,
    .language-switcher {
      align-self: stretch;
    }

    // Align main menu with site logo and breadcrumb.
    nav.menu {
      @include tablet {
        flex-basis: 100%;
        flex-grow: 1;
        order: 9999;
        margin-left: 0;
      }

      line-height: 1;
    }
  }

  .site-name {
    @include theme('color', 'color-tertiary', 'default-text-color');
    @include bold-text;

    @include tablet {
      display: none;
    }

    margin: 16px 0 8px;
    font-size: .9rem;
  }

  &--menu > .content-container {
    > .language-switcher {
      @include tablet-and-below {
        display: none;
      }
    }
  }
}
  • URL: /components/raw/header/_header.scss
  • Filesystem Path: components/41-organisms/header/_header.scss
  • Size: 3.1 KB