Header
The header provides branding (through color and logo), navigation, and a widget. It is always located at the very top of a page.
The header provides branding (through color and logo), navigation, and a widget. It is always located at the very top of a page.
By default, the header is fixed, but you can add the flix-header--unfixed modifier class to make it scrollable with the rest of the content.
You can also stretch the header contents to occupy the whole screen by adding a flix-header--fullwidth modifier.
The header hides the navigation, widgets and burger menu depending on screen size.
Header contains 5 children components:
- Skip links are shortcuts for keyboard users and should always come first
- Brand holds your logo goodness
- Navigation are links for other pages in the website
- Burger menu an expandable panel for mobile navigation
- Widgets for any extra functionality like site search, language switcher and user profile widget
The example bellow has a complete set of features for the header component. You may not need all of it, to learn more details about each component, use the links above to navigate to each component's documentation page.
Deutsch
English
Deutsch
Deutsch
English
Español
Français
Français
Italiano
Polski
Português
Srpski
Suomi
Svenska
Укpaїнcькa
Македонски
Български
English
English
Português
<header class="flix-header flix-header--unfixed">
<div class="flix-header__inner">
<!-- header skip links starts -->
<div class="flix-header-skip-links">
<a class="flix-skip-link" href="#booking-details">
Skip to booking details
</a>
<a class="flix-skip-link" href="#language-selection">
Skip to language selection
</a>
</div>
<!-- header skip links ends -->
<!-- header brand starts -->
<div class="flix-header-brand flix-header-brand--square">
<a class="flix-header-brand__link" href="/">
<img class="flix-header-brand__img" width="36" height="36" src="/img/logos/svg/honeycomb-white.svg" alt="Honeycomb Logo"/>
</a>
</div>
<!-- header brand ends -->
<!-- header navigation starts -->
<nav class="flix-header-nav" aria-label="Main">
<ul class="flix-header-nav__list">
<li class="flix-header-nav__item">
<a class="flix-header-nav__link" aria-current="page" href="/">
<i class="flix-icon flix-icon-home-solid" aria-hidden="true"></i>
<span class="flix-header-nav__text">My bookings</span>
</a>
</li>
<li class="flix-header-nav__item">
<button type="button" class="flix-header-nav__link" data-dropdown="flix-header-subnav">
<i class="flix-icon flix-icon-location-solid" aria-hidden="true"></i>
<span class="flix-header-nav__text">Plan trip</span>
</button>
<ul id="flix-header-subnav" class="flix-header-nav-subnav" hidden>
<li class="flix-header-nav-subnav__item">
<a class="flix-header-nav-subnav__link" aria-current="page" href="/">
<i class="flix-icon flix-icon-trip-solid" aria-hidden="true"></i>
<span class="flix-header-nav-subnav__text">Route Network</span>
</a>
</li>
<li class="flix-header-nav-subnav__item">
<a class="flix-header-nav-subnav__link" href="/">
<i class="flix-icon flix-icon-pin" aria-hidden="true"></i>
<span class="flix-header-nav-subnav__text">Coach destination</span>
</a>
</li>
<li class="flix-header-nav-subnav__item">
<a class="flix-header-nav-subnav__link" href="/">
<span class="flix-header-nav-subnav__text">Night buses</span>
</a>
</li>
</ul>
</li>
<li class="flix-header-nav__item">
<a class="flix-header-nav__link" href="/">
<i class="flix-icon flix-icon-real-time" aria-hidden="true"></i>
<span class="flix-header-nav__text">Real-time</span>
</a>
</li>
<li class="flix-header-nav__item">
<a class="flix-header-nav__link" href="/">
<span class="flix-header-nav__text">About Us</span>
</a>
</li>
</ul>
</nav>
<!-- header navigation ends -->
<!-- burger burger menu starts -->
<div class="flix-header-burger-menu">
<button type="button" aria-label="Open main site navigation" class="flix-header-burger-menu__toggle flix-btn flix-btn--link flix-btn--square flix-btn--md" aria-controls="menu-panel" aria-expanded="false" onclick="toggleAriaExpanded(this)"></button>
<div id="menu-panel" class="flix-header-burger-menu__panel" hidden>
<button type="button" aria-label="Close main site navigation" class="flix-header-burger-menu__toggle flix-btn flix-btn--link flix-btn--square flix-btn--md" aria-controls="menu-panel" aria-expanded="true"></button>
<!-- burger menu navigation starts -->
<nav class="flix-header-burger-menu__nav" aria-label="Main">
<ul class="flix-header-burger-menu__list">
<li class="flix-header-burger-menu__item">
<a class="flix-header-burger-menu__link" aria-current="page" href="/">
<i class="flix-icon flix-icon-home-solid" aria-hidden="true"></i>
<span class="flix-header-burger-menu__text">My bookings</span>
</a>
</li>
<li class="flix-header-burger-menu__item">
<button type="button" class="flix-header-burger-menu__link" data-dropdown="flix-burger-subnav">
<i class="flix-icon flix-icon-location-solid" aria-hidden="true"></i>
<span class="flix-header-burger-menu__text">Plan trip</span>
</button>
<ul id="flix-burger-subnav" class="flix-header-burger-menu-subnav" hidden>
<li class="flix-header-burger-menu-subnav__item">
<a class="flix-header-burger-menu-subnav__link" aria-current="page" href="/">
<i class="flix-icon flix-icon-trip-solid" aria-hidden="true"></i>
<span class="flix-header-burger-menu__text">Route Network</span>
</a>
</li>
<li class="flix-header-burger-menu-subnav__item">
<a class="flix-header-burger-menu-subnav__link" href="/">
<i class="flix-icon flix-icon-pin" aria-hidden="true"></i>
<span class="flix-header-burger-menu__text">Coach destination</span>
</a>
</li>
<li class="flix-header-burger-menu-subnav__item">
<a class="flix-header-burger-menu-subnav__link" href="/">
<span class="flix-header-burger-menu__text">Night buses</span>
</a>
</li>
</ul>
</li>
<li class="flix-header-burger-menu__item">
<a class="flix-header-burger-menu__link" href="/">
<i class="flix-icon flix-icon-real-time" aria-hidden="true"></i>
<span class="flix-header-burger-menu__text">Real-time</span>
</a>
</li>
<li class="flix-header-burger-menu__item">
<a class="flix-header-burger-menu__link" href="/">
<span class="flix-header-burger-menu__text">About Us</span>
</a>
</li>
</ul>
</nav>
<!-- burger menu navigation ends -->
</div>
<div class="flix-header-burger-menu__overlay flix-overlay"></div>
</div>
<!-- header burger menu ends -->
<!-- header widgets starts -->
<div class="flix-header-widgets flix-header-widgets--no-responsive-rendering">
<div class="flix-language-switcher">
<button
type="button"
class="flix-language-switcher__toggle"
data-popup="language-switcher-popup"
data-firstFocusable="close-language-switcher"
data-lastFocusable="last-focusable-item"
>
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/eu.svg" alt="European Union" />
English
<span class="flix-sr-only">Open language selection</span>
</button>
</div>
</div>
<!-- header widgets ends -->
</div>
</header>
<!-- language switcher popup starts -->
<div id="language-switcher-popup" class="flix-language-switcher-popup" aria-label="Language selection" hidden>
<div class="flix-language-switcher-popup__body">
<button
id="close-language-switcher"
type="button"
aria-label="Close language selection"
class="flix-language-switcher-popup__close flix-btn flix-btn--square flix-btn--sm flix-btn--link"
></button>
<section aria-labelledby="suggested-domains" class="flix-language-switcher-popup__region">
<h2 id="suggested-domains" class="flix-h4 flix-h4--section-header">Suggested domains</h2>
<ul class="flix-language-switcher-popup__list">
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" aria-current="true">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/de.svg" alt="Germany" />
Deutsch
</a>
</li>
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/eu.svg" alt="European Union" />
English
</a>
</li>
</ul>
</section>
<section aria-labelledby="europe-domains" class="flix-language-switcher-popup__region">
<h2 id="europe-domains" class="flix-h4 flix-h4--section-header">Europe</h2>
<ul class="flix-language-switcher-popup__list">
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="de">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/de.svg" alt="Germany" />
Deutsch
</a>
</li>
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="de-ch">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ch.svg" alt="Switzerland" />
Deutsch
</a>
</li>
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="de-at">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/at.svg" alt="Austria" />
Deutsch
</a>
</li>
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="en-gb">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/gb.svg" alt="England" />
English
</a>
</li>
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="es">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/es.svg" alt="Spain" />
Español
</a>
</li>
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="fr">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/fr.svg" alt="France" />
Français
</a>
</li>
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="fr-ch">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ch.svg" alt="Switzerland" />
Français
</a>
</li>
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="fr-be">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/be.svg" alt="Belgium" />
Français
</a>
</li>
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="it">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/it.svg" alt="Italy" />
Italiano
</a>
</li>
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="it-ch">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ch.svg" alt="Switzerland" />
Italiano
</a>
</li>
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="pl">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/pl.svg" alt="Poland" />
Polski
</a>
</li>
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="pt-pt">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/pt.svg" alt="Portugal" />
Português
</a>
</li>
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="rs">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/rs.svg" alt="Serbia" />
Srpski
</a>
</li>
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="fi">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/fi.svg" alt="Finland" />
Suomi
</a>
</li>
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="se">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/se.svg" alt="Sweden" />
Svenska
</a>
</li>
</ul>
<ul class="flix-language-switcher-popup__list">
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="ua">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ua.svg" alt="Ukraine" />
Укpaїнcькa
</a>
</li>
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="mk">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/mk.svg" alt="Macedonia" />
Македонски
</a>
</li>
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="bg">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/bg.svg" alt="Bulgaria" />
Български
</a>
</li>
</ul>
</section>
<section aria-labelledby="america-domains" class="flix-language-switcher-popup__region">
<h2 id="america-domains" class="flix-h4 flix-h4--section-header">North & South America</h2>
<ul class="flix-language-switcher-popup__list">
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="en-us">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/us.svg" alt="United States" />
English
</a>
</li>
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="es-us">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/us.svg" alt="United States" />
Español
</a>
</li>
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="zh-us">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/us.svg" alt="United States" />
中文
</a>
</li>
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="en-ca">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ca.svg" alt="Canada" />
English
</a>
</li>
<li class="flix-language-switcher-popup__item">
<a href="#" class="flix-language-switcher-popup__link" lang="fr-ca">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/ca.svg" alt="Canada" />
Français
</a>
</li>
<li class="flix-language-switcher-popup__item">
<a id="last-focusable-item" href="#" class="flix-language-switcher-popup__link" lang="pt-br">
<img class="flix-language-switcher__flag" src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/br.svg" alt="Brasil" />
Português
</a>
</li>
</ul>
</section>
</div>
<div class="flix-overlay"></div>
</div>Header with 2 rows
In some cases you might need to accommodate the longer navigation, for that we made it possible to trigger the two rows layout even on larger screens.
To enable that, simply add the flix-header--2-rows modifier to the header component, the children components will adapt accordingly, to show the navigation on the second row.
Example bellow illustrates this layout applied to Kamil Koç header.
<div class="flix-theme-kamil">
<header class="flix-header flix-header--2-rows flix-header--widget-l flix-header--unfixed">
<div class="flix-header__inner">
<div class="flix-header-skip-links">
<a class="flix-skip-link" href="#booking-details">
Skip to booking details
</a>
<a class="flix-skip-link" href="#language-selection">
Skip to language selection
</a>
</div>
<div class="flix-header-burger-menu">
<button
type="button"
aria-label="Open main site navigation"
class="flix-header-burger-menu__toggle flix-btn flix-btn--link flix-btn--square flix-btn--md"
aria-controls="kamil-burger-menu"
aria-expanded="false"
onclick="togglePanel('kamil-burger-menu', this)"
></button>
<div id="kamil-burger-menu" class="flix-header-burger-menu__panel" hidden="">
<button
type="button"
aria-label="Close main site navigation"
class="flix-header-burger-menu__toggle flix-btn flix-btn--link flix-btn--square flix-btn--md"
aria-controls="kamil-burger-menu"
aria-expanded="true"
onclick="togglePanel('kamil-burger-menu', document.querySelector('.flix-header-burger-menu__toggle'))"
></button>
<nav class="flix-header-burger-menu flix-header-burger-menu__nav" aria-label="Main">
<ul class="flix-header-burger-menu__list">
<li class="flix-header-burger-menu__item">
<button
type="button"
class="flix-header-burger-menu__link"
aria-current="page"
data-dropdown="kamil-header-burger-menu-otobus-seferleri-subnav"
>
<span class="flix-header-burger-menu__text">Otobüs Seferleri</span>
</button>
<ul id="kamil-header-burger-menu-otobus-seferleri-subnav" class="flix-header-burger-menu-subnav" hidden>
<li class="flix-header-burger-menu-subnav__item">
<a class="flix-header-burger-menu-subnav__link" href="/">
<span class="flix-header-burger-menu-subnav__text">Sefer Bul</span>
</a>
</li>
<li class="flix-header-burger-menu-subnav__item">
<a class="flix-header-burger-menu-subnav__link" href="/">
<span class="flix-header-burger-menu-subnav__text">Otobus Saatleri Otogarlar</span>
</a>
</li>
</ul>
</li>
<li class="flix-header-burger-menu__item">
<button
type="button"
class="flix-header-burger-menu__link"
data-dropdown="kamil-header-burger-menu-hizmetlerimiz-subnav"
>
<span class="flix-header-burger-menu__text">Hizmetlerimiz</span>
</button>
<ul id="kamil-header-burger-menu-hizmetlerimiz-subnav" class="flix-header-burger-menu-subnav" hidden>
<li class="flix-header-burger-menu-subnav__item">
<a class="flix-header-burger-menu-subnav__link" href="/">
<span class="flix-header-burger-menu-subnav__text">Tüm hizmetlerimiz</span>
</a>
</li>
<li class="flix-header-burger-menu-subnav__item">
<a class="flix-header-burger-menu-subnav__link" href="/">
<span class="flix-header-burger-menu-subnav__text">Ürün ve Hizmetler</span>
</a>
</li>
</ul>
</li>
<li class="flix-header-burger-menu__item">
<a class="flix-header-burger-menu__link" href="/">
<span class="flix-header-burger-menu__text">Bilet işlemleri</span>
</a>
</li>
<li class="flix-header-burger-menu__item">
<a class="flix-header-burger-menu__link" href="/">
<span class="flix-header-burger-menu__text">Kampanyalar</span>
</a>
</li>
<li class="flix-header-burger-menu__item">
<a class="flix-header-burger-menu__link" href="/">
<span class="flix-header-burger-menu__text">Yolcum Nerede</span>
</a>
</li>
<li class="flix-header-burger-menu__item">
<a class="flix-header-burger-menu__link" href="/">
<span class="flix-header-burger-menu__text">Yardım</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="flix-header-burger-menu__overlay flix-overlay"></div>
</div>
<div class="flix-header-brand flix-header-brand--tall">
<a class="flix-header-brand__link" href="/">
<img
class="flix-header-brand__img" width="178" height="36"
src="https://honeycomb-assets.hive.flixbus.com/honeycomb-logos-static/2.0.0/png/kamil-100-white.png"
alt="Kamil Koç Logo"
>
</a>
</div>
<nav class="flix-header-nav flix-header-nav__nav" aria-label="Main">
<ul class="flix-header-nav__list">
<li class="flix-header-nav__item">
<button
type="button"
class="flix-header-nav__link"
aria-current="page"
data-dropdown="kamil-nav-otobus-seferleri-subnav"
>
<span class="flix-header-nav__text">Otobüs Seferleri</span>
</button>
<ul id="kamil-nav-otobus-seferleri-subnav" class="flix-header-nav-subnav" hidden="" role="menu">
<li class="flix-header-nav-subnav__item">
<a class="flix-header-nav-subnav__link" href="/">
<span class="flix-header-nav-subnav__text">Sefer Bul</span>
</a>
</li>
<li class="flix-header-nav-subnav__item">
<a class="flix-header-nav-subnav__link" href="/">
<span class="flix-header-nav-subnav__text">Otobus Saatleri Otogarlar</span>
</a>
</li>
</ul>
</li>
<li class="flix-header-nav__item">
<button
type="button"
class="flix-header-nav__link"
data-dropdown="kamil-nav-hizmetlerimiz-subnav"
>
<span class="flix-header-nav__text">Hizmetlerimiz</span>
</button>
<ul id="kamil-nav-hizmetlerimiz-subnav" class="flix-header-nav-subnav" hidden>
<li class="flix-header-nav-subnav__item">
<a class="flix-header-nav-subnav__link" href="/">
<span class="flix-header-nav-subnav__text">Tüm hizmetlerimiz</span>
</a>
</li>
<li class="flix-header-nav-subnav__item">
<a class="flix-header-nav-subnav__link" href="/">
<span class="flix-header-nav-subnav__text">Ürün ve Hizmetler</span>
</a>
</li>
</ul>
</li>
<li class="flix-header-nav__item">
<a class="flix-header-nav__link" href="/">
<span class="flix-header-nav__text">Bilet işlemleri</span>
</a>
</li>
<li class="flix-header-nav__item">
<a class="flix-header-nav__link" href="/">
<span class="flix-header-nav__text">Kampanyalar</span>
</a>
</li>
<li class="flix-header-nav__item">
<a class="flix-header-nav__link" href="/">
<span class="flix-header-nav__text">Yolcum Nerede</span>
</a>
</li>
<li class="flix-header-nav__item">
<a class="flix-header-nav__link" href="/">
<span class="flix-header-nav__text">Yardım</span>
</a>
</li>
</ul>
</nav>
<div class="flix-header-widgets">
<div class="flix-grid">
<div class="flix-col flix-col--inline">
<div class="flix-language-switcher">
<button type="button" class="flix-language-switcher__toggle">
<img
class="flix-language-switcher__flag"
src="https://honeycomb-assets.hive.flixbus.com/honeycomb-flags-static/2.0.3/svg/de.svg"
alt="Türkiye"
>
Türkçe
</button>
</div>
</div>
<div class="flix-col flix-col--inline">
<nav aria-label="John Doe" class="flix-header-user-widget">
<a href="#" class="flix-avatar">
<flix-icon class="flix-avatar__image hydrated" size="cover" fill-canvas="" title="Picture of John Doe" name="profile"></flix-icon>
<span class="flix-sr-only">John Doe</span>
</a>
<button
type="button"
aria-label="Open user menu"
class="flix-header-user-widget__toggle"
data-dropdown="user-menu"
>
John Doe
</button>
<ul id="user-menu" class="flix-header-nav-subnav flix-header-nav-subnav--left" hidden>
<li class="flix-header-nav-subnav__item">
<a class="flix-header-nav-subnav__link" href="/">
<span class="flix-header-nav__text">Profile</span>
</a>
</li>
<li class="flix-header-nav-subnav__item">
<a class="flix-header-nav-subnav__link" href="/">
<span class="flix-header-nav__text">Logout</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
</div>