Top Navigation
The global top navigation is the central navigation hub to all of ImmobilienScout24's content sections, as well as 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 mobile 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
Full-width Version
The standard version of the top navigation requires the complete page structure as explained on Getting Started – Page Structure (Complete).
<body>
<div class="viewport">
<!--
the .page-wrapper gets another class .top-navigation-slide-in-container, which handles all styling for
the slide-in part of the top navigation.
-->
<div class="page-wrapper top-navigation-slide-in-container">
<!--
header goes here (the actual header markup is supplied through the CMS header snippets)
-->
</div>
</div>
</body>
Contained Version
Coming soon…
JavaScript Initiation
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 (IS24 && IS24.core && IS24.core.topNavigation) {
IS24.core.topNavigation.init();
}
if (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.
<!-- the additional .corporate-powered-by-container element acts as positioning reference -->
<div class="page-wrapper corporate-powered-by-container">
<!-- other, more relevant content here -->
<div class="corporate-powered-by">
<div class="content-wrapper align-right">
<a rel="nofollow" target="_blank" href="#">
<img src="//www.static-immobilienscout24.de/fro/core/1.2.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.2.0/img/vendor/powered-by-telekom.png';this.onerror=null;" />
<!-- this onerror handler is a fallback for non-SVG-ready browsers -->
</a>
</div>
</div>
</div>
