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 may 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 a slide-in navigation, with content links sliding in from the left, and account links sliding in from the right.
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.)
Snippet Implementation
The CMS snippet delivers the complete header markup, along with all the necessary script calls. You do need to make a couple of minor adjustments to the page frame to prepare it for the top navigation, however.
Page Frame
The page wrapper needs a couple of additional classes to make the top navigation work.
<body>
<div class="viewport">
<div class="page-wrapper top-navigation-slide-in-container corporate-powered-by-container">
<!-- header goes here -->
</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.
Full Implementation
These are the in-depth implementation details for the individual top navigation components. If you are getting the header from the CMS, you may skip this section entirely.
Brand Header
The white section of the top navigation including the brand logo and claim is a variation of the
White Header,
with the addition of a page-header--white--composite class,
as well as a few minor markup changes.
<header class="page-header--white page-header--white--composite">
<div class="content-wrapper vertical-center-container">
<a href="index.html" title="ImmobilienScout24" class="page-header__logo vertical-center">
<img src="../../img/logo/immobilienscout24.svg" alt="ImmobilienScout24" />
</a><span class="page-header__brand vertical-center">
Der Marktführer:<br />
Die Nr. 1 rund um Immobilien
</span>
</div>
</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.
Use this button to toggle the log-in status in the top navigation above:
JavaScript
The top navigation needs a bit of JavaScript for the slide-in navigation and the fix-to-top behavior.
if (window.IS24 && IS24.core && IS24.core.topNavigation) {
IS24.core.topNavigation.init();
}
if (window.IS24 && IS24.core && IS24.core.fixElementToViewportTop) {
IS24.core.fixElementToViewportTop.init();
}
Complete Example
This is a complete sample of a top navigation as used in the navigation at the top of this page.
<header class="page-header--white page-header--white--composite">
<div class="content-wrapper vertical-center-container">
<a href="index.html" title="ImmobilienScout24" class="page-header__logo vertical-center">
<img src="../../img/logo/immobilienscout24.svg" alt="ImmobilienScout24" onerror="this.src='../../img/logo/logo.png';this.onerror=null;" />
</a><span class="page-header__brand vertical-center">
Der Marktführer:<br />
Die Nr. 1 rund um Immobilien
</span>
</div>
</header>
<div class="fix-to-top-wrapper fix-to-top-wrapper--top-navigation">
<nav class="top-navigation fix-to-top">
<div class="fix-to-top__skyscraper-spacer">
<div class="content-wrapper clearfix">
<a href="#" class="top-navigation__slide-in-trigger--right"><span class="block">Mein Konto</span></a>
<ul class="top-navigation__level--1 top-navigation__hover-tabs top-navigation__hover-tabs--delayed top-navigation__slide-in--right top-navigation__slide-in--show-level-2 top-navigation__sso-login sso-login">
<li>
<a href="#">
<div class="top-navigation__sso-login__user-avatar"><!-- insert user image here --></div>
</a>
<a class="top-navigation__level--1__label top-navigation__hover-tabs__label inline-block" href="#">
<span class="top-navigation__sso-login__welcome-message font-ellipsis">
<span class="sso-login__user-name"><!-- insert user name here --></span>
</span>
<span class="block">Mein Konto <span class="fa fa-chevron-down font-s palm-hide lap-hide"></span></span>
</a>
<div class="top-navigation__level--2 top-navigation__hover-layer">
<ul class="top-navigation__sso-login__link-list icon-arrow list-spacing">
<li class="border-bottom border-lightblue padding-bottom">
<a href="#" id="link_loginStartLink">Mein Bereich</a>
</li>
</ul>
<ul class="top-navigation__sso-login__link-list icon-arrow list-spacing padding-top-none">
<li>
<a href="#">Merkzettel</a>
</li>
<li>
<a href="#">Gespeicherte Suchen</a>
</li>
<li>
<a href="#">Suchanzeige</a>
</li>
<li>
<a href="#">EigentümerPlus</a>
</li>
<li class="border-bottom border-lightblue padding-bottom">
<a href="#">Persönliches Profil</a>
</li>
</ul>
<ul class="top-navigation__sso-login__link-list--logged-out icon-arrow list-spacing padding-top-none">
<li>
<a href="#" id="link_loginLinkInternal">Anmelden</a>
</li>
<li>
<a href="#" id="link_registerLinkInternal">Neu registrieren</a>
</li>
</ul>
<ul class="top-navigation__sso-login__link-list--logged-in icon-arrow list-spacing padding-top-none">
<li>
<a href="#" id="link_logoutLinkInternal">Abmelden</a>
</li>
</ul>
</div>
</li>
</ul>
<a href="#" class="top-navigation__slide-in-trigger--left"><span class="fa fa-bars"></span></a>
<ul class="top-navigation__level--1 top-navigation__hover-tabs top-navigation__hover-tabs--delayed top-navigation__slide-in--left top-navigation__slide-in--show-level-1">
<li class="active">
<span class="top-navigation__level--1__label top-navigation__hover-tabs__label">Wohnen</span>
<div class="top-navigation__level--2 top-navigation__hover-layer">
<div class="equal-height one-whole">
<div class="top-navigation__level--2__navigation-wrapper equal-height__column three-fourths">
<div class="grid gutter-horizontal-xl gutter-vertical-m">
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Mieten</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Mietwohnungen</a>
</li>
<li>
<a href="#">Häuser mieten</a>
</li>
<li>
<a href="#">Wohnen auf Zeit</a>
</li>
<li>
<a href="#">WGs</a>
</li>
<li>
<a href="#">Seniorenwohnen</a>
</li>
<li>
<a href="#">Grundstücke pachten</a>
</li>
<li>
<a href="#">Garagen/Stellplätze</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Kaufen</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Eigentumswohnungen</a>
</li>
<li>
<a href="#">Häuser kaufen</a>
</li>
<li>
<a href="#">Grundstück kaufen</a>
</li>
<li>
<a href="#">Anlageobjekte</a>
</li>
<li>
<a href="#">Neubauimmobilien</a>
</li>
<li>
<a href="#">Zwangsversteigerungen</a>
</li>
<li>
<a href="#">Auslandsimmobilien</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Bauen</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Fertig- & Massivhaussuche</a>
</li>
<li>
<a href="#">Fertig- & Massivhaus Anbieter</a>
</li>
<li>
<a href="#">Hausbau Kataloge</a>
</li>
<li>
<a href="#">Traumhaussuche</a>
</li>
<li>
<a href="#">Baugebiete</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Suchanzeigen</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Suchanzeige aufgeben</a>
</li>
<li>
<a href="#">In Suchanzeigen stöbern</a>
</li>
</ul>
</div>
</div>
</div>
<div class="top-navigation__level--2__teaser-wrapper equal-height__column one-fourth">
<div class="top-navigation__level--2__teaser">
<div class="padding-vertical-l padding-left-s padding-right-xl">
<h3 class="font-brandorange">NEU: Mehr Angebote mit der Suchanzeige!</h3>
<p class="margin-bottom-xl margin-top-s font-line-l">
Unser Geheimtipp – mit einer Suchanzeige finden Sie auch Immobilien, die noch nicht auf ImmobilienScout24 veröffentlicht wurden.
</p>
<a class="button-primary padding-horizontal-s" href="#">Suchanzeige aufgeben</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<a class="top-navigation__level--1__label top-navigation__hover-tabs__label" href="#">Anbieten</a>
<div class="top-navigation__level--2 top-navigation__hover-layer">
<div class="equal-height one-whole">
<div class="top-navigation__level--2__navigation-wrapper equal-height__column three-fourths">
<div class="grid gutter-horizontal-xl gutter-vertical-m">
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Als privater Anbieter</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Anzeigen schalten</a>
</li>
<li>
<a href="#">Anbieten Tipps</a>
</li>
<li>
<a href="#">Ratgeber</a>
</li>
<li>
<a href="#">Erfolgreicher inserieren</a>
</li>
<li>
<a href="#">Hilfe & Beratung</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Als gewerblicher Anbieter</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Anzeigen schalten</a>
</li>
<li>
<a href="#">Profi-Werkzeuge</a>
</li>
<li>
<a href="#">Erfolgstipps & Hilfe</a>
</li>
<li>
<a href="#">VIA-Produkte</a>
</li>
<li>
<a href="#">Gewerbethemen</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Vermieten</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Nachmieter suchen</a>
</li>
<li>
<a href="#">MietpreisCheck</a>
</li>
<li>
<a href="#">SCHUFA-BonitätsCheck</a>
</li>
<li>
<a href="#">Mietverträge</a>
</li>
<li>
<a href="#">Wohnung inserieren</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Verkaufen</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Immobilienbewertung</a>
</li>
<li>
<a href="#">Energieausweis</a>
</li>
<li>
<a href="#">Grundbuchauszug</a>
</li>
<li>
<a href="#">Haus verkaufen</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Makler finden</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Branchenbuch</a>
</li>
<li>
<a href="#">Maklerprovision</a>
</li>
<li>
<a href="#">Maklersoftware</a>
</li>
</ul>
</div>
</div>
</div>
<div class="top-navigation__level--2__teaser-wrapper equal-height__column one-fourth">
<div class="top-navigation__level--2__teaser">
<div class="padding-vertical-l padding-left-s padding-right-xl">
<h3 class="font-brandorange">Jetzt Anzeige schalten</h3>
<p class="margin-bottom-xl margin-top-s font-line-l">
Schalten Sie einfach in nur 5 Minuten eine Anzeige bei uns und vermieten/verkaufen Sie schnell und zuverlässig.
</p>
<a class="button-primary padding-horizontal-s" href="#">Jetzt anmelden & starten</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<a class="top-navigation__level--1__label top-navigation__hover-tabs__label" href="#">Gewerbe</a>
<div class="top-navigation__level--2 top-navigation__hover-layer">
<div class="equal-height one-whole">
<div class="top-navigation__level--2__navigation-wrapper equal-height__column three-fourths">
<div class="grid gutter-horizontal-xl gutter-vertical-m">
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Büro</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Büroflächen suchen</a>
</li>
<li>
<a href="#">Büroflächenrechner</a>
</li>
<li>
<a href="#">Büro auf Zeit</a>
</li>
<li>
<a href="#">Büromakler</a>
</li>
<li>
<a href="#">Büroinvestment</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Einzelhandel</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Einzelhandelsflächen suchen</a>
</li>
<li>
<a href="#">Einzelhandelsmakler</a>
</li>
<li>
<a href="#">Lage und Standort</a>
</li>
<li>
<a href="#">Einzelhandel für Einsteiger</a>
</li>
<li>
<a href="#">Einzelhandelsinvestment</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Hallenflächen</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Hallenflächen suchen</a>
</li>
<li>
<a href="#">Standortkriterien</a>
</li>
<li>
<a href="#">Halleneinrichtung</a>
</li>
<li>
<a href="#">Hallenmakler</a>
</li>
<li>
<a href="#">Halleninvestment</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Gastronomie</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Gastronomieflächen suchen</a>
</li>
<li>
<a href="#">Gastronomiebedarf</a>
</li>
<li>
<a href="#">Gastronomie für Einsteiger</a>
</li>
<li>
<a href="#">Rechtsthemen Gastronomie</a>
</li>
<li>
<a href="#">Gastronomieinvestment</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Gewerbewissen</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Gewerbe Trends</a>
</li>
<li>
<a href="#">Gewerberecht</a>
</li>
<li>
<a href="#">Existenzgründung</a>
</li>
<li>
<a href="#">Lexikon Gewerbe</a>
</li>
<li>
<a href="#">Marktberichte </a>
</li>
</ul>
</div>
</div>
</div>
<div class="top-navigation__level--2__teaser-wrapper equal-height__column one-fourth">
<div class="top-navigation__level--2__teaser">
<div class="padding-vertical-l padding-left-s padding-right-xl">
<h3 class="font-brandorange">Sie suchen eine Gewerbefläche?</h3>
<p class="margin-bottom-xl margin-top-s font-line-l">
Lassen Sie sich helfen – ImmobilienScout24 hat den passenden Berater!
</p>
<a class="button-primary padding-horizontal-s" href="#">Jetzt finden</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<a class="top-navigation__level--1__label top-navigation__hover-tabs__label" href="#">Markt & Preise</a>
<div class="top-navigation__level--2 top-navigation__hover-layer">
<div class="equal-height one-whole">
<div class="top-navigation__level--2__navigation-wrapper equal-height__column three-fourths">
<div class="grid gutter-horizontal-xl gutter-vertical-m">
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Immobilienpreise</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">für Immobilienkäufer</a>
</li>
<li>
<a href="#">für Eigentümer und Verkäufer</a>
</li>
<li>
<a href="#">für Makler</a>
</li>
<li>
<a href="#">Regionale Immobilienpreise</a>
</li>
<li>
<a href="#">Preisentwicklung IMX</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Produktübersicht</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Immobilienbewertung online</a>
</li>
<li>
<a href="#">Mietpreisrechner</a>
</li>
<li>
<a href="#">MarktNavigator</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Ratgeber</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Checklisten</a>
</li>
<li>
<a href="#">Immobilienverkauf</a>
</li>
<li>
<a href="#">Immobilienkauf</a>
</li>
<li>
<a href="#">Immobilienerbe</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Wertermittlungsverfahren</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Ertragswertverfahren</a>
</li>
<li>
<a href="#">Sachwertverfahren</a>
</li>
<li>
<a href="#">Vergleichswertverfahren</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Lexikon</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Erbschaftssteuer</a>
</li>
<li>
<a href="#">Schenkungssteuer</a>
</li>
<li>
<a href="#">Bodenrichtwert</a>
</li>
<li>
<a href="#">Wohnflächenberechnung</a>
</li>
</ul>
</div>
</div>
</div>
<div class="top-navigation__level--2__teaser-wrapper equal-height__column one-fourth">
<div class="top-navigation__level--2__teaser">
<div class="padding-vertical-l padding-left-s padding-right-xl">
<h3 class="font-brandorange">Immobilienbewertung</h3>
<p class="margin-bottom-xl margin-top-s font-line-l">
Ermitteln Sie einfach online den Marktwert von Immobilien und sparen Sie Zeit und Geld gegenüber teuren Gutachtern.
</p>
<a class="button-primary padding-horizontal-s" href="#">Jetzt Wert ermitteln</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<a class="top-navigation__level--1__label top-navigation__hover-tabs__label" href="#">Baufinanzierung</a>
<div class="top-navigation__level--2 top-navigation__hover-layer">
<div class="equal-height one-whole">
<div class="top-navigation__level--2__navigation-wrapper equal-height__column three-fourths">
<div class="grid gutter-horizontal-xl gutter-vertical-m">
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Zinsvergleich</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Hausfinanzierung ohne EK</a>
</li>
<li>
<a href="#">Anschlussfinanzierung</a>
</li>
<li>
<a href="#">Aktueller Zinskommentar</a>
</li>
<li>
<a href="#">Hypothekenzinsen</a>
</li>
<li>
<a href="#">Das kleine Zins-Einmaleins</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Rechner</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Finanzierungsrechner</a>
</li>
<li>
<a href="#">Tilgungsrechner</a>
</li>
<li>
<a href="#">Darlehensrechner</a>
</li>
<li>
<a href="#">So viel Haus kann ich mir leisten</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Checklisten</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Wohnungskaufvertrag</a>
</li>
<li>
<a href="#">Darlehensvertrag</a>
</li>
<li>
<a href="#">Fragen & Antworten</a>
</li>
<li>
<a href="#">Mieten oder kaufen?</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Kauf vorbereiten</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Darlehensarten</a>
</li>
<li>
<a href="#">Kosten & Nebenkosten</a>
</li>
<li>
<a href="#">KfW-Förderung</a>
</li>
<li>
<a href="#">Bankgespräch</a>
</li>
<li>
<a href="#">Notargebühren</a>
</li>
</ul>
</div>
</div>
</div>
<div class="top-navigation__level--2__teaser-wrapper equal-height__column one-fourth">
<div class="top-navigation__level--2__teaser">
<div class="padding-vertical-l padding-left-s padding-right-xl">
<h3 class="font-brandorange">Der Finanzierungsrechner für Ihren Baukredit</h3>
<p class="margin-bottom-xl margin-top-s font-line-l">
Berechnen Sie, was Ihr Finanzierungsvorhaben monatlich kostet.
</p>
<a class="button-primary padding-horizontal-s" href="#">Jetzt berechnen</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<a class="top-navigation__level--1__label top-navigation__hover-tabs__label" href="#">Umzug</a>
<div class="top-navigation__level--2 top-navigation__hover-layer">
<div class="equal-height one-whole">
<div class="top-navigation__level--2__navigation-wrapper equal-height__column three-fourths">
<div class="grid gutter-horizontal-xl gutter-vertical-m">
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Umzug leicht gemacht</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Umzugsunternehmen vergleichen</a>
</li>
<li>
<a href="#">Transporter mieten</a>
</li>
<li>
<a href="#" target="_blank" rel="nofollow">Umzugskartons bestellen</a>
</li>
<li>
<a href="#">Ummelden</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Umziehen in Eigenregie</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Umzugshelfer organisieren</a>
</li>
<li>
<a href="#">Halteverbotsschild bestellen</a>
</li>
<li>
<a href="#">Privatvermittlung von Fahrzeugen</a>
</li>
<li>
<a href="#">Möbel einlagern</a>
</li>
<li>
<a href="#">Sperrmüll beseitigen</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Umzugsplanung</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Umzugscheckliste</a>
</li>
<li>
<a href="#">SCHUFA-BonitätsCheck</a>
</li>
<li>
<a href="#">Telefon und Internet</a>
</li>
<li>
<a href="#">Stromanbieter</a>
</li>
<li>
<a href="#">Umzugskosten berechnen</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Vorlagen & Muster</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Kündigung der Wohnung</a>
</li>
<li>
<a href="#">Wohnungsübergabeprotokoll</a>
</li>
<li>
<a href="#">Mietminderung</a>
</li>
<li>
<a href="#">Untermietvertrag</a>
</li>
<li>
<a href="#">Fragen & Antworten</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Einrichten & Renovieren</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Wohntyptest</a>
</li>
<li>
<a href="#">Heimwerkertipps</a>
</li>
<li>
<a href="#">Malern</a>
</li>
<li>
<a href="#">Tapezieren</a>
</li>
<li>
<a href="#">Ratgeber</a>
</li>
</ul>
</div>
</div>
</div>
<div class="top-navigation__level--2__teaser-wrapper equal-height__column one-fourth">
<div class="top-navigation__level--2__teaser">
<div class="padding-vertical-l padding-left-s padding-right-xl">
<h3 class="font-brandorange">Ein kompletter Umzug ist günstiger, als Sie denken</h3>
<img class="margin-top-s margin-bottom-m shadow" style="max-width: 100%;" src="../img/top-navigation/layer-teasers/umzug-notizzettel.png" alt="Umzug" />
<a class="button-primary padding-horizontal-s" href="#">Jetzt informieren</a>
<p class="margin-top font-light font-s">* Die Rechnung beruht auf Durchschnittswerten und kann regionalen Schwankungen unterliegen.</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<a class="top-navigation__level--1__label top-navigation__hover-tabs__label" href="#">Eigentümer</a>
<div class="top-navigation__level--2 top-navigation__hover-layer">
<div class="equal-height one-whole">
<div class="top-navigation__level--2__navigation-wrapper equal-height__column three-fourths">
<div class="grid gutter-horizontal-xl gutter-vertical-m">
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Eigentümer werden</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Lage- und Preisinformation</a>
</li>
<li>
<a href="#">Erbschaft: plötzlich Eigentümer</a>
</li>
<li>
<a href="#">Immobile als Kapitalanlage</a>
</li>
<li>
<a href="#">Was kann ich mir leisten?</a>
</li>
<li>
<a href="#">Fördermöglichkeiten</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Vermietung & Verkauf</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Anzeige aufgeben</a>
</li>
<li>
<a href="#">Erfolgreich vermarkten</a>
</li>
<li>
<a href="#">Miethöhe prüfen</a>
</li>
<li>
<a href="#">Immobilienwert ermitteln</a>
</li>
<li>
<a href="#">Makler finden</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Recht & Versicherung</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Gesetzesänderungen & Urteile</a>
</li>
<li>
<a href="#">Musterverträge</a>
</li>
<li>
<a href="#">Rechtsberatung</a>
</li>
<li>
<a href="#">Versicherungen</a>
</li>
<li>
<a href="#">Schäden & Reparaturen</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Energie sparen</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">Energieausweis bestellen</a>
</li>
<li>
<a href="#">Modernisieren & Sanieren</a>
</li>
<li>
<a href="#">ModernisierungsCheck</a>
</li>
<li>
<a href="#">HeizungsCheck</a>
</li>
<li>
<a href="#">FördermittelCheck</a>
</li>
</ul>
</div>
<div class="grid-item top-navigation__level--3">
<h3><a href="#">Meine Immobilienverwaltung</a></h3>
<ul class="list-spacing-xs icon-arrow">
<li>
<a href="#">EigentümerPlus</a>
</li>
<li>
<a href="#">Marktwerteinschätzung</a>
</li>
<li>
<a href="#">Immobiliencheck</a>
</li>
<li>
<a href="#">Grundbuchauszug online</a>
</li>
<li>
<a href="#">HausgeldCheck</a>
</li>
</ul>
</div>
</div>
</div>
<div class="top-navigation__level--2__teaser-wrapper equal-height__column one-fourth">
<div class="top-navigation__level--2__teaser">
<div class="padding-vertical-l padding-left-s padding-right-xl">
<h3 class="font-brandorange">Auf der sicheren Seite!</h3>
<p class="margin-bottom-xl margin-top-s font-line-l">
Mit unseren rechtssicheren Musterverträgen, der kostenfreien Marktwerteinschätzung uvm. können Sie sich entspannt zurücklehnen.
</p>
<a class="button-primary padding-horizontal-s" href="#">Jetzt testen</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul><!-- top-navigation__level- -1 -->
</div><!-- .content-wrapper -->
</div><!-- .fix-to-top__skyscraper-spacer -->
</nav><!-- .top-navigation.fix-to-top -->
</div><!-- .fix-to-top-wrapper.fix-to-top-wrapper-\-top-navigation -->
<script type="text/javascript">
if (window.IS24 && IS24.core && IS24.core.topNavigation) {
IS24.core.topNavigation.init();
}
if (window.IS24 && IS24.core && IS24.core.fixElementToViewportTop) {
IS24.core.fixElementToViewportTop.init();
}
</script>
