{% set nav_classes = 'navbar navbar-expand-lg' ~
  (b4_navbar_schema != 'none' ? " navbar-#{b4_navbar_schema}" : ' ') ~
  (b4_navbar_schema != 'none' ? (b4_navbar_schema == 'dark' ? ' text-light' : ' text-dark' ) : ' ') ~
  (b4_navbar_bg_schema != 'none' ? " bg-#{b4_navbar_bg_schema}" : ' ') %}

<header id="header" class="header-affix" data-spy="affix" data-offset-top="150">
  {% if page.header %}
    {{ page.header }}
  {% endif %}
  <div id="page-loader">
    <div id="wifi-loader">
      <svg class="circle-outer" viewBox="0 0 86 86">
          <circle class="back" cx="43" cy="43" r="40"></circle>
          <circle class="front" cx="43" cy="43" r="40"></circle>
          <circle class="new" cx="43" cy="43" r="40"></circle>
      </svg>
      <svg class="circle-middle" viewBox="0 0 60 60">
          <circle class="back" cx="30" cy="30" r="27"></circle>
          <circle class="front" cx="30" cy="30" r="27"></circle>
      </svg>
      <svg class="circle-inner" viewBox="0 0 34 34">
          <circle class="back" cx="17" cy="17" r="14"></circle>
          <circle class="front" cx="17" cy="17" r="14"></circle>
      </svg>
      <div class="text" data-text="Loading"></div>
    </div>
  </div>
  {% if page.nav_branding or page.nav_main or page.nav_additional %}
    <nav class="{{ nav_classes }} p-0">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#NavBar" aria-controls="NavBar"
              aria-expanded="false" aria-label="Toggle navigation">
        <div class="hamburger--nav">
          <div class="hamburger-inner"></div>
        </div>
      </button>

      <div class="{{ b4_top_container }} row container mx-5 px-3 py-2">

        <div class="col-auto p-0">
          {{ page.nav_branding }}
        </div>

        <div class="collapse navbar-collapse col-12 col-md-auto p-0 justify-content-end" id="NavBar">
          {{ page.nav_main }}
          {{ page.nav_additional }}
        </div>
      </div>
    </nav>
  {% endif %}
</header>