## Einführung
Um die Anatomie des Telekom Headers zu versthen ist es wichtig zu wissen,
dass den Telekom Header nicht als "eine Komponente" gibt.<br>
Er besteht aus mehreren Einzel-Komponenten die verschiedene Zustände haben können.
### Übersicht
Der gesamte Header besteht im groben aus zwei Komponenten. Einer `.brandbar` mit Brand Logo und Brand Claim,
sowie einer `.navbar` in der sich eine Haupt-Navigation und sowie eine Icon-Navigation befinden.
Umgeben wird der header vom HTML5-Tag `<header class="brand-header"></header>`
der die beiden Komponenten zusammenschließt.
Das Haupt-Menü wiederum ist selbst eine eigenständige Komponente. Sie bringt die notwendige Funktionalität
für die Navigation auf Desktop oder Mobile mit sich und stellt daher die wichtigste Komponente im Header dar.
</div>
</div>
<div class="tc-example tc-example-block" lang="en">
<header class="brand-header">
<div class="brandbar">
<div class="container-fixed">
<div class="brand-logo">
<img src="images/deutsche-telekom-logo.svg" alt="Telekom Logo">
<span class="sr-only">Telekom Logo</span>
</div>
<div class="brand-claim">
<img src="images/brand-claim.svg" alt="Brand Claim">
<span class="sr-only">Brand Claim</span>
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fixed">
<div class="navbar-expanded">
<div class="brandnavhead" data-spy="brandnav" data-target="#MainMenuExample1">
<button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenuExample1">
<span class="sr-only">Back</span>
<span class="icon icon-navigation-left"></span>
</button>
<button type="button" class="btn btn-clean navbar-btn navbar-right" data-cancel="brandnav" data-target="#MainMenuExample1">
<span class="sr-only">Close Navigation</span>
<span class="icon icon-cancel"></span>
</button>
<label class="navbar-header-label brandnav-label">Home</label>
</div>
<div class="brandnav brandnav-lvl-1" id="MainMenuExample1">
<ul class="nav">
<li><a href="#">Shop</a></li>
<li class="active"><a href="#">Meine Telekom</a></li>
<li><a href="#">Hilfe</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
</div>
<div class="navbar-persistent">
<button type="button" class="btn btn-clean navbar-btn navbar-toggle" data-open="brandnav" data-target="#MainMenuExample1">
<span class="sr-only">Open Navigation</span>
<span class="icon icon-list-view"></span>
</button>
<ul class="nav navbar-nav navbar-nav-icons navbar-right">
<li><a href="#"><span class="sr-only">Search</span><span class="icon icon-search"></span></a></li>
<li><a href="#"><span class="sr-only">Shoppingcart</span><span class="icon icon-shopping-cart"></span></a></li>
<li><a href="#"><span class="sr-only">My Profile</span><span class="icon icon-my-profile"></span></a></li>
</ul>
</div>
</div>
</nav>
</header>
</div>
```html
<header class="brand-header">
<div class="brandbar">
<div class="container-fixed">
<div class="brand-logo">
<img src="images/deutsche-telekom-logo.svg" alt="Telekom Logo">
<span class="sr-only">Telekom Logo</span>
</div>
<div class="brand-claim">
<img src="images/brand-claim.svg" alt="Brand Claim">
<span class="sr-only">Brand Claim</span>
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fixed">
<div class="navbar-expanded">
<div class="brandnavhead" data-spy="brandnav" data-target="#MainMenu">
<button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenu">
<span class="sr-only">Back</span>
<span class="icon icon-navigation-left"></span>
</button>
<button type="button" class="btn btn-clean navbar-btn navbar-right" data-cancel="brandnav" data-target="#MainMenu">
<span class="sr-only">Close Navigation</span>
<span class="icon icon-cancel"></span>
</button>
<label class="navbar-header-label brandnav-label">Home</label>
</div>
<div class="brandnav brandnav-lvl-1" id="MainMenu">
<ul class="nav">
<li><a href="#">Shop</a></li>
<li class="active"><a href="#">Meine Telekom</a></li>
<li><a href="#">Hilfe</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
</div>
<div class="navbar-persistent">
<button type="button" class="btn btn-clean navbar-btn navbar-toggle" data-open="brandnav" data-target="#MainMenu">
<span class="sr-only">Open Navigation</span>
<span class="icon icon-list-view"></span>
</button>
<ul class="nav navbar-nav navbar-nav-icons navbar-right">
<li><a href="#"><span class="sr-only">Search</span><span class="icon icon-search"></span></a></li>
<li><a href="#"><span class="sr-only">Shoppingcart</span><span class="icon icon-shopping-cart"></span></a></li>
<li><a href="#"><span class="sr-only">My Profile</span><span class="icon icon-my-profile"></span></a></li>
</ul>
</div>
</div>
</nav>
</header>
```
<hr class="offset-top-8"/>
<div class="main">
<div class="container-fixed">
<h3>Minimiert</h3>
<p>
Es gibt die Möglichkeit die `.brandbar` und damit den gesamten Header zu minimieren.
Dazu wird an die `.brandbar` die CSS-Klasse `.brandbar-minimized` angefügt.
</p>
</div>
</div>
<div class="tc-example tc-example-block" lang="en">
<header class="brand-header">
<div class="brandbar brandbar-minimized"></div>
<nav class="navbar navbar-default">
<div class="container-fixed">
<div class="navbar-expanded">
<div class="brandnavhead" data-spy="brandnav" data-target="#MainMenuExample2">
<button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenuExample2">
<span class="sr-only">Back</span>
<span class="icon icon-navigation-left"></span>
</button>
<button type="button" class="btn btn-clean navbar-btn navbar-right" data-cancel="brandnav" data-target="#MainMenuExample2">
<span class="sr-only">Close Navigation</span>
<span class="icon icon-cancel"></span>
</button>
<label class="navbar-header-label brandnav-label">Home</label>
</div>
<div class="brandnav brandnav-lvl-1" id="MainMenuExample2">
<ul class="nav">
<li><a href="#">Shop</a></li>
<li><a href="#">Meine Telekom</a></li>
<li><a href="#">Hilfe</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
</div>
<div class="navbar-persistent">
<button type="button" class="btn btn-clean navbar-btn navbar-toggle" data-open="brandnav" data-target="#MainMenuExample2">
<span class="sr-only">Open Navigation</span>
<span class="icon icon-list-view"></span>
</button>
<ul class="nav navbar-nav navbar-nav-icons navbar-right">
<li><a href="#"><span class="sr-only">Search</span><span class="icon icon-search"></span></a></li>
<li><a href="#"><span class="sr-only">Shoppingcart</span><span class="icon icon-shopping-cart"></span></a></li>
<li><a href="#"><span class="sr-only">My Profile</span><span class="icon icon-my-profile"></span></a></li>
</ul>
</div>
</div>
</nav>
</header>
</div>
```html
<header class="brand-header">
<div class="brandbar brandbar-minimized"></div>
<nav class="navbar navbar-default">
...
</nav>
</header>
```
<hr class="offset-top-8"/>
<div class="main">
<div class="container-fixed">
<h3>Sprachauswahl</h3>
<p>
Eine Select Box für die Sprache kann hinzugefügt werden, indem eine Auswahlbox
den Icons hinzugefügt wird:
</p>
</div>
</div>
<div class="tc-example tc-example-block" lang="en">
<header class="brand-header">
<div class="brandbar">
<div class="container-fixed">
<div class="brand-logo">
<img src="images/deutsche-telekom-logo.svg" alt="Telekom Logo">
<span class="sr-only">Telekom Logo</span>
</div>
<div class="brand-claim">
<img src="images/brand-claim.svg" alt="Brand Claim">
<span class="sr-only">Brand Claim</span>
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fixed">
<div class="navbar-expanded">
<div class="brandnavhead" data-spy="brandnav" data-target="#MainMenuExample3">
<button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenuExample3">
<span class="sr-only">Back</span>
<span class="icon icon-navigation-left"></span>
</button>
<button type="button" class="btn btn-clean navbar-btn navbar-right" data-cancel="brandnav" data-target="#MainMenuExample3">
<span class="sr-only">Close Navigation</span>
<span class="icon icon-cancel"></span>
</button>
<label class="navbar-header-label brandnav-label">Home</label>
</div>
<div class="brandnav brandnav-lvl-1" id="MainMenuExample3">
<ul class="nav">
<li><a href="#">Shop</a></li>
<li><a href="#">Meine Telekom</a></li>
<li><a href="#">Hilfe</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
</div>
<div class="navbar-persistent">
<button type="button" class="btn btn-clean navbar-btn navbar-toggle" data-open="brandnav" data-target="#MainMenuExample3">
<span class="sr-only">Open Navigation</span>
<span class="icon icon-list-view"></span>
</button>
<ul class="nav navbar-nav navbar-nav-icons navbar-right">
<li><a href="#"><span class="sr-only">Search</span><span class="icon icon-search"></span></a></li>
<li><a href="#"><span class="sr-only">Shoppingcart</span><span class="icon icon-shopping-cart"></span></a></li>
<li><a href="#"><span class="sr-only">My Profile</span><span class="icon icon-my-profile"></span></a></li>
<li>
<select class="form-select" title="Language">
<option value="de">DE</option>
<option value="en">EN</option>
</select>
</li>
</ul>
</div>
</div>
</nav>
</header>
</div>
```html
<li>
<select class="form-select" title="Language">
<option value="de">DE</option>
<option value="en">EN</option>
</select>
</li>
```
<hr class="offset-top-8"/>
<div class="main">
<div class="container-fixed">
<h3>Portal</h3>
<p>
Der Portalname kann als Element mit der CSS-Klasse `.navbar-portalname` der `.navbar-expanded` zugefügt werden.
Somit ist er bis zur Mobile-Variante sichtbar.
</p>
</div>
</div>
<div class="tc-example tc-example-block" lang="en">
<header class="brand-header">
<div class="brandbar">
<div class="container-fixed">
<div class="brand-logo">
<img src="images/deutsche-telekom-logo.svg" alt="Telekom Logo">
<span class="sr-only">Telekom Logo</span>
</div>
<div class="brand-claim">
<img src="images/brand-claim.svg" alt="Brand Claim">
<span class="sr-only">Brand Claim</span>
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fixed">
<div class="navbar-expanded">
<div class="navbar-portalname">
Brand Design Net
</div>
<div class="brandnavhead" data-spy="brandnav" data-target="#MainMenuExample4">
<button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenuExample4">
<span class="sr-only">Back</span>
<span class="icon icon-navigation-left"></span>
</button>
<button type="button" class="btn btn-clean navbar-btn navbar-right" data-cancel="brandnav" data-target="#MainMenuExample4">
<span class="sr-only">Close Navigation</span>
<span class="icon icon-cancel"></span>
</button>
<label class="navbar-header-label brandnav-label">Home</label>
</div>
<div class="brandnav brandnav-lvl-1" id="MainMenuExample4">
<ul class="nav">
<li><a href="#">Shop</a></li>
<li><a href="#">Meine Telekom</a></li>
<li><a href="#">Hilfe</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
</div>
<div class="navbar-persistent">
<button type="button" class="btn btn-clean navbar-btn navbar-toggle" data-open="brandnav" data-target="#MainMenuExample4">
<span class="sr-only">Open Navigation</span>
<span class="icon icon-list-view"></span>
</button>
<ul class="nav navbar-nav navbar-nav-icons navbar-right">
<li><a href="#"><span class="sr-only">Search</span><span class="icon icon-search"></span></a></li>
<li><a href="#"><span class="sr-only">Shoppingcart</span><span class="icon icon-shopping-cart"></span></a></li>
<li><a href="#"><span class="sr-only">My Profile</span><span class="icon icon-my-profile"></span></a></li>
</ul>
</div>
</div>
</nav>
</header>
</div>
```html
<div class="navbar-portalname">
Brand Design Net
</div>
```
<hr class="offset-top-8"/>
<div class="main">
<div class="container-fixed">
<h3>Suche</h3>
<p>
Die Suche ist ebenfalls eine eigenständige Komponente.
Im Falle des Headers wird sie in das Listen-Element des Such-Buttons integriert.
</p>
<p>
Dabei löst das Drücken des Such-Icons das Öffnen des Such-Feldes aus.
Die Verknüpfung wird dabei über das ID-Attribut des HTML-Elements hergestellt.<br>
`<a href="#tc-search" data-toggle="search" aria-controls="tc-search">`
<p>
<p>
Da es sich selbst bei einem einfachen Suchfeld bereits um ein Formular im Sinne von HTML handelt
muss die komplette Such-Funktionalität in einem `<form>`-Element liegen.
Das eigentliche Suchfeld liegt dabei in einem `.input-group`-Container der mit Icons ausgestattet ist.
Dieser wiederum liegt in einem `.search-form-set` in dem sich dann auch die `.search-results` befinden.
</p>
<p>
<strong>Anzeigen der Suchergebnisse</strong><br>
Die `.search-results` können aktiviert werden indem dem `.search-form-set`-Container
die CSS-Klasse `.has-results` zugefügt wird.
</p>
</div>
</div>
<div class="tc-example tc-example-block" lang="en">
<header class="brand-header">
<div class="brandbar">
<div class="container-fixed">
<div class="brand-logo">
<img src="images/deutsche-telekom-logo.svg" alt="Telekom Logo">
<span class="sr-only">Telekom Logo</span>
</div>
<div class="brand-claim">
<img src="images/brand-claim.svg" alt="Brand Claim">
<span class="sr-only">Brand Claim</span>
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fixed">
<div class="navbar-expanded">
<div class="navbar-portalname">
Brand Design Net
</div>
<div class="brandnavhead" data-spy="brandnav" data-target="#MainMenuExample5">
<button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenuExample5">
<span class="sr-only">Back</span>
<span class="icon icon-navigation-left"></span>
</button>
<button type="button" class="btn btn-clean navbar-btn navbar-right" data-cancel="brandnav" data-target="#MainMenuExample5">
<span class="sr-only">Close Navigation</span>
<span class="icon icon-cancel"></span>
</button>
<label class="navbar-header-label brandnav-label">Home</label>
</div>
<div class="brandnav brandnav-lvl-1" id="MainMenuExample5">
<ul class="nav">
<li><a href="#">Shop</a></li>
<li><a href="#">Meine Telekom</a></li>
<li><a href="#">Hilfe</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
</div>
<div class="navbar-persistent">
<button type="button" class="btn btn-clean navbar-btn navbar-toggle" data-open="brandnav" data-target="#MainMenuExample5">
<span class="sr-only">Open Navigation</span>
<span class="icon icon-list-view"></span>
</button>
<ul class="nav navbar-nav navbar-nav-icons navbar-right">
<li class="navbar-search-item navbar-search-item-regular">
<a href="#tc-search" data-toggle="search" aria-controls="tc-search">
<span class="sr-only">Search</span>
<span class="icon icon-search"></span>
</a>
<div id="tc-search" class="navbar-search search slide">
<form class="navbar-form" autocomplete="off">
<div class="search-form-set">
<span class="sr-only">Globale Suche</span>
<div class="input-group has-icon">
<button type="button" class="cancel" data-toggle="search" data-target="#tc-search" aria-controls="tc-search" aria-label="Cancel">
<span class="icon icon-cancel" aria-hidden="true"></span>
</button>
<span class="icon icon-search form-icon" aria-hidden="true"></span>
<label class="sr-only" for="q">Suchbegriff</label>
<input type="text" name="q" id="q" class="form-input" placeholder="Was suchen Sie?" tabindex="3"/>
<button type="submit" class="sr-only">Suchen</button>
</div>
<div class="search-results">
<ul>
<li><strong>Samsung Galaxy S</strong>5</li>
<li><strong>Samsung Galaxy S</strong>6</li>
<li><strong>Samsung Galaxy S</strong>6 edge</li>
<li>Hilfe zu <strong>Samsung Galaxy</strong></li>
<li>Lieferstatus</li>
<li>Kartenaktivierung</li>
</ul>
</div>
</div>
</form>
</div>
</li>
<li><a href="#"><span class="sr-only">Shoppingcart</span><span class="icon icon-shopping-cart"></span></a></li>
<li><a href="#"><span class="sr-only">My Profile</span><span class="icon icon-my-profile"></span></a></li>
</ul>
</div>
</div>
</nav>
</header>
</div>
```html
<li class="navbar-search-item navbar-search-item-regular">
<a href="#tc-search" data-toggle="search" aria-controls="tc-search">
<span class="sr-only">Search</span>
<span class="icon icon-search"></span>
</a>
<div id="tc-search" class="navbar-search search slide">
<form class="navbar-form" autocomplete="off">
<div class="search-form-set">
<span class="sr-only">Globale Suche</span>
<div class="input-group has-icon">
<button type="button" class="cancel" data-toggle="search" data-target="#tc-search" aria-controls="tc-search" aria-label="Cancel">
<span class="icon icon-cancel" aria-hidden="true"></span>
</button>
<span class="icon icon-search form-icon" aria-hidden="true"></span>
<label class="sr-only" for="q">Suchbegriff</label>
<input type="text" name="q" id="q" class="form-input" placeholder="Was suchen Sie?" tabindex="3"/>
<button type="submit" class="sr-only">Suchen</button>
</div>
<div class="search-results">
<ul>
<li><strong>Samsung Galaxy S</strong>5</li>
<li><strong>Samsung Galaxy S</strong>6</li>
<li><strong>Samsung Galaxy S</strong>6 edge</li>
<li>Hilfe zu <strong>Samsung Galaxy</strong></li>
<li>Lieferstatus</li>
<li>Kartenaktivierung</li>
</ul>
</div>
</div>
</form>
</div>
</li>
```
<hr class="offset-top-8"/>
<div class="main">
<div class="container-fixed">
<h3>Navigation</h3>
<p>
Die Navigation gibt es in den Formaten Mobile, Tablet und Desktop.
Anhand der Viewports wird das Menü entsprechend dargestellt.
Das Anzeigen der Navigation ist durch ein JavaScript-Plugin realisiert.
</p>
<p>
Der Navigations-Baum besteht aus drei Ebenen und ist durch `<ul>`-Listen realisiert.
Die CSS-Klasse `.brandnav` liegt dabei auf jeder ebene und stellt die Basis für die Darstellung.
Jedes Level im Navigations-Baum hat zusätzlich seine eigene CSS-Klasse `brandnav-lvl-{1,2,3}`
und etwas eigenes Markup.
</p>
<p>
<strong>Level 1</strong><br>
Das erste Level der Navigation benötigt ein ID-Attribut und die CSS-Klasse `.brandnav-lvl-1`.
Über diesen Knoten läuft die ganze Kommunikation des JavaScript-Plugins.
</p>
<p>
<strong>Level 2</strong><br>
benötigt die CSS-Klasse `.brandnav-lvl-2` und zusätzliches Markup
über das die Schließen-Funktion in der Desktop-Variante gesteuert werden kann.
{% highlight html %}
<div class="brandnav-lvl-2-head">
<button type="button" class="cancel" data-close="brandnav" data-target="#MainMenuExample6">
<span class="icon icon-cancel" aria-hidden="true"></span>
</button>
</div>{% endhighlight %}
</p>
<p>
<strong>Level 3</strong><br>
benötigt lediglich die CSS-Klasse `.brandnav-lvl-3`.
</p>
</div>
</div>
<div class="tc-example tc-example-block" lang="en">
<header class="brand-header">
<div class="brandbar">
<div class="container-fixed">
<div class="brand-logo">
<img src="images/deutsche-telekom-logo.svg" alt="Telekom Logo">
<span class="sr-only">Telekom Logo</span>
</div>
<div class="brand-claim">
<img src="images/brand-claim.svg" alt="Brand Claim">
<span class="sr-only">Brand Claim</span>
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fixed">
<div class="navbar-expanded">
<div class="brandnavhead" data-spy="brandnav" data-target="#MainMenuExample6">
<button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenuExample6">
<span class="sr-only">Back</span>
<span class="icon icon-navigation-left"></span>
</button>
<button type="button" class="btn btn-clean navbar-btn navbar-right" data-cancel="brandnav" data-target="#MainMenuExample6">
<span class="sr-only">Close Navigation</span>
<span class="icon icon-cancel"></span>
</button>
<label class="navbar-header-label brandnav-label">Home</label>
</div>
<div class="brandnav brandnav-lvl-1" id="MainMenuExample6">
<ul class="nav">
<li>
<a href="#" data-open="brandnav">Shop</a>
<div class="brandnav brandnav-lvl-2">
<div class="brandnav-lvl-2-head">
<button type="button" class="cancel" data-close="brandnav" data-target="#MainMenuExample6">
<span class="icon icon-cancel" aria-hidden="true"></span>
</button>
</div>
<ul class="nav">
<li class="col-l-3">
<a href="#" data-open="brandnav">MagentaOne</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Offers</a></li>
<li><a href="#">Tariff</a></li>
<li><a href="#">Benefit</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
</li>
<li class="col-l-3">
<a href="#" data-open="brandnav">MagentaMobile</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Special Offers</a></li>
<li><a href="#">Smartphones</a></li>
<li><a href="#">Tablets & Surfsticks</a></li>
<li><a href="#">Tariff</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Accessoires</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
</li>
<li class="col-l-3">
<a href="#" data-open="brandnav">MagentaHome</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Tariff</a></li>
<li><a href="#">Entertain</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Accessoires</a></li>
</ul>
</div>
</li>
<li class="col-l-3">
<a href="#" data-open="brandnav">More</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Smart Home</a></li>
<li><a href="#">Apps</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a href="#" data-open="brandnav">My Telekom</a>
<div class="brandnav brandnav-lvl-2">
<div class="brandnav-lvl-2-head">
<button type="button" class="cancel" data-close="brandnav" data-target="#MainMenuExample6">
<span class="icon icon-cancel" aria-hidden="true"></span>
</button>
</div>
<ul class="nav">
<li class="col-l-4">
<a href="#" data-open="brandnav">Your Profile</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Sims</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Vorteil</a></li>
<li><a href="#">Bestellen</a></li>
</ul>
</div>
</li>
<li class="col-l-4">
<a href="#" data-open="brandnav">Mobile & Home</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Apps</a></li>
<li><a href="#">Connectivity</a></li>
<li><a href="#">Wifi</a></li>
<li><a href="#">Network</a></li>
<li><a href="#">Extras</a></li>
</ul>
</div>
</li>
<li class="col-l-4">
<a href="#" data-open="brandnav">Help</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Browse Help</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a href="#" data-open="brandnav">Help</a>
<div class="brandnav brandnav-lvl-2">
<div class="brandnav-lvl-2-head">
<button type="button" class="cancel" data-close="brandnav" data-target="#MainMenuExample6">
<span class="icon icon-cancel" aria-hidden="true"></span>
</button>
</div>
<ul class="nav">
<li class="col-l-4">
<a href="#" data-open="brandnav">Mobile Help</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Services</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</li>
<li class="col-l-4">
<a href="#" data-open="brandnav">Telekom Home Help</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Overview</a></li>
<li><a href="#">Home Kit</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Extras</a></li>
</ul>
</div>
</li>
<li class="col-l-4">
<a href="#" data-open="brandnav">Support</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Browse Help</a></li>
<li><a href="#">Overview</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a href="#" data-open="brandnav">Contact</a>
<div class="brandnav brandnav-lvl-2">
<div class="brandnav-lvl-2-head">
<button type="button" class="cancel" data-close="brandnav" data-target="#MainMenuExample6">
<span class="icon icon-cancel" aria-hidden="true"></span>
</button>
</div>
<ul class="nav">
<li class="col-l-4">
<a href="#" data-open="brandnav">Help</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Services</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</li>
<li class="col-l-4">
<a href="#" data-open="brandnav">Services</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Tools</a></li>
<li><a href="#">Applications</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Phones and Devices</a></li>
</ul>
</div>
</li>
<li class="col-l-4">
<a href="#" data-open="brandnav">Support</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Top Queries</a></li>
<li><a href="#">Latest</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="navbar-persistent">
<button type="button" class="btn btn-clean navbar-btn navbar-toggle" data-open="brandnav" data-target="#MainMenuExample1">
<span class="sr-only">Open Navigation</span>
<span class="icon icon-list-view"></span>
</button>
<ul class="nav navbar-nav navbar-nav-icons navbar-right">
<li><a href="#"><span class="sr-only">Search</span><span class="icon icon-search"></span></a></li>
<li><a href="#"><span class="sr-only">Shoppingcart</span><span class="icon icon-shopping-cart"></span></a></li>
<li><a href="#"><span class="sr-only">My Profile</span><span class="icon icon-my-profile"></span></a></li>
</ul>
</div>
</div>
</nav>
</header>
</div>
```html
<header class="brand-header">
<div class="brandbar">
<div class="container-fixed">
<div class="brand-logo">
<img src="images/deutsche-telekom-logo.svg" alt="Telekom Logo">
<span class="sr-only">Telekom Logo</span>
</div>
<div class="brand-claim">
<img src="images/brand-claim.svg" alt="Brand Claim">
<span class="sr-only">Brand Claim</span>
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fixed">
<div class="navbar-expanded">
<div class="brandnavhead" data-spy="brandnav" data-target="#MainMenu">
<button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenu">
<span class="sr-only">Back</span>
<span class="icon icon-navigation-left"></span>
</button>
<button type="button" class="btn btn-clean navbar-btn navbar-right" data-cancel="brandnav" data-target="#MainMenu">
<span class="sr-only">Close Navigation</span>
<span class="icon icon-cancel"></span>
</button>
<label class="navbar-header-label brandnav-label">Home</label>
</div>
<div class="brandnav brandnav-lvl-1" id="MainMenu">
<ul class="nav">
<li>
<a href="#" data-open="brandnav">Shop</a>
<div class="brandnav brandnav-lvl-2">
<div class="brandnav-lvl-2-head">
<button type="button" class="cancel" data-close="brandnav" data-target="#MainMenu">
<span class="icon icon-cancel" aria-hidden="true"></span>
</button>
</div>
<ul class="nav">
<li class="col-l-3">
<a href="#" data-open="brandnav">MagentaOne</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Offers</a></li>
<li><a href="#">Tariff</a></li>
<li><a href="#">Benefit</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
</li>
<li class="col-l-3">
<a href="#" data-open="brandnav">MagentaMobile</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Special Offers</a></li>
<li><a href="#">Smartphones</a></li>
<li><a href="#">Tablets & Surfsticks</a></li>
<li><a href="#">Tariff</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Accessoires</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
</li>
<li class="col-l-3">
<a href="#" data-open="brandnav">MagentaHome</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Tariff</a></li>
<li><a href="#">Entertain</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Accessoires</a></li>
</ul>
</div>
</li>
<li class="col-l-3">
<a href="#" data-open="brandnav">More</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Smart Home</a></li>
<li><a href="#">Apps</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a href="#" data-open="brandnav">My Telekom</a>
<div class="brandnav brandnav-lvl-2">
<div class="brandnav-lvl-2-head">
<button type="button" class="cancel" data-close="brandnav" data-target="#MainMenu">
<span class="icon icon-cancel" aria-hidden="true"></span>
</button>
</div>
<ul class="nav">
<li class="col-l-4">
<a href="#" data-open="brandnav">Your Profile</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Sims</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Vorteil</a></li>
<li><a href="#">Bestellen</a></li>
</ul>
</div>
</li>
<li class="col-l-4">
<a href="#" data-open="brandnav">Mobile & Home</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Apps</a></li>
<li><a href="#">Connectivity</a></li>
<li><a href="#">Wifi</a></li>
<li><a href="#">Network</a></li>
<li><a href="#">Extras</a></li>
</ul>
</div>
</li>
<li class="col-l-4">
<a href="#" data-open="brandnav">Help</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Browse Help</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a href="#" data-open="brandnav">Help</a>
<div class="brandnav brandnav-lvl-2">
<div class="brandnav-lvl-2-head">
<button type="button" class="cancel" data-close="brandnav" data-target="#MainMenu">
<span class="icon icon-cancel" aria-hidden="true"></span>
</button>
</div>
<ul class="nav">
<li class="col-l-4">
<a href="#" data-open="brandnav">Mobile Help</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Services</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</li>
<li class="col-l-4">
<a href="#" data-open="brandnav">Telekom Home Help</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Overview</a></li>
<li><a href="#">Home Kit</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Extras</a></li>
</ul>
</div>
</li>
<li class="col-l-4">
<a href="#" data-open="brandnav">Support</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Browse Help</a></li>
<li><a href="#">Overview</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a href="#" data-open="brandnav">Contact</a>
<div class="brandnav brandnav-lvl-2">
<div class="brandnav-lvl-2-head">
<button type="button" class="cancel" data-close="brandnav" data-target="#MainMenu">
<span class="icon icon-cancel" aria-hidden="true"></span>
</button>
</div>
<ul class="nav">
<li class="col-l-4">
<a href="#" data-open="brandnav">Help</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Services</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</li>
<li class="col-l-4">
<a href="#" data-open="brandnav">Services</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Tools</a></li>
<li><a href="#">Applications</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Phones and Devices</a></li>
</ul>
</div>
</li>
<li class="col-l-4">
<a href="#" data-open="brandnav">Support</a>
<div class="brandnav brandnav-lvl-3">
<ul class="nav">
<li><a href="#">Top Queries</a></li>
<li><a href="#">Latest</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="navbar-persistent">
<button type="button" class="btn btn-clean navbar-btn navbar-toggle" data-open="brandnav" data-target="#MainMenu">
<span class="sr-only">Open Navigation</span>
<span class="icon icon-list-view"></span>
</button>
<ul class="nav navbar-nav navbar-nav-icons navbar-right">
<li><a href="#"><span class="sr-only">Search</span><span class="icon icon-search"></span></a></li>
<li><a href="#"><span class="sr-only">Shoppingcart</span><span class="icon icon-shopping-cart"></span></a></li>
<li><a href="#"><span class="sr-only">My Profile</span><span class="icon icon-my-profile"></span></a></li>
</ul>
</div>
</div>
</nav>
</header>
```