<header class="banner">
  <nav class="navbar navbar-expand-lg navbar-fixed-top before-scroll">
    <div class="container">

        <button type="button" id="sideMenuCollapse" class="navbar-toggler navbar-toggler-left">
          <i class="fas fa-bars"></i>
      </button>

      <a class="navbar-brand" href="{{ home_url('/') }}">@svg('logo', 'icon-lg')</a>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <div class="ml-auto header-menu">
        @if (has_nav_menu('primary_navigation'))
          {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'navbar-nav']) !!}
        @endif
          @if (has_nav_menu('social_navigation'))
            {!! wp_nav_menu(['theme_location' => 'social_navigation', 'menu_class' => 'social']) !!}
          @endif
        </div>
      </div>

      <div class="instagram-gradient">
        <svg width="0" height="0">
          <radialGradient id="rg" r="150%" cx="30%" cy="107%">
            <stop stop-color="#fdf497" offset="0" />
            <stop stop-color="#fdf497" offset="0.05" />
            <stop stop-color="#fd5949" offset="0.45" />
            <stop stop-color="#d6249f" offset="0.6" />
            <stop stop-color="#285AEB" offset="0.9" />
          </radialGradient>
        </svg>
      </div>

    </div>
  </nav>
</header>
