## 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>
```