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