<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-yw-gradient-primary app-navbar" id="mainNavigation">
      <a class="navbar-brand" href="https://styleguide.youthweb.net/components/preview/timeline"><img src="../../dist/img/logo-16.png" alt="Youthweb" /></a>

      <div class="collapse navbar-collapse" id="navbarResponsive" data-parent="#mainNavigation">
          <ul class="navbar-nav mr-auto">
              <li class="nav-item">
                  <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/forum">Forum</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/live">Zeugnisse</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/praystation">Gebetsanliegen</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/groups">Gruppen</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/events">Events</a>
              </li>
              <li class="nav-item ">
                  <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/live">Impulse</a>
              </li>
          </ul>

          <search-user source="/" type="users" target="user/{0}" id="autosuggest__navbar"></search-user>
      </div>
      <a class="nav-link-with-icon ml-auto" href="https://styleguide.youthweb.net/components/preview/messenger">
          <span class="icon icon-chat"></span> <span class="navigation__notification-indicator"></span> <!-- TODO: <unread-messages></unread-messages> -->
      </a>
      <a class="nav-link-with-icon" href="https://styleguide.youthweb.net/components/preview/notifications">
          <span class="icon icon-bell"></span><span class="navigation__notification-indicator"></span> </a>
      <button class="navbar-btn-avatar ml-2" type="button" data-toggle="collapse" data-target="#profilePopover" aria-controls="profilePopover" aria-expanded="false" aria-label="Toggle profile">
          <img class="rounded-circle" src="https://eu.ui-avatars.com/api/?name=John+Doe&p=square35">
      </button>

      <button class="navbar-toggler d-lg-none ml-2" type="button" data-toggle="collapse" data-target="#navigationPopover" aria-controls="navigationPopover" aria-expanded="false" aria-label="Toggle navigation">
          <span class="icon icon-menu"></span>
      </button>
  </nav>

  <div id="navigationPopover" class="collapse w-100 d-lg-none" role="dialog" data-toggle="collapse" data-target="#navigationPopover" aria-controls="navigationPopover">

      <div class="navbar navbar-dark bg-yw-gradient-primary" onclick="event.stopPropagation();">
          <div class="navbar-collapse">
              <div class="w-100">
                  <search-user source="/" type="users" target="user/{0}" id="autosuggest__popover"></search-user>
              </div>
              <ul class="navbar-nav mr-auto">
                  <li class="nav-item">
                      <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/forum">Forum</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/live">Zeugnisse</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/praystation">Gebetsanliegen</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/groups">Gruppen</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/events">Events</a>
                  </li>
                  <li class="nav-item ">
                      <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/live">Impulse</a>
                  </li>
              </ul>
              <div class="dropdown-divider"></div>
              <ul class="navbar-nav mr-auto">
                  <li class="nav-item">
                      <a class="nav-link " href="https://styleguide.youthweb.net/components/preview/blog">Blog</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link " href="https://styleguide.youthweb.net/components/preview/page/team">Über uns</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link " href="https://styleguide.youthweb.net/components/preview/docs/index.html">Hilfe</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link " href="https://styleguide.youthweb.net/components/preview/page/develop">Develop</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link " href="https://styleguide.youthweb.net/components/preview/page/privacy">Datenschutz</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link " href="https://styleguide.youthweb.net/components/preview/page/impressum">Impressum</a>
                  </li>
              </ul>
              <div class="dropdown-divider"></div>
              <ul class="navbar-nav ">
                  <li class="nav-item">
                      <a class="app-notifications nav-link" href="https://www.facebook.com/youthweb.net">
                          Facebook
                      </a>
                  </li>
                  <li class="nav-item">
                      <a class="app-notifications nav-link" href="https://www.instagram.com/youthwebnet/">
                          Instagram
                      </a>
                  </li>
                  <li class="nav-item">
                      <a class="app-notifications nav-link" href="https://twitter.com/youthwebnet">
                          Twitter
                      </a>
                  </li>
                  <li class="nav-item">
                      <a class="app-notifications nav-link" href="https://www.pinterest.de/youthwebnet/">
                          Pinterest
                      </a>
                  </li>
                  <li class="nav-item">
                      <a class="app-notifications nav-link" href="https://shop.spreadshirt.de/youthweb">
                          Shop
                      </a>
                  </li>
              </ul>
          </div>
      </div>
  </div>

  <div id="profilePopover" class="collapse w-100" role="dialog" data-toggle="collapse" data-target="#profilePopover" aria-controls="profilePopover">
      <div class="float-right m-2" onclick="event.stopPropagation();">
          <div class="card card-profile mb-4 ">
              <div class="card-header bg-secondary"></div>
              <div class="card-body text-center">
                  <a href="https://styleguide.youthweb.net/components/preview/user">
                      <img class="card-profile-img" src="https://eu.ui-avatars.com/api/?name=John+Doe">
                  </a>

                  <h6 class="card-title">
                      <a class="text-inherit" href="user">John Doe</a>
                  </h6>

                  <p class="mb-4">Ut nam fabulas ponderum assentior</p><!-- Verhältnis zu Lebensmotto? -->

                  <ul class="card-menu">
                      <li class="card-menu-item">
                          <a href="https://styleguide.youthweb.net/components/preview/friends" class="text-inherit">
                              Freunde
                              <h6 class="my-0">17</h6>
                          </a>
                      </li>

                      <li class="card-menu-item">
                          <a href="https://styleguide.youthweb.net/components/preview/participation/hall-of-fame" class="text-inherit">
                              CP
                              <h6 class="my-0">352</h6>
                          </a>
                      </li>
                  </ul>
              </div>
              <ul class="list-group list-group-flush">
                  <li class="list-group-item">
                      <div class="">
                          <a href="https://styleguide.youthweb.net/components/preview/account/settings" class="btn btn-secondary btn-block"><i class="fas fa-user-cog"></i> Account</a>
                          <a href="https://styleguide.youthweb.net/components/preview/account/profile_settings" class="btn btn-secondary btn-block"><i class="fas fa-user-circle"></i> Profil</a>
                          <a href="https://styleguide.youthweb.net/components/preview/account/ignorelist" class="btn btn-secondary btn-block"><i class="fas fa-eye-slash"></i> Ignoreliste</a>
                      </div>
                  </li>
                  <li class="list-group-item"><a href="https://styleguide.youthweb.net/components/preview/logout"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
              </ul>
          </div>
          <div class="card mb-4">
              <div class="card-body">
                  <h6 class="card-title">Über mich<small> · <a href="https://styleguide.youthweb.net/components/preview/user">Zum Steckbrief</a></small></h6>
                  <p><i class="fas fa-user"></i> Angemeldet vor 5 Jahren
                  </p>
                  <p>
                      <i class="fas fa-star"></i> 21.02.1995 (32 Jahre alt)
                  </p>
                  <p>
                      <i class="fas fa-user-friends"></i> Gruppen: <a href="https://styleguide.youthweb.net/components/preview/groups/1234">Github</a>
                  </p>
              </div>
          </div>
      </div>
  </div>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-yw-gradient-primary app-navbar" id="mainNavigation">
      <a class="navbar-brand" href="{{ url('landing_page') }}"><img src="{{ asset('img/logo-16.png') }}" alt="{{ 'Youthweb'|trans }}"/></a>

      <div class="collapse navbar-collapse" id="navbarResponsive" data-parent="#mainNavigation">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="{{ url('legacy', {'route':'forum'}) }}">{{ 'Forum'|trans }}</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{{ url('legacy', {'route':'live'}) }}">{{ 'Zeugnisse'|trans }}</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{{ url('legacy', {'route':'prayrequests'}) }}">{{ 'Gebetsanliegen'|trans }}</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{{ url('legacy', {'route':'groups'}) }}">{{ 'Gruppen'|trans }}</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{{ url('legacy', {'route':'events'}) }}">{{ 'Events'|trans }}</a>
          </li>
          <li class="nav-item ">
            <a class="nav-link" href="{{ url('legacy', {'route':'impulses/posts'}) }}">{{ 'Impulse'|trans }}</a>
          </li>
        </ul>

        <search-user source="/" type="users" target="user/{0}" id="autosuggest__navbar"></search-user>
      </div>
{% if has_unread_messages is not defined %}
{% set has_unread_messages = false %}
{% endif %}
      <a class="nav-link-with-icon ml-auto" href="{{ url('legacy', {'route':'messages'}) }}">
        <span class="icon icon-chat"></span> {% if has_unread_messages %}<span class="navigation__notification-indicator"></span>{% endif %}
        <!-- TODO: <unread-messages></unread-messages> -->
      </a>
{% if has_unread_notifications is not defined %}
{% set has_unread_notifications = false %}
{% endif %}
      <a class="nav-link-with-icon" href="{{ url('legacy', {'route':'notifications'}) }}">
        <span class="icon icon-bell"></span>{% if has_unread_notifications %}<span class="navigation__notification-indicator"></span>{% endif %}
      </a>
{% if show_admin_context is not defined %}
{% set show_admin_context = false %}
{% endif %}
{% if admin_context_url is not defined %}
{% set admin_context_url = url('admin_index') %}
{% endif %}
{% if show_admin_context %}
      <a class="nav-link-with-icon" href="{{ admin_context_url|raw }}">
        <span class="icon icon-gauge"></span>
      </a>
{% endif %}
      <button
        class="navbar-btn-avatar ml-2"
        type="button"
        data-toggle="collapse"
        data-target="#profilePopover"
        aria-controls="profilePopover"
        aria-expanded="false"
        aria-label="Toggle profile">
        <img class="rounded-circle" src="{{ auth_profile.picture_url|withPreset('square35') }}">
      </button>

      <button
        class="navbar-toggler d-lg-none ml-2"
        type="button"
        data-toggle="collapse"
        data-target="#navigationPopover"
        aria-controls="navigationPopover"
        aria-expanded="false"
        aria-label="Toggle navigation">
        <span class="icon icon-menu"></span>
      </button>
    </nav>

    <div id="navigationPopover" class="collapse w-100 d-lg-none" role="dialog" data-toggle="collapse" data-target="#navigationPopover" aria-controls="navigationPopover">

      <div class="navbar navbar-dark bg-yw-gradient-primary" onclick="event.stopPropagation();">
        <div class="navbar-collapse">
          <div class="w-100">
            <search-user source="/" type="users" target="user/{0}" id="autosuggest__popover"></search-user>
          </div>
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="{{ url('legacy', {'route':'forum'}) }}">{{ 'Forum'|trans }}</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{{ url('legacy', {'route':'live'}) }}">{{ 'Zeugnisse'|trans }}</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{{ url('legacy', {'route':'prayrequests'}) }}">{{ 'Gebetsanliegen'|trans }}</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{{ url('legacy', {'route':'groups'}) }}">{{ 'Gruppen'|trans }}</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{{ url('legacy', {'route':'events'}) }}">{{ 'Events'|trans }}</a>
            </li>
            <li class="nav-item ">
              <a class="nav-link" href="{{ url('legacy', {'route':'impulses/posts'}) }}">{{ 'Impulse'|trans }}</a>
            </li>
          </ul>
          <div class="dropdown-divider"></div>
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link " href="{{ url('blog_view_posts') }}">{{ 'Blog'|trans }}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="{{ url('legacy', {'route':'page/team'}) }}">{{ 'Über uns'|trans }}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="{{ url('docs_page', {'path':'index.html'}) }}">{{ 'Hilfe'|trans }}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="{{ url('legacy', {'route':'page/develop'}) }}">{{ 'Develop'|trans }}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="{{ url('legacy', {'route':'page/privacy'}) }}">{{ 'Datenschutz'|trans }}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="{{ url('legacy', {'route':'page/impressum'}) }}">{{ 'Impressum'|trans }}</a>
            </li>
          </ul>
          <div class="dropdown-divider"></div>
          <ul class="navbar-nav ">
            <li class="nav-item">
              <a class="app-notifications nav-link" href="https://www.facebook.com/youthweb.net">
                {{ 'Facebook'|trans }}
              </a>
            </li>
            <li class="nav-item">
              <a class="app-notifications nav-link" href="https://www.instagram.com/youthwebnet/">
                {{ 'Instagram'|trans }}
              </a>
            </li>
            <li class="nav-item">
              <a class="app-notifications nav-link" href="https://twitter.com/youthwebnet">
                {{ 'Twitter'|trans }}
              </a>
            </li>
            <li class="nav-item">
              <a class="app-notifications nav-link" href="https://www.pinterest.de/youthwebnet/">
                {{ 'Pinterest'|trans }}
              </a>
            </li>
            <li class="nav-item">
              <a class="app-notifications nav-link" href="https://shop.spreadshirt.de/youthweb">
                {{ 'Shop'|trans }}
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div id="profilePopover" class="collapse w-100" role="dialog" data-toggle="collapse" data-target="#profilePopover" aria-controls="profilePopover">
      <div class="float-right m-2" onclick="event.stopPropagation();">
        <div class="card card-profile mb-4 ">
          <div class="card-header bg-secondary"></div>
          <div class="card-body text-center">
            <a href="{{ url('legacy', {'route':'users/'~auth_profile.id}) }}">
              <img class="card-profile-img" src="{{ auth_profile.picture_url }}">
            </a>

            <h6 class="card-title">
              <a class="text-inherit" href="user">{{ auth_profile.username }}</a>
            </h6>

            <p class="mb-4">{{ auth_profile.picture_description }}</p><!-- Verhältnis zu Lebensmotto? -->

            <ul class="card-menu">
              <li class="card-menu-item">
                <a href="{{ url('legacy', {'route':'users/'~auth_profile.id~'/friends'}) }}" class="text-inherit" >
                  {{ 'Freunde'|trans }}
                  <h6 class="my-0">{{ auth_profile.friends_count }}</h6>
                </a>
              </li>

              <li class="card-menu-item">
                <a href="{{ url('participation_hall_of_fame') }}" class="text-inherit" >
                  {{ 'CP'|trans }}
                  <h6 class="my-0">{{ auth_profile.community_points_count }}</h6>
                </a>
              </li>
            </ul>
          </div>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">
              <div class="">
                <a href="{{ url('legacy', {'route':'account/settings'}) }}" class="btn btn-secondary btn-block"><i class="fas fa-user-cog"></i> {{ 'Account'|trans }}</a>
                <a href="{{ url('legacy', {'route':'account/profile_settings'}) }}" class="btn btn-secondary btn-block"><i class="fas fa-user-circle"></i> {{ 'Profil'|trans }}</a>
                <a href="{{ url('legacy', {'route':'account/ignorelist'}) }}" class="btn btn-secondary btn-block"><i class="fas fa-eye-slash"></i> {{ 'Ignoreliste'|trans }}</a>
              </div>
            </li>
            <li class="list-group-item"><a href="{{ logout_url() }}"><i class="fas fa-sign-out-alt"></i> {{ 'Logout'|trans }}</a></li>
          </ul>
        </div>
        <div class="card mb-4">
          <div class="card-body">
            <h6 class="card-title">{{ 'Über mich'|trans }}<small> · <a href="{{ url('legacy', {'route':'users/'~auth_profile.id}) }}">{{ 'Zum Steckbrief'|trans }}</a></small></h6>
            <p><i class="fas fa-user"></i> {{ 'Angemeldet vor 1 Jahr|Angemeldet vor %count% Jahren'|trans({'%count%':auth_profile.created_years_ago}) }}
            </p>
            <p>
              <i class="fas fa-star"></i> {{ '%date% (%years% Jahre alt)'|trans({'%date%':auth_profile.birthday|date("d.m.Y"), '%years%':auth_profile.age_in_years}) }}
            </p>
            <p>
              <i class="fas fa-user-friends"></i> {{ 'Gruppen:'|trans }} {% for group_data in auth_profile.groups %}<a href="{{ url('legacy', {'route':'groups/'~group_data.id}) }}">{{ group_data.name }}</a>{% if not loop.last %}, {% endif %}{% else %}{{ 'Keine'|trans }}{% endfor %}
            </p>
          </div>
        </div>
      </div>
    </div>
{
  "auth_profile": {
    "id": "12345",
    "username": "John Doe",
    "picture_url": "https://eu.ui-avatars.com/api/?name=John+Doe",
    "picture_description": "Ut nam fabulas ponderum assentior",
    "background": "http://localhost:3000/dist/img/samantha-stortecky-sP5CaWEN7Do-unsplash.jpg",
    "community_points_count": 352,
    "friends_count": 17,
    "birthday": "1995-02-21",
    "age_in_years": "32",
    "created_years_ago": "5",
    "groups": [
      {
        "id": 1234,
        "name": "Github"
      }
    ]
  },
  "has_unread_messages": true,
  "has_unread_notifications": true,
  "show_admin_context": false
}

Die sticky Header-Navigation, die auf allen Seiten oben angeigt werden soll.