Phoenix Reisen Styleguide

3000.3 #permalink Sticky Topbar

Toggle example guides Toggle HTML markup

Module: Mithril mit Demo

Die Leiste ist hier aus Anpassungsgründen durch Inline-Styles static positioniert (die vor Benutzung natürlich zu entfernen sind). Ansonsten liegt sie fixed am oberen Browserrand und erstreckt sich über die ganze Breite.

Markup
<article class="top-bar noprint top-bar--visible" style="position:static">
    <div class="wrapper wrapper--large">
        <div class="top-bar__left">
            <a href="https://phoenixreisen.com" title="zurück" class="top-bar__back-btn">
                <i class="fas fa-arrow-left"></i>
            </a>
            <a href="https://phoenixreisen.com" title="zur Startseite">
                <img src="https://phoenixreisen.com/favicon.png" class="top-bar__icon" alt="" />
                <span class="ml1">Phoenix Reisen App</span>
            </a>
        </div>
        <article class="top-bar__avatar">
            <a href="#" class="avatar-cta avatar-cta--topbar" title="Buchungsdaten anzeigen">
                <i class="fas fa-user avatar__symbol"></i>
            </a>
        </article>
        <a href="#" class="nav-btn top-bar__nav-btn noprint" title="Navigation ein-/ausblenden">
            <i class="fas fa-bars"></i>
        </a>
    </div>
</article>
Source: src/vendors/_phoenix.scss, line 156