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.

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

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">Rein ins neue Leben.</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

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.

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)