<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
  <h5 class="my-0 mr-md-auto"><a href="/" class="text-dark">agadmator</a></h5>
  <nav class="my-2 my-md-0 mr-md-3">
    <a class="p-2 text-dark" href="{% url 'agadmator:about' %}">about</a>
    <a class="p-2 text-dark" href="{% url 'agadmator:video_list' %}">videos</a>
  </nav>
  <form class="form-inline my-2 my-md-0 d-inline" method="get" action="{% url 'agadmator:video_list' %}">
    <input class="form-control form-control-sm" placeholder="search" name="q" aria-label="Search" type="text" {% if request.GET.q %}value="{{ request.GET.q }}"{% endif %}>
  </form>
</div>