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.
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.)
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.
Log-in Status
The account tab on the right is displayed differently depending on whether or not the user is logged in.
The view is toggled with the sso-login--logged-in class on the surrounding list element.
Similarly, the sso-login--show-avatar class determines whether to show or hide the
user avatar or placeholder image.
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();
}
