Core Framework v1.3.0 – Documentation

Top Navigation

The global top navigation is the central navigation hub to all of ImmobilienScout24's content sections, as well as to the user's account area. It replaces the old global header.

The navigation bar will stick to the top of the page when the user scrolls down. (We've placed one at the top of this page for your scrolling pleasure.)

On smaller devices, the tabs are replaced with slide-in navigations, with content links sliding in from the left, and login links sliding in from the right.

  1. Implementation
    1. Markup
    2. JavaScript
  2. Fixed vs. Non-fixed
  3. “Powered-by” Logo

Please note: Code examples in this documentation are limited to implementation demos. The header configuration is centrally managed within the CMS, so if you wish to use the top navigation on your pages, you should include the necessary markup by way of a CMS content snippet.
(For more information on how to do that, please refer to the Wiki or bribe your CMS team with shiny things.)

Implementation

Markup

Page structure for top navigation
<body>
  <div class="viewport">
    <div class="page-wrapper top-navigation-slide-in-container corporate-powered-by-container">
      <!--
        header goes here (the actual header markup is supplied through the CMS header snippets)
      -->
    </div>
  </div>
</body>

The additional top-navigation-slide-in-container class handles all styling for the slide-in part of the top navigation.

The corporate-powered-by-container class is necessary to properly show and position the “Powered by Telekom” logo at the top of the header.

JavaScript

The top navigation needs some JavaScript for the slide-in navigation and the fix-to-top behavior.

Note: These scripts are automatically called through an inline script tag included in the CMS header snippet, so you just need to make sure that the Core JS is available.

if (window.IS24 && IS24.core && IS24.core.topNavigation) {
  IS24.core.topNavigation.init();
}
if (window.IS24 && IS24.core && IS24.core.fixElementToViewportTop) {
  IS24.core.fixElementToViewportTop.init();
}

Fixed vs. Non-fixed

The top navigation bar is by default fixed to the top of the display. If you need the header to stay where it is regardless of scrolling, you may leave away the fix-to-top class (and any related wrapper elements).

(There is going to be a separate CMS snippet for this.)

Fixed header
<!-- this wrapper acts as a reference to determine at which point the header should be fixed -->
<div class="fix-to-top-wrapper fix-to-top-wrapper--top-navigation">
    <nav class="top-navigation fix-to-top">
        <!-- this one works some positioning magic when there is a skyscraper ad -->
        <div class="fix-to-top__skyscraper-spacer">
            <!--
                navigation content starts here
            -->
        </div>
    </nav>
</div>
Non-fixed header
<nav class="top-navigation">
    <!-- navigation content starts here -->
</nav>

“Powered-by” Logo

The powered-by logo, while visually the top-most element on the page, is meant to be down low in the source code for SEO-related reasons.

To make this work, the logo needs to be placed at the end of the page wrapper. It will then be positioned absolutely to make sure it is visually at the top of the page.

If you get your header from the CMS, you will automatically receive the powered-by container.

Powered-by logo implementation
<div class="page-wrapper corporate-powered-by-container">
  <div class="corporate-powered-by content-wrapper-container">
    <div class="content-wrapper align-right">
      <a rel="nofollow" target="_blank" href="#">
        <img src="//www.static-immobilienscout24.de/fro/core/1.3.0/img/vendor/powered-by-telekom.svg"
             alt="Powered by Telekom" class="corporate-powered-by__logo"
             onerror="this.src='//www.static-immobilienscout24.de/fro/core/1.3.0/img/vendor/powered-by-telekom.png';this.onerror=null;"
        />
        <!-- the onerror handler is a fallback for non-SVG-ready browsers -->
      </a>
    </div>
  </div>
</div>