Top Navigation
The global top navigation is ImmobilienScout24's central navigation hub. It links to all of the most relevant product and content pages and provides access to the user's account area.
The header configuration is centrally managed within the CMS, so if you wish to use the top navigation in your pages, you should include it 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.)
See the Change Log to find out what's changed from previous versions.- Complete Sample Markup
- CSS and JS Dependencies
- Brand Header
- Navigation Frame
- Navigation Levels
- Account Tab
- JavaScript
Complete Sample Markup
<header class="page-header" role="banner">
<div class="content-wrapper grid grid-flex grid-fill-rows">
<div class="page-header__content page-header__logo-container grid-item grid-align-center grid-item-fixed-width">
<a href="index.html" title="ImmobilienScout24" aria-label="ImmobilienScout24" class="page-header__logo">
<img src="../../img/logo/immobilienscout24.svg" alt="ImmobilienScout24"
onerror="this.src='../../img/logo/immobilienscout24.png';this.onerror=null;" />
</a>
</div>
<div class="page-header__content grid-item grid-align-center grid-item-fixed-width grid-justify-end order-two-down">
<a href="#" class="topnavigation__overlay-trigger--account vertical-center-container">
<div class="topnavigation__sso-login__user-avatar">
<img alt="Placeholder" src="../img/topnavigation/log-in/avatar_placeholder_74x74.png" />
</div><!-- this comment is here to eat up the white space between two inline-block elements
--><span class="topnavigation__sso-login__label-text-wrapper vertical-center">
<span class="sso-login__user-name block font-ellipsis">Anmelden</span>
<span class="block">Mein Konto</span>
</span>
</a>
<div class="topnavigation__overlay--account">
<ul class="topnavigation__level--1 topnavigation__hover-tabs topnavigation__hover-tabs--small-layers topnavigation__slide-in--show-level-2 topnavigation__sso-login sso-login sso-login--show-avatar sso-login--logged-in">
<li>
<a class="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__overlay--account__hide" href="#">
<div class="topnavigation__sso-login__user-avatar">
<img alt="Herzog Frosch von Unkenberg" src="../img/topnavigation/log-in/frog_80x80.jpg" />
</div><!-- this comment is here to eat up the white space between two inline-block elements
--><span class="topnavigation__sso-login__label-text-wrapper">
<span class="topnavigation__sso-login__welcome-message font-ellipsis">
<span class="sso-login__user-name">
<span class="sso-login__user-name">Herzog Frosch von Unkenberg</span>
</span>
</span>
<span class="topnavigation__notification topnavigation__notification--account-tab-label topnavigation-last-search-notification" style="display: inline-block;">1</span>
<span class="block">Mein Konto</span>
</span>
</a>
<div class="topnavigation__level--2 topnavigation__hover-layer topnavigation__hover-layer--right-aligned font-s">
<div class="topnavigation__hover-layer__navigation-wrapper">
<ul class="topnavigation__sso-login__link-list--logged-out list-spacing padding-bottom-none" data-cms-qa="is24-cms-loginbox-logged-out">
<li class="border-bottom padding-bottom">
Persönliche Services nutzen und schneller ans Ziel kommen.
<a href="#" class="margin-vertical-s button-primary button-orange one-whole" id="link_loginLinkInternal">Jetzt anmelden</a>
Neu hier?
<a href="#" class="sso-login-link link-underline">Jetzt registrieren</a>
</li>
</ul>
<ul class="topnavigation__sso-login__link-list icon-arrow list-spacing">
<li>
<a href="#" class="topnavigation-overlay-touch-area">Übersicht</a>
</li>
<li>
<a href="#" class="topnavigation-overlay-touch-area">Merkzettel</a>
</li>
<li>
<a href="#" class="topnavigation-overlay-touch-area">Gespeicherte Suchen</a>
</li>
<li>
<a href="#" class="topnavigation-overlay-touch-area">Persönliches Profil</a>
</li>
<li>
<a href="#" class="topnavigation-overlay-touch-area">Immobilienanzeigen</a>
</li>
<li>
<a href="#" class="topnavigation-overlay-touch-area">EigentümerPlus</a>
</li>
</ul>
<ul class="topnavigation__sso-login__link-list--logged-in list-spacing padding-top-none" data-cms-qa="is24-cms-loginbox-logged-in">
<li class="border-top padding-top align-center">
<a href="#" class="sso-login-link link-underline">Abmelden</a>
</li>
</ul>
</div>
</div>
</li>
</ul><!-- .topnavigation__sso-login -->
</div>
</div>
<div class="page-header__content grid-item grid-align-center grid-item-fixed-width grid-justify-end order-one-down">
<span class="top-navigation__anbieten-button-teaser">
<a href="//www.immobilienscout24.de/anbieten/" class="button button-lightblue top-navigation__anbieten-button align-middle">
Anzeige schalten
</a>
</span>
</div>
<nav class="topnavigation grid-item topnavigation__notification--present" role="navigation">
<a href="#" class="topnavigation__overlay-trigger--menu" aria-label="Navigation anzeigen/verstecken">
<div class="topnavigation__burger"><span></span><span></span><span></span><span></span></div>
</a>
<div class="topnavigation__overlay--menu">
<ul class="topnavigation__level--1 topnavigation__hover-tabs topnavigation__hover-tabs--large-layers" data-cms-qa="is24-cms-page-nav_level1">
<li>
<span class="topnavigation__level--1__label topnavigation__hover-tabs__label">
<!--
-->Suchen</span>
<div class="topnavigation__level--2 topnavigation__hover-layer">
<ul class="topnavigation__hover-layer__navigation-wrapper grid-item grid grid-flex grid-fill-rows">
<li class="grid-item">
<div class="parsys par_1"><div class="linklist parbase section"><span class="topnavigation__level--2__label">Wohnen</span>
<div class="topnavigation__level--3">
<div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
<h3>Wohnen</h3>
<ul>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"mietwohnungen"}" target="_self" href="//www.immobilienscout24.de/wohnen/mietwohnungen.html">Mietwohnungen</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"eigentumswohnungen"}" target="_self" href="//www.immobilienscout24.de/wohnen/eigentumswohnung.html">Eigentumswohnungen</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"haeusermieten"}" target="_self" href="//www.immobilienscout24.de/wohnen/haus-mieten.html">Häuser mieten</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"haeuserkaufen"}" target="_self" href="//www.immobilienscout24.de/wohnen/haus-kaufen.html">Häuser kaufen</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"auslandsimmobilien"}" target="_self" href="//www.immobilienscout24.de/auslandsimmobilien/">Auslandsimmobilien</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"wohnenaufzeit"}" target="_self" href="//www.immobilienscout24.de/wohnen/wohnen-auf-zeit.html">Wohnen auf Zeit</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"wg-zimmer"}" target="_self" href="//www.sandbox-immobilienscout24.de/wohnen/wg-zimmer.html">WG-Zimmer</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="parsys par_2"><div class="linklist parbase section"><span class="topnavigation__level--2__label">Gewerbe</span>
<div class="topnavigation__level--3">
<div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
<h3>Gewerbe</h3>
<ul>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"gewerbeimmobiliensuchen"}" target="_self" href="//www.immobilienscout24.de/gewerbe.html">Gewerbeimmobilien suchen</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"bueropraxis"}" target="_self" href="//www.immobilienscout24.de/gewerbe/bueroimmobilien.html">Büro & Praxis</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"einzelhandel"}" target="_self" href="//www.immobilienscout24.de/gewerbe/einzelhandelsimmobilien.html">Einzelhandel</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"hallenflaechen"}" target="_self" href="//www.immobilienscout24.de/gewerbe/lagerhalle.html">Hallenflächen</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"gastronomieflaechen"}" target="_self" href="//www.immobilienscout24.de/gewerbe/gastronomie-immobilien.html">Gastronomieflächen</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"bueroaufzeit"}" target="_self" href="//www.immobilienscout24.de/gewerbe/buero-auf-zeit.html">Büro auf Zeit</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"gewerbemaklersuchen"}" target="_self" href="//www.immobilienscout24.de/gewerbe-makler/suchen">Gewerbemakler suchen</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="parsys par_3"><div class="linklist parbase section"><span class="topnavigation__level--2__label">Neubau</span>
<div class="topnavigation__level--3">
<div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
<h3>Neubau</h3>
<ul>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"neubauprojekte"}" target="_self" href="//www.immobilienscout24.de/neubau/">Neubauprojekte</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"kapitalanlage"}" target="_self" href="//www.immobilienscout24.de/neubau/kapitalanlage.html">Kapitalanlage</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"hausbauen"}" target="_self" href="//www.immobilienscout24.de/bauen/">Haus bauen</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"grundstueckkaufen"}" target="_self" href="//www.immobilienscout24.de/Suche/S-T/Grundstueck-Kauf?enteredFrom=one_step_search">Grundstück kaufen</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"hausanbieter-vergleich"}" target="_self" href="//www.immobilienscout24.de/bauen/hausanbieter-vergleich.html">Hausanbieter-Vergleich</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"haeusernachpreisen"}" target="_self" href="//www.immobilienscout24.de/bauen/haus-suchen/hauspreise.html">Häuser nach Preisen</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"hausbau-ratgeber"}" target="_self" href="//www.immobilienscout24.de/bauen/schritt-fuer-schritt-zum-traumhaus.html">Hausbau-Ratgeber</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="parsys par_4"><div class="linklist parbase section"><span class="topnavigation__level--2__label">Services</span>
<div class="topnavigation__level--3">
<div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
<h3>Services</h3>
<ul>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"schufabonitaetscheck"}" target="_self" href="//bonitaetscheck.immobilienscout24.de/">SCHUFA Bonitätscheck</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"immobilienwertberechnen"}" target="_self" href="//www.immobilienscout24.de/immobilienbewertung/immobilienwertberechnen.html">Immobilienwert berechnen</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"mietpreispruefen"}" target="_self" href="//www.immobilienscout24.de/immobilienbewertung/mietrechner.html">Mietpreis prüfen</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"grundstueckbewerten"}" target="_self" href="//www.immobilienscout24.de/immobilienbewertung/grundstuecksbewertung.html">Grundstück bewerten</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"premium-profilfreischalten"}" target="_self" href="//www.immobilienscout24.de/lp/premium-profil/">Premium-Profil freischalten</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"veroeffentlichteprofile"}" target="_self" href="//www.immobilienscout24.de/suchagent/gesuche">Veröffentlichte Profile</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"hauskatalogebestellen"}" target="_self" href="//www.immobilienscout24.de/bauen/hauskatalog.html">Hauskataloge bestellen</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="parsys par_5"><div class="linklist parbase section"><span class="topnavigation__level--2__label">Ratgeber</span>
<div class="topnavigation__level--3">
<div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
<h3>Ratgeber</h3>
<ul>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"immobiliensuche"}" target="_self" href="//www.immobilienscout24.de/ratgeber/">Immobiliensuche</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"besichtigung"}" target="_self" href="//www.immobilienscout24.de/ratgeber/immobilienbesichtigung.html">Besichtigung</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"bewerbung"}" target="_self" href="//www.immobilienscout24.de/lp/bewerbermappe.html">Bewerbung</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"vorlagendownloads"}" target="_self" href="//www.immobilienscout24.de/ratgeber/checklisten-vorlagen.html">Vorlagen & Downloads</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"immobilienbewertung"}" target="_self" href="//www.immobilienscout24.de/immobilienbewertung/ratgeber.html">Immobilienbewertung</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"miet-undkaufpreise"}" target="_self" href="//www.immobilienscout24.de/immobilienbewertung/immobilienpreise.htm">Miet- und Kaufpreise</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"wohnen","evt_ga_label":"smarthome"}" target="_self" href="//www.immobilienscout24.de/smarthome/">SmartHome</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</li>
<li>
<span class="topnavigation__level--1__label topnavigation__hover-tabs__label ">
<!--
-->Anbieten</span>
<div class="topnavigation__level--2 topnavigation__hover-layer">
<ul class="topnavigation__hover-layer__navigation-wrapper grid-item grid grid-flex grid-fill-rows">
<li class="grid-item">
<div class="parsys par_1"><div class="parbase linkbutton section"><span class="topnavigation__level--2__label">Jetzt inserieren</span>
<div class="topnavigation__level--3">
<div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
<h3>Jetzt inserieren</h3>
<ul>
<li>
<a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten"}" target="_self" href="//www.immobilienscout24.de/anbieten/"><button class="button-primary">Anzeige schalten</button></a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="parsys par_2"><div class="linklist parbase section"><span class="topnavigation__level--2__label">Für Eigentümer</span>
<div class="topnavigation__level--3">
<div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
<h3>Für Eigentümer</h3>
<ul>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten","evt_ga_label":"selbstvermieten"}" target="_self" href="//www.immobilienscout24.de/anbieten/?seg=eigentuemer/vermiete">Selbst vermieten</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten","evt_ga_label":"selbstverkaufen"}" target="_self" href="//www.immobilienscout24.de/anbieten/?seg=eigentuemer/verkaufe">Selbst verkaufen</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten","evt_ga_label":"mitmaklerverkaufen"}" target="_self" href="//www.immobilienscout24.de/immobilienmakler/">Mit Makler verkaufen</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten","evt_ga_label":"eigentuemerplus-portal"}" target="_self" href="//www.immobilienscout24.de/eigentuemer/plus.html">EigentümerPlus-Portal</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten","evt_ga_label":"eigentuemer-newsletter"}" target="_self" href="//www.immobilienscout24.de/eigentuemer/lp/newsletter-bestellen.html">Eigentümer-Newsletter</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten","evt_ga_label":"energieausweiserstellen"}" target="_self" href="//www.immobilienscout24.de/energieausweis/">Energieausweis erstellen</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="parsys par_3"><div class="linklist parbase section"><span class="topnavigation__level--2__label">Für Mieter</span>
<div class="topnavigation__level--3">
<div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
<h3>Für Mieter</h3>
<ul>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten","evt_ga_label":"nachmieterfinden"}" target="_self" href="//www.immobilienscout24.de/anbieten/?seg=mieter/">Nachmieter finden</a></li>
<li><a href="https://www.wg-suche.de/wg-zimmer-einstellen/immobilienscout24/" data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten","evt_ga_label":"wg-zimmervermieten"}" target="_blank" rel="nofollow">WG-Zimmer vermieten</a></li>
</ul>
</div>
</div>
<div class="linklist parbase section"><span class="topnavigation__level--2__label">Für Immobilien-Profis</span>
<div class="topnavigation__level--3">
<div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
<h3>Für Immobilien-Profis</h3>
<ul>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten","evt_ga_label":"produktweltfuerprofis"}" target="_self" href="//www.immobilienscout24.de/anbieten/gewerbliche-anbieter/inserieren.html">Produktwelt für Profis </a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten","evt_ga_label":"basis-anzeige"}" target="_self" href="//www.immobilienscout24.de/anbieten/gewerbliche-anbieter/inserieren/basis-anzeige.html">Basis-Anzeige</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="parsys par_4"><div class="linklist parbase section"><span class="topnavigation__level--2__label">Services</span>
<div class="topnavigation__level--3">
<div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
<h3>Services</h3>
<ul>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten","evt_ga_label":"immobilienbewertung"}" target="_self" href="//www.immobilienscout24.de/immobilienbewertung/">Immobilienbewertung</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten","evt_ga_label":"maklerangebotevergleichen"}" target="_self" href="//www.immobilienscout24.de/immobilienmakler/">Maklerangebote vergleichen</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten","evt_ga_label":"immobilien-branchenbuch"}" target="_self" href="//www.immobilienscout24.de/anbieter/">Immobilien-Branchenbuch</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten","evt_ga_label":"mietvertraegevorlagen"}" target="_self" href="//www.immobilienscout24.de/eigentuemer/plus/vorlagen.html">Mietverträge & Vorlagen</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten","evt_ga_label":"nebenkostenabrechnung"}" target="_self" href="//www.immobilienscout24.de/eigentuemer/plus/nebenkostenabrechnung.html">Nebenkostenabrechnung</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten","evt_ga_label":"checklistenfuereigentuemer"}" target="_self" href="//www.immobilienscout24.de/eigentuemer/ratgeber/checklisten.html">Checklisten für Eigentümer</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="parsys par_5"><div class="linklist parbase section"><span class="topnavigation__level--2__label">Ratgeber</span>
<div class="topnavigation__level--3">
<div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
<h3>Ratgeber</h3>
<ul>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten","evt_ga_label":"anzeigengestaltung"}" target="_self" href="//www.immobilienscout24.de/anbieten/private-anbieter/immobilien-inserieren.html">Anzeigengestaltung</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten","evt_ga_label":"newsfuereigentuemer"}" target="_self" href="//www.immobilienscout24.de/eigentuemer/news.html">News für Eigentümer</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten","evt_ga_label":"rechtepflichten"}" target="_self" href="//www.immobilienscout24.de/eigentuemer/ratgeber/rechte-pflichten.html">Rechte & Pflichten</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten","evt_ga_label":"tippsfuervermieter"}" target="_self" href="//www.immobilienscout24.de/eigentuemer/ratgeber/vermietung.html">Tipps für Vermieter</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten","evt_ga_label":"vermarktungmitmakler"}" target="_self" href="//www.immobilienscout24.de/eigentuemer/ratgeber/checklisten/tipps-maklersuche.html">Vermarktung mit Makler</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"anbieten","evt_ga_label":"newstippsfuerprofis"}" target="_self" href="//www.immobilienscout24.de/anbieten/gewerbliche-anbieter/tipps.html">News & Tipps für Profis</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</li>
<li>
<span class="topnavigation__level--1__label topnavigation__hover-tabs__label ">
<!--
-->Finanzieren</span>
<div class="topnavigation__level--2 topnavigation__hover-layer">
<ul class="topnavigation__hover-layer__navigation-wrapper grid-item grid grid-flex grid-fill-rows">
<li class="grid-item">
<div class="parsys par_1"><div class="parbase linkbutton section"><span class="topnavigation__level--2__label">Was kann ich mir leisten?</span>
<div class="topnavigation__level--3">
<div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
<h3>Was kann ich mir leisten?</h3>
<ul>
<li>
<a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"finanzieren"}" target="_self" href="//www.immobilienscout24.de/baufinanzierung/"><button class="button-primary">Beste Zinsen finden </button></a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="parsys par_2"><div class="linklist parbase section"><span class="topnavigation__level--2__label">Immobilie finanzieren</span>
<div class="topnavigation__level--3">
<div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
<h3>Immobilie finanzieren</h3>
<ul>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"finanzieren","evt_ga_label":"baufinanzierungimvergleich"}" target="_self" href="//www.immobilienscout24.de/baufinanzierung/">Baufinanzierung im Vergleich</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"finanzieren","evt_ga_label":"anschlussfinanzierung"}" target="_self" href="//www.immobilienscout24.de/baufinanzierung/ratgeber/anschlussfinanzierung.html">Anschlussfinanzierung</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="parsys par_3"><div class="linklist parbase section"><span class="topnavigation__level--2__label">Rechner</span>
<div class="topnavigation__level--3">
<div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
<h3>Rechner</h3>
<ul>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"finanzieren","evt_ga_label":"finanzierungsrechner"}" target="_self" href="//www.immobilienscout24.de/baufinanzierung/finanzierungsrechner/">Finanzierungsrechner</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"finanzieren","evt_ga_label":"mietenoderkaufen"}" target="_self" href="//www.immobilienscout24.de/baufinanzierung/baufinanzierungsrechner/mieten-kaufen-rechner.html">Mieten oder Kaufen?</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="parsys par_4"><div class="linklist parbase section"><span class="topnavigation__level--2__label">Ratgeber</span>
<div class="topnavigation__level--3">
<div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
<h3>Ratgeber</h3>
<ul>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"finanzieren","evt_ga_label":"tippszurfinanzierung"}" target="_self" href="//www.immobilienscout24.de/baufinanzierung/ratgeber.html">Tipps zur Finanzierung</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"finanzieren","evt_ga_label":"finanzierungsablauf"}" target="_self" href="//www.immobilienscout24.de/baufinanzierung/ratgeber/checklisten-downloads/finanzierungsablauf.html">Finanzierungsablauf</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</li>
<li>
<span class="topnavigation__level--1__label topnavigation__hover-tabs__label ">
<!--
-->Umziehen</span>
<div class="topnavigation__level--2 topnavigation__hover-layer">
<ul class="topnavigation__hover-layer__navigation-wrapper grid-item grid grid-flex grid-fill-rows">
<li class="grid-item">
<div class="parsys par_1"><div class="parbase linkbutton section"><span class="topnavigation__level--2__label">Stressfrei umziehen</span>
<div class="topnavigation__level--3">
<div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
<h3>Stressfrei umziehen</h3>
<ul>
<li>
<a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"umziehen"}" target="_self" href="//www.immobilienscout24.de/umzug/umzugsunternehmen/vergleichen.html"><button class="button-primary">Angebote vergleichen</button></a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="parsys par_2"><div class="linklist parbase section"><span class="topnavigation__level--2__label">Umzug planen</span>
<div class="topnavigation__level--3">
<div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
<h3>Umzug planen</h3>
<ul>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"umziehen","evt_ga_label":"umzugsunternehmenfinden"}" target="_self" href="//www.immobilienscout24.de/umzug/umzugsunternehmen/vergleichen.html">Umzugsunternehmen finden</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"umziehen","evt_ga_label":"transportermieten"}" target="_self" href="//www.immobilienscout24.de/umzugsexpose/transportservice/ausschreibung">Transporter mieten</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="parsys par_3"><div class="linklist parbase section"><span class="topnavigation__level--2__label">Services</span>
<div class="topnavigation__level--3">
<div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
<h3>Services</h3>
<ul>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"umziehen","evt_ga_label":"umzugskostenberechnen"}" target="_self" href="//www.immobilienscout24.de/umzug/umzugskosten.html">Umzugskosten berechnen</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"umziehen","evt_ga_label":"wohnungkuendigen"}" target="_self" href="//www.immobilienscout24.de/umzug/ratgeber/vorlagen/musterbrief-kuendigung.html">Wohnung kündigen</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="parsys par_4"><div class="linklist parbase section"><span class="topnavigation__level--2__label">Ratgeber</span>
<div class="topnavigation__level--3">
<div class="topnavigation__slide--back"><span class="topnavigation__slide--back__trigger">Zurück</span></div>
<h3>Ratgeber</h3>
<ul>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"umziehen","evt_ga_label":"vorlagenchecklisten"}" target="_self" href="//www.immobilienscout24.de/umzug/ratgeber/vorlagen.html">Vorlagen & Checklisten</a></li>
<li><a data-event="evtrack" data-tracking="{"evt_ga_category":"header","evt_ga_action":"umziehen","evt_ga_label":"umzugimueberblick"}" target="_self" href="//www.immobilienscout24.de/umzug/">Umzug im Überblick</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
if (window.IS24 && IS24.core && IS24.core.extensions && IS24.core.extensions.topnavigation) {
IS24.core.extensions.topnavigation.init();
}
});
</script>
<!-- placeholder to fill the grid if no navigation is present -->
<div class="grid-item"></div>
</div>
</header>
CSS and JS Dependencies
The Top Navigation relies on the Core Framework in an arbitrary version, as well as the additional top navigation CSS and JS included in this package.
Note: If you are using the central CMS header, you won't need to include the core-topnavigation resources
as they are already delivered as part of the header snippet.
<link rel="stylesheet" href="//www.static-immobilienscout24.de/fro/core-topnavigation/3.0.20/css/core-topnavigation.min.css" /> <script src="//www.static-immobilienscout24.de/fro/core-topnavigation/3.0.20/js/core-topnavigation.min.js"></script>
Brand Header
The white section of the top navigation, which includes the brand logo and claim, is a variation of the Core Framework's standard white header.
The page-header__content class handles the positioning of the individual content blocks.
You may float these elements to the right where necessary.
<header class="page-header" role="banner">
<div class="content-wrapper">
<div class="page-header__content vertical-center-container float-left">
<a href="index.html" title="ImmobilienScout24" aria-label="ImmobilienScout24" class="page-header__logo vertical-center">
<img src="../../img/logo/immobilienscout24.svg" alt="ImmobilienScout24"
onerror="this.src='../../img/logo/immobilienscout24.png';this.onerror=null;" />
</a>
</div>
<div class="page-header__content vertical-center-container float-right">
<div class="vertical-center">
<!-- account tab goes here -->
</div>
</div>
</div>
</header>
Account Tab
The account tab layout differs from ordinary tabs. Depending on configuration and log-in status, it may show a user image and a user name.
Account Tab Structure
The account tab contains a number of additional DOM elements.
- A user image (
topnavigation__sso-login__user-avatar) - A welcome message to the logged-in user (
topnavigation__sso-login__welcome-message)
Also, the classes sso-login and sso-login__user-name serve as handles for the log-in script.
<div class="topnavigation__overlay--account">
<ul class="topnavigation__hover-tabs topnavigation__sso-login sso-login">
<li>
<a href="#" class="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__overlay--account__hide">
<div class="topnavigation__sso-login__user-avatar" data-cms-qa="is24-login-avatar">
<!-- user image goes here -->
</div><!-- this comment is here to eat up the white space between two inline-block elements
--><span class="topnavigation__sso-login__label-text-wrapper">
<span class="topnavigation__sso-login__welcome-message font-ellipsis">
<span class="sso-login__user-name">
<span class="sso-login__user-name">Anmelden</span>
</span>
</span>
<span class="block">Mein Konto</span>
</span>
</a>
<div class="topnavigation__level--2 topnavigation__hover-layer topnavigation__hover-layer--right-aligned font-s"></div>
</li>
</ul>
</div>
Log-in Status
The account tab 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.
<ul class="topnavigation__hover-tabs topnavigation__sso-login sso-login">
<li>
<a href="#" class="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__overlay--account__hide">
<div class="topnavigation__sso-login__user-avatar" data-cms-qa="is24-login-avatar">
<!-- user image goes here -->
</div><!-- this comment is here to eat up the white space between two inline-block elements
--><span class="topnavigation__sso-login__label-text-wrapper">
<span class="topnavigation__sso-login__welcome-message font-ellipsis">
<span class="sso-login__user-name">
<span class="sso-login__user-name">Anmelden</span>
</span>
</span>
<span class="block">Mein Konto</span>
</span>
</a>
</li>
</ul>
<ul class="topnavigation__hover-tabs topnavigation__sso-login sso-login sso-login--show-avatar">
<li>
<a href="#" class="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__overlay--account__hide">
<div class="topnavigation__sso-login__user-avatar">
<img alt="Placeholder" src="../img/topnavigation/log-in/avatar_placeholder_74x74.png" />
</div><!-- this comment is here to eat up the white space between two inline-block elements
--><span class="topnavigation__sso-login__label-text-wrapper">
<span class="topnavigation__sso-login__welcome-message font-ellipsis">
<span class="sso-login__user-name">Anmelden</span>
</span>
<span class="block">Mein Konto</span>
</span>
</a>
</li>
</ul>
<ul class="topnavigation__hover-tabs topnavigation__sso-login sso-login sso-login--show-avatar sso-login--logged-in">
<li>
<a class="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__overlay--account__hide" href="#">
<div class="topnavigation__sso-login__user-avatar">
<img alt="Herzog Frosch von Unkenberg" src="../img/topnavigation/log-in/frog_80x80.jpg" />
</div><!-- this comment is here to eat up the white space between two inline-block elements
--><span class="topnavigation__sso-login__label-text-wrapper">
<span class="topnavigation__sso-login__welcome-message font-ellipsis">
<span class="sso-login__user-name">
<span class="sso-login__user-name">Herzog Frosch von Unkenberg</span>
</span>
</span>
<span class="topnavigation__notification topnavigation__notification--account-tab-label topnavigation-last-search-notification" style="display: inline-block;">1</span>
<span class="block">Mein Konto</span>
</span>
</a>
</li>
</ul>
<ul class="topnavigation__hover-tabs topnavigation__sso-login sso-login sso-login--show-avatar sso-login--logged-in">
<li class="active">
<a class="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__overlay--account__hide" href="#">
<div class="topnavigation__sso-login__user-avatar">
<img alt="Herzog Frosch von Unkenberg" src="../img/topnavigation/log-in/frog_80x80.jpg" />
</div><!-- this comment is here to eat up the white space between two inline-block elements
--><span class="topnavigation__sso-login__label-text-wrapper">
<span class="topnavigation__sso-login__welcome-message font-ellipsis">
<span class="sso-login__user-name">
<span class="sso-login__user-name">Herzog Frosch von Unkenberg</span>
</span>
</span>
<span class="topnavigation__notification topnavigation__notification--account-tab-label topnavigation-last-search-notification" style="display: inline-block;">1</span>
<span class="block">Mein Konto</span>
</span>
</a>
</li>
</ul>
JavaScript
To initialize the top navigation logic (including the slide-in behavior and support for touch interfaces),
call IS24.core.extensions.topnavigation.init.
Note: If you use the CMS header snippet, this is already taken care of.
if (window.IS24 && IS24.core && IS24.core.extensions && IS24.core.extensions.topnavigation) {
IS24.core.extensions.topnavigation.init();
}