All websites and all pages must include the header.
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:
The desktop header is used on desktop resolutions and tablets in landscape mode.
The desktop header can consist of four parts:
The top header with Ghent logo has the following components:
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.
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:
The top header has the following components:
For the top header of the mobile header, the following conditions apply:
When the website has a search function, the search function is always shown in the header.
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.
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.
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:
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.
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.
{% 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 %}
<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>
{
"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
}
@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;
}
}
}
}