Core Framework v1.4.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. Markup
  2. JavaScript

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.)

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();
}