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 Bar -->
<div class="random element" style="height:100px;"></div>
<header class="page-header" role="banner">
<div class="palm-top-navigation-wrapper only-lap-and-up-content-wrapper only-lap-and-up-grid only-lap-and-up-grid-flex only-lap-and-up-grid-fill-rows" style="align-items: center"> <!-- only-lap-and-up-content-wrapper only-lap-and-up-grid only-lap-and-up-grid-flex only-lap-and-up-grid-fill-rows -->
<div class="page-header__content page-header__logo-container only-lap-and-up-grid-item only-lap-and-up-grid-align-center only-lap-and-up-grid-item-fixed-width"><!-- only-lap-and-up-grid-item only-lap-and-up-grid-align-center only-lap-and-up-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" class="cosma-hide"
onerror="this.src='../../img/logo/immobilienscout24.png';this.onerror=null;" />
<img src="../../img/logo/immoscout24.svg" alt="ImmobilienScout24" class="core-hide"
onerror="this.src='../../img/logo/immoscout24.png';this.onerror=null;" />
</a>
</div>
<div class="page-header__content palm-notification-center-container notification-center-container topnavigation__hoverOrange palm-topnavigation-move-to-background only-lap-and-up-grid-item only-lap-and-up-grid-item-fixed-width lap-order-two-down desk-order-two-down">
<style type="text/css" data-qa="inlined-app-css">.header-notification-center-bell{display:block;position:relative}.header-notification-center-bell,[data-theme=core] .header-notification-center-bell{padding:3.75px}[data-theme=cosma] .header-notification-center-bell{padding:4.375px}.header-notification-center-bell,[data-theme=core] .header-notification-center-bell{color:#747474}[data-theme=cosma] .header-notification-center-bell{color:#606060}.header-notification-center-bell:hover,[data-theme=core] .header-notification-center-bell:hover{color:#ff7500}[data-theme=cosma] .header-notification-center-bell:hover{color:#333}.header-notification-center-bell__icon,[data-theme=core] .header-notification-center-bell__icon{width:22px}[data-theme=cosma] .header-notification-center-bell__icon{width:28px}.header-notification-center-bell__icon,[data-theme=core] .header-notification-center-bell__icon{height:24px}[data-theme=cosma] .header-notification-center-bell__icon{height:28px}.header-notification-center-bell__icon--core,[data-theme=core] .header-notification-center-bell__icon--core{display:block!important}.header-notification-center-bell__icon--cosma,[data-theme=core] .header-notification-center-bell__icon--cosma,[data-theme=cosma] .header-notification-center-bell__icon--core{display:none!important}[data-theme=cosma] .header-notification-center-bell__icon--cosma{display:block!important}.header-notification-center-bell__icon--highlighted,.header-notification-center-bell__icon:hover,[data-theme=core] .header-notification-center-bell__icon--highlighted,[data-theme=core] .header-notification-center-bell__icon:hover{color:#ff7500!important}[data-theme=cosma] .header-notification-center-bell__icon--highlighted,[data-theme=cosma] .header-notification-center-bell__icon:hover{color:#333!important}.header-notification-center-bell__count{display:block;position:absolute;top:0;right:0;border-radius:50%;border:2px solid #fff;text-align:center;font-weight:700}.header-notification-center-bell__count,[data-theme=core] .header-notification-center-bell__count{width:15px}[data-theme=cosma] .header-notification-center-bell__count{width:17.5px}.header-notification-center-bell__count,[data-theme=core] .header-notification-center-bell__count{height:15px}[data-theme=cosma] .header-notification-center-bell__count{height:17.5px}.header-notification-center-bell__count,[data-theme=core] .header-notification-center-bell__count{background-color:#ff7500}[data-theme=cosma] .header-notification-center-bell__count{background-color:#00ffd0}.header-notification-center-bell__count,[data-theme=core] .header-notification-center-bell__count{line-height:10.45px}[data-theme=cosma] .header-notification-center-bell__count{line-height:12.825px}.header-notification-center-bell__count,[data-theme=core] .header-notification-center-bell__count{font-size:9.9px}[data-theme=cosma] .header-notification-center-bell__count{font-size:12.15px}.header-notification-center-bell__count,[data-theme=core] .header-notification-center-bell__count{color:#fff}[data-theme=cosma] .header-notification-center-bell__count{color:#333}@media (min-width:769px){[data-theme=cosma] .header-notification-center-bell{padding:7px 4.375px 17.8125px!important;margin-top:13px!important;border-bottom:3px solid transparent;color:#606060}[data-theme=cosma] .header-notification-center-bell:hover{border-color:#00ffd0;color:#333!important}}@keyframes header-notification-center-bell-swing{20%{transform:rotate(10deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(15deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}.header-notification-center-bell-swing{transform-origin:top center;-webkit-animation:header-notification-center-bell-swing 1s 2 normal;-o-animation:header-notification-center-bell-swing 1s 2 normal;animation:header-notification-center-bell-swing 1s 2 normal}@keyframes header-notification-center-bell-fadeIn{0%{opacity:0}to{opacity:1}}.header-notification-center-bell-fadeIn{-webkit-animation:header-notification-center-bell-fadeIn .4s 1;-o-animation:header-notification-center-bell-fadeIn .4s 1;animation:header-notification-center-bell-fadeIn .4s 1}.topnavigation__notification-bell-container{display:table-cell;position:relative}@media (max-width:768px){.palm-notification-center-container{position:absolute;width:50px;float:right;top:7px;right:55px}}</style>
<script>
(function () {
var styles = document.getElementById("topnavigation__notification-widget-styles");
styles.removeAttribute("scoped");
document.getElementsByTagName("head")[0].appendChild(styles);
}());
</script>
<div id="header-notification-center-bell-container" class="topnavigation__notification-bell-container"><div><a class="header-notification-center-bell" title="Benachrichtigungen anzeigen" aria-label="Benachrichtigungen anzeigen" href="#" data-qa="notification-center-bell"><svg viewBox="0 0 22 25" xmlns="http://www.w3.org/2000/svg" class=" header-notification-center-bell__icon "><g id="notification-bell/default" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g id="notification-bell" transform="translate(2 1.5)" stroke="currentColor" stroke-width="2"><path d="M12 19c0 1.7-1.3 3-3 3s-3-1.3-3-3" id="notification-bell-shape-1"></path><path d="M16 12V7c0-3.9-3.1-7-7-7S2 3.1 2 7v5c0 4-2 7-2 7h18s-2-3-2-7z" id="notification-bell-shape-2"></path></g></g></svg></a><div class="header-notification-center-overlay "><div class="header-notification-center-overlay-background" data-qa="header-notification-center-overlay-background"></div><aside class="header-notification-center-overlay-panel background" data-qa="header-notification-center-overlay-panel"><header class="header-notification-center-overlay-panel__header padding background-white"><div class="grid grid-flex grid-justify-space-between grid-align-center gutter"><div class="grid-item"><h2 class="font-h6 margin-bottom-none">Benachrichtigungen</h2></div><div class="grid-item order-one-up"><a href="#" data-qa="header-notification-center-overlay-panel-close-button"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="block header-notification-center-overlay-panel__close-button"><g id="ic_menu" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g id="simple-remove" transform="translate(5 5)" stroke="currentColor" stroke-width="2"><path d="M14 0L0 14M14 14L0 0" id="Shape"></path></g></g></svg></a></div><div class="grid-item order-one-down invisible"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="block header-notification-center-overlay-panel__close-button"><g id="ic_settings" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g id="settings-gear-65" transform="translate(1 1)" stroke="currentColor" stroke-width="2"><path d="M22 11a2 2 0 0 0-2-2h-1.262a7.968 7.968 0 0 0-.852-2.058l.892-.892a2 2 0 1 0-2.828-2.828l-.892.892A7.968 7.968 0 0 0 13 3.262V2a2 2 0 0 0-4 0v1.262a7.968 7.968 0 0 0-2.058.852l-.892-.892A2 2 0 1 0 3.222 6.05l.892.892A7.968 7.968 0 0 0 3.262 9H2a2 2 0 0 0 0 4h1.262c.189.732.477 1.422.852 2.058l-.892.892a2 2 0 1 0 2.828 2.828l.892-.892A7.953 7.953 0 0 0 9 18.738V20a2 2 0 0 0 4 0v-1.262a7.968 7.968 0 0 0 2.058-.852l.892.892a2 2 0 1 0 2.828-2.828l-.892-.892A7.953 7.953 0 0 0 18.738 13H20a2 2 0 0 0 2-2z" id="settings-gear-65/Shape"></path><circle id="settings-gear-65/Oval" cx="11" cy="11" r="3"></circle></g></g></svg></div></div></header><div class="header-notification-center-overlay-content-scroll-container"><section class="padding-vertical padding-horizontal" data-qa="header-notification-center-overlay-panel-content"><section class="font-center margin-vertical-s font-line-s" data-qa="header-notification-center-empty-state-teaser"><p class="font-bold"><span class="block">Durchatmen.</span>Es gibt gerade nichts zu tun.</p><svg width="62" height="62" viewBox="0 0 62 62" xmlns="http://www.w3.org/2000/svg" class="block horizontal-center margin-vertical-l"><g id="ic_empty" fill="none" fill-rule="evenodd"><g id="icn/empty" fill="#969696" fill-rule="nonzero"><g id="icn/empty/Group"><path d="M31 0C22.907 0 14.937 3.277 9.214 9 3.492 14.723.143 22.764.143 30.857S3.492 46.92 9.214 52.643c5.723 5.722 13.693 9.071 21.786 9.071 8.093 0 16.063-3.349 21.786-9.071 5.722-5.723 9.071-13.693 9.071-21.786 0-8.093-3.349-16.134-9.071-21.857C47.063 3.277 39.093 0 31 0zm0 2.286c7.466 0 14.935 3.078 20.214 8.357 5.28 5.279 8.357 12.749 8.357 20.214 0 7.466-3.078 14.864-8.357 20.143S38.466 59.429 31 59.429c-7.466 0-14.935-3.15-20.214-8.429-5.28-5.279-8.357-12.677-8.357-20.143 0-7.465 3.078-14.935 8.357-20.214C16.065 5.363 23.534 2.286 31 2.286z" id="icn/empty/Shape/1"></path><path d="M31 11.429c-2.488 0-4.571 2.083-4.571 4.571 0 2.488 2.083 4.571 4.571 4.571 2.488 0 4.571-2.083 4.571-4.571 0-2.488-2.083-4.571-4.571-4.571zm0 2.285c1.102 0 2.286 1.184 2.286 2.286S32.102 18.286 31 18.286 28.714 17.102 28.714 16s1.184-2.286 2.286-2.286z" id="icn/empty/Shape/2"></path><path d="M31 41.143c-2.488 0-4.571 2.083-4.571 4.571 0 2.489 2.083 4.572 4.571 4.572 2.488 0 4.571-2.083 4.571-4.572 0-2.488-2.083-4.571-4.571-4.571zm0 2.286c1.102 0 2.286 1.183 2.286 2.285S32.102 48 31 48s-2.286-1.184-2.286-2.286S29.898 43.43 31 43.43z" id="icn/empty/Shape/3"></path><path d="M31 0v2.286c7.089 0 13.714 6.632 13.714 13.714 0 7.082-6.625 13.709-13.714 13.714V32c8.473 0 16-7.531 16-16C47 7.531 39.473.007 31 0z" id="icn/empty/Shape/4"></path><path d="M31 29.714V32c-7.594 0-13.72 6.127-13.714 13.714.006 7.579 6.128 13.709 13.714 13.715v2.285c-8.819 0-15.993-7.186-16-16-.007-8.823 7.171-15.993 16-16z" id="icn/empty/Shape/5"></path></g></g></g></svg><p>Sobald es etwas Neues gibt, werden wir Sie benachrichtigen.</p></section></section></div></aside></div></div></div>
<script>
window.IS24 = window.IS24 || {};
window.IS24.headerNotificationWidget = {
notificationCenterAPIOrigin: "https://notification-center.recommendation.immobilienscout24.de",
lastSearchControllerURL: "https://www.immobilienscout24.de/Suche/controller/lastSearch",
ssoLoginPage: "https://sso.immobilienscout24.de/sso/login"
};
</script>
<script type="text/javascript" defer="" src="https://notification-center.recommendation.immobilienscout24.de/widget/stable/js/is24-header-notification-widget.js"></script>
</div>
<div class="page-header__content palm-user-tab only-lap-and-up-grid-item only-lap-and-up-grid-align-center only-lap-and-up-grid-item-fixed-width only-lap-and-up-grid-justify-end only-lap-and-up-order-two-down"> <!-- only-lap-and-up-grid-item only-lap-and-up-grid-align-center only-lap-and-up-grid-item-fixed-width only-lap-and-up-grid-justify-end only-lap-and-up-order-two-down --->
<a href="#overlaytrigger" class="topnavigation__overlay-trigger--account vertical-center-container">
<div class="topnavigation__sso-login__user-avatar">
<svg class="topnavigation__account--placeholder-svg topnavigation__account--placeholder-svg-cosma" width="22px" height="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23">
<path fill="currentColor" fill-rule="evenodd" d="M15.4 11.6c1.333-1.2 2.267-2.933 2.267-4.933C17.667 2.933 14.733 0 11 0 7.267 0 4.333 2.933 4.333 6.667c0 2 .934 3.733 2.267 4.933C2.867 13.333.333 17.067.333 21.333c0 .8.534 1.334 1.334 1.334S3 22.133 3 21.333c0-4.4 3.6-8 8-8s8 3.6 8 8c0 .8.533 1.334 1.333 1.334.8 0 1.334-.534 1.334-1.334 0-4.266-2.534-8-6.267-9.733zM7 6.667c0-2.267 1.733-4 4-4s4 1.733 4 4c0 2.266-1.733 4-4 4s-4-1.734-4-4z"/>
</svg>
<svg class="topnavigation__account--placeholder-svg topnavigation__account--placeholder-svg-core" width="22px" height="24px" viewBox="0 0 22 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Main-Mobile-Nav/left-logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-270.000000, -13.000000)" stroke-linecap="round" stroke-linejoin="round">
<g id="Main-Mobile-Nav" stroke="#969696">
<g id="User-Avatar-/-new1-/-off" transform="translate(269.000000, 13.000000)">
<g id="single-01" transform="translate(2.000000, 1.000000)">
<path d="M10,11 C7.239,11 5,8.761 5,6 L5,5 C5,2.239 7.239,0 10,0 C12.761,0 15,2.239 15,5 L15,6 C15,8.761 12.761,11 10,11 Z" id="Shape" stroke-width="2"></path>
<path d="M20,19.908 C20,18.108 18.803,16.525 17.066,16.052 C15.172,15.535 12.586,15 10,15 C7.414,15 4.828,15.535 2.934,16.052 C1.197,16.525 0,18.108 0,19.908 L0,22 L20,22 L20,19.908 Z" id="Shape" stroke-width="2"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<span class="topnavigation__notification topnavigation__notification--account-overlay-trigger topnavigation-last-search-notification">
1
</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">
<li>
<a class="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__overlay--account__hide" href="#dummycredentials">
<div class="topnavigation__sso-login__user-avatar">
<svg class="topnavigation__account--placeholder-svg topnavigation__account--placeholder-svg-cosma" width="22px" height="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23">
<path fill="currentColor" fill-rule="evenodd" d="M15.4 11.6c1.333-1.2 2.267-2.933 2.267-4.933C17.667 2.933 14.733 0 11 0 7.267 0 4.333 2.933 4.333 6.667c0 2 .934 3.733 2.267 4.933C2.867 13.333.333 17.067.333 21.333c0 .8.534 1.334 1.334 1.334S3 22.133 3 21.333c0-4.4 3.6-8 8-8s8 3.6 8 8c0 .8.533 1.334 1.333 1.334.8 0 1.334-.534 1.334-1.334 0-4.266-2.534-8-6.267-9.733zM7 6.667c0-2.267 1.733-4 4-4s4 1.733 4 4c0 2.266-1.733 4-4 4s-4-1.734-4-4z"/>
</svg>
<svg class="topnavigation__account--placeholder-svg topnavigation__account--placeholder-svg-core" width="22px" height="24px" viewBox="0 0 22 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Main-Mobile-Nav/left-logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-270.000000, -13.000000)" stroke-linecap="round" stroke-linejoin="round">
<g id="Main-Mobile-Nav" stroke="#969696">
<g id="User-Avatar-/-new1-/-off" transform="translate(269.000000, 13.000000)">
<g id="single-01" transform="translate(2.000000, 1.000000)">
<path d="M10,11 C7.239,11 5,8.761 5,6 L5,5 C5,2.239 7.239,0 10,0 C12.761,0 15,2.239 15,5 L15,6 C15,8.761 12.761,11 10,11 Z" id="Shape" stroke-width="2"></path>
<path d="M20,19.908 C20,18.108 18.803,16.525 17.066,16.052 C15.172,15.535 12.586,15 10,15 C7.414,15 4.828,15.535 2.934,16.052 C1.197,16.525 0,18.108 0,19.908 L0,22 L20,22 L20,19.908 Z" id="Shape" stroke-width="2"></path>
</g>
</g>
</g>
</g>
</svg>
</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="topnavigation__notification topnavigation__notification--account-tab-label topnavigation-last-search-notification">1</span>
<span class="block topnavigation__chevronAppend--desktop ">Mein Konto</span>
</span>
<span class="desk-hide palm-hide topnavigation__notification topnavigation__notification--account-tab-label topnavigation-last-search-notification">1</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-l align-center">
Persönliche Services nutzen und schneller ans Ziel kommen.
<script type="text/javascript">
document.write('<a href="https://www.sandbox-immobilienscout24.de/sso/login.go?source=meinkontodropdown-login&returnUrl=' + document.location.href + '"' +
' class="margin-vertical-s button-primary one-whole" id="link_loginLinkInternal">Jetzt anmelden</a>')
</script>
Neu hier?
<a href="#" class="sso-login-link link-underline">Jetzt registrieren</a>
</li>
</ul>
<ul class="topnavigation__sso-login__link-list list-spacing">
<li>
<a href="?uebersicht" class="topnavigation-overlay-touch-area"><span>Übersicht</span></a>
</li>
<li>
<a href="?Merkzettel" class="topnavigation-overlay-touch-area"><span>Merkzettel</span></a>
</li>
<li>
<a href="?Suchen" class="topnavigation-overlay-touch-area"><span>Gespeicherte Suchen</span></a>
</li>
<li>
<a href="?Profil" class="topnavigation-overlay-touch-area"><span>Persönliches Profil</span></a>
</li>
<li>
<a href="?Immobilienanzeigen" class="topnavigation-overlay-touch-area"><span>Immobilienanzeigen</span></a>
</li>
<li>
<a href="?eigentuemer" class="topnavigation-overlay-touch-area"><span>EigentümerPlus</span></a>
</li>
</ul>
<ul class="topnavigation__sso-login__link-list--logged-in list-spacing padding-top-none border-top" data-cms-qa="is24-cms-loginbox-logged-in">
<li class="padding-top-l align-center">
<a href="https://sso.sandbox-immobilienscout24.de/sso/logout" class="sso-login-link link-underline">Abmelden</a>
</li>
</ul>
</div>
</div>
</li>
</ul><!-- .topnavigation__sso-login -->
</div>
</div>
<div class="page-header__content only-lap-and-up-grid-item only-lap-and-up-grid-align-center only-lap-and-up-grid-item-fixed-width only-lap-and-up-grid-justify-end only-lap-and-up-order-one-down"> <!-- only-lap-and-up-grid-item only-lap-and-up-grid-align-center only-lap-and-up-grid-item-fixed-width only-lap-and-up-grid-justify-end only-lap-and-up-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>
<!-- Navigation for the header --->
<nav class="topnavigation grid-item topnavigation__notification--present" role="navigation">
<div class="topnavigation__menu" data-cms-qa="is24-cms-page-nav_level1">
<div class="topnavigation__scroll_navigation">
<div class="topnavigation__headlines_filter">
</div>
<div comment="NavigationsBar" class="topnavigation__headlines align-left">
<div class="topnavigation__headlines_inner">
<!--Insert unique ID-->
<label class="topnavigation-js-label" for="NavLayer0-Menu" id="NavLayer1-Menu-Layer">
<div class="topnavigation__chevronAppend topnavigation__chevronAppend--desktop">
Suchen
</div>
</label>
<!--Insert unique ID-->
<label class="topnavigation-js-label" for="NavLayer1-Menu" id="NavLayer2-Menu-Layer">
<div class="topnavigation__chevronAppend topnavigation__chevronAppend--desktop">
Verkaufen
</div>
</label>
<!--Insert unique ID-->
<label class="topnavigation-js-label" for="NavLayer2-Menu" id="NavLayer3-Menu-Layer">
<div class="topnavigation__chevronAppend topnavigation__chevronAppend--desktop">
Vermieten
</div>
</label>
<!--Insert unique ID-->
<label class="topnavigation-js-label" for="NavLayer3-Menu" id="NavLayer4-Menu-Layer">
<div class="topnavigation__chevronAppend topnavigation__chevronAppend--desktop">
Finanzieren
</div>
</label>
<label class="topnavigation-js-label" for="NavLayer4-Menu" id="NavLayer5-Menu-Layer">
<div class="topnavigation__chevronAppend topnavigation__chevronAppend--desktop">
Umziehen
</div>
</label>
</div>
</div>
<div class="topnavigation__headlines__bottomline lap-hide desk-hide absolute-content border-bottom one-whole"></div>
</div>
<!-- Generate Template | set unique ID -->
<div id="topnavigation__mobileclosebtn" class="topnavigation__closebtnmobile">
<label for="closeNavbar"><span id="topnavigation__mobileclosebtn_action" >
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Main-Mobile-Nav/center-logo-close" stroke="none" stroke-width="1" fill="none"
fill-rule="evenodd" transform="translate(-20.000000, -19.000000)">
<g id="Main-Mobile-Nav" fill="#969696">
<g id="icn/menu" transform="translate(15.000000, 14.000000)">
<g id="ic_close_24px" transform="translate(5.000000, 5.000000)">
<polygon id="Shape" fill-rule="nonzero"
points="14 1.41 12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7"></polygon>
</g>
</g>
</g>
</g>
</svg>
</span></label></div>
<div class="topnavigation__desktopflyout">
</div>
</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 palm-hide "></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/4.5.1/css/core-topnavigation.min.css" /> <script src="//www.static-immobilienscout24.de/fro/core-topnavigation/4.5.1/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" class="cosma-hide"
onerror="this.src='../../img/logo/immobilienscout24.png';this.onerror=null;" />
<img src="../../img/logo/immoscout24.svg" alt="ImmobilienScout24" class="core-hide"
onerror="this.src='../../img/logo/immoscout24.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 topnavigation__chevronAppend--desktop">Mein Konto</span>
</span>
</a>
<div class="topnavigation__level--2 topnavigation__hover-layer topnavigation__hover-layer--right-aligned font-s"></div>
</li>
</ul>
</div>
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();
}