<style>
    .navbar-light {
        background-color: black !important;
    }
</style>

<div class="container-xl">

  <div id="navbar-start">
    {% for navbar_item in theme_navbar_start %}
    {% include navbar_item %}
    {% endfor %}
  </div>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapsible" aria-controls="navbar-collapsible" aria-expanded="false" aria-label="{{ _('Toggle navigation') }}">
    <span class="navbar-toggler-icon" >
      <i class="fas fa-bars" style="color:#fff; font-size:28px;"></i>
    </span>
  </button>

  {% set navbar_class, navbar_align = navbar_align_class() %}
  <div id="navbar-collapsible" class="{{ navbar_class }} collapse navbar-collapse">
    <div id="navbar-center" class="{{ navbar_align }}">
      {% for navbar_item in theme_navbar_center %}
      <div class="navbar-center-item">
        {% include navbar_item %}
      </div>
      {% endfor %}
    </div>

    {% if theme_show_icons %}
    <div id="navbar-end">
      {% for navbar_item in theme_navbar_end %}
      <div class="navbar-end-item">
        {% include navbar_item %}
      </div>
      {% endfor %}
    </div>
    {% endif %}
  </div>
</div>
