Page Header – Full

This section explains how to construct the global ImmobilienScout24 header. You will find a complete example of a real-life header, followed by a detailed look at the points that you can tweak to your needs.

Things to sort out:

Location of logo image
Example for possible fallback header for small devices
Login – dynamic elements

Responsiveness
Full Code Example
World Navigation
Sub Navigation
1. Highlighting
2. “New” Icon
Scout24 Verticals

Responsiveness

The full header is partly responsive in that it will fit any display size in the “lap” and “desk” states. However, there is no definition of the full header for smaller devices. As a result, this header will be hidden on palm-sized devices.

Use a light-weight fallback header for small devices. You can switch between the two using the state-specific hiding classes.

Full Code Example

This is an example header based on the actual live header for the Hausbau category as at 2013-12-06.

Header for Wohnen › Hausbau (2013-12-06)

<header class="header-full">
  <div class="header-top">
    <a href="/de/finden/wohnen/index.jsp" title="Zur Startseite">
      <img src="../../img/logo/logo.png" width="112" height="56" alt="ImmobilienScout24" class="header-logo" />
    </a>
    <span class="header-claim">Der Marktführer: Die Nr. 1 rund um Immobilien</span>
    <h6>Immobilienwelten</h6>
    <ul class="header-worlds">
      <li class="active"><a href="/de/finden/wohnen/index.jsp"><span class="header-verbose">Immobilien zum </span>Wohnen</a></li>
      <li><a href="/de/finden/gewerbe/index.jsp"><span class="header-verbose">Immobilien für Ihr </span>Gewerbe</a></li>
      <li><a href="/de/anbieten/immobilien-inserieren.jsp"><span class="header-verbose">Immobilien zum </span>Anbieten</a></li>
      <li><a href="/eigentuemer/"><span class="header-verbose">Immobilien-</span>Eigentümer</a></li>
    </ul>
    <ul class="header-login">
      <li>
        Willkommen!
        <a href="/sso/login.go">Anmelden</a>
        oder
        <a href="/sso/register.go">neu registrieren</a>.
      </li>
    </ul>
  </div>
  <div class="header-sub-navigation">
    <h6>Navigation</h6>
    <ul class="header-categories">
      <li><a href="/wohnen/">Suchen</a></li>
      <li class="header-category-new"><a href="/suchagent/gesuche">Suchanzeigen</a></li>
      <li><a href="/baufinanzierung/">Baufinanzierung</a></li>
      <li class="active"><a href="/bauen/">Hausbau</a></li>
      <li><a href="/einrichten/">Wohnideen</a></li>
      <li><a href="/umzug/">Umzug</a></li>
      <li><a href="/de/immobilienbewertung/index.jsp">Markt & Preise</a></li>
      <li><a href="/anbieter/">Branchenbuch</a></li>
    </ul>
    <ul class="header-account-tools">
      <li><a href="/sso/login.go?returnUrl=/geschlossenerbereich/merkzettel.html"><span>Merkzettel</span></a></li>
      <li class="last"><a href="/geschlossenerbereich/start.html"><span>Mein Konto</span></a></li>
    </ul>
  </div>
  <div class="header-content-navigation">
    <ul class="header-topics">
      <li><a href="/bauen/goldencube2014.html">Golden Cube 2014</a></li>
      <li><a href="/Lead/Start/Musterhaus/">Musterhäuser</a></li>
      <li><a href="/Lead/Start/Hausbau/">Haus Kataloge</a></li>
      <li><a href="/bauen/musterhausparks.html">Musterhausparks</a></li>
      <li><a href="/bauen/bauplanung.html">Bauplanung</a></li>
      <li><a href="/bauen/news.html">Hausbau-News</a></li>
    </ul>
  </div>
</header>

Navigation

World Navigation

The world navigation can be highlighted to show in which world the user is at the moment. Change the highlighting by moving around the .active class.

<ul class="header-worlds">
    <li><a href="#">Wohnen</a></li>
    <li class="active"><a href="#">Gewerbe</a></li>
    <li><a href="#">Anbieten</a></li>
    <li><a href="#">Eigentümer</a></li>
</ul>

<ul class="header-worlds">
    <li><a href="#">Wohnen</a></li>
    <li><a href="#">Gewerbe</a></li>
    <li class="active"><a href="#">Anbieten</a></li>
    <li><a href="#">Eigentümer</a></li>
</ul>

Sub Navigation

Highlighting

You can designate a sub navigation item as active by attaching the class .active.

Sub navigations with different highlights

<ul class="header-categories">
    <li class="active"><a href="#">Suchen</a></li>
    <li><a href="#">Suchanzeigen</a></li>
    <li><a href="#">Baufinanzierung</a></li>
    <li><a href="#">…</a></li>
</ul>

Navigation

<ul class="header-categories">
    <li><a href="#">Suchen</a></li>
    <li><a href="#">Suchanzeigen</a></li>
    <li class="active"><a href="#">Baufinanzierung</a></li>
    <li><a href="#">…</a></li>
</ul>

Navigation

“New” Icon

You can place the NEU icon on list items to designate new or relaunched categories. To do it, give the targeted list item the class .header-category-new.

Note that the placement of the NEU icon is a company-wide decision and needs to be coordinated.

<ul class="header-categories">
    <li class="header-category-new"><a href="#">Suchen</a></li>
    <li><a href="#">Suchanzeigen</a></li>
    <li><a href="#">Baufinanzierung</a></li>
    <li><a href="#">…</a></li>
</ul>

Navigation

Scout24 Verticals

The standard page layout has links to all of the Scout24 Group's Verticals at the top of the page.
While visually the top-most element on the page, they are meant to be down low in the source code for SEO-related reasons.

To make this work, the link bar needs to be placed at the end of your page wrapper. It will then be positioned absolutely to make sure it is displayed at the top for lap-sized and desk-top devices.

The page wrapper, in turn, needs to get the class .has-scout24-verticals to make space at the top for the link bar.

Heizölpreise — Link bar for Scout24 Verticals (Background colors and paddings added for demonstrational purposes)