{% extends 'layouts/base_background.html' %} {% load static %} {% block title %} Material Kit 2 by Creative Tim {% endblock title %} {% block body %} class="nav-tabs-sections" {% endblock body %} {% block header %} {% include 'includes/navigation_light.html' %} {% endblock header %} {% block content %}

Navbars

Navbar dark

Copy 
<!-- Navbar Dark -->

<nav
  class="navbar navbar-expand-lg navbar-dark bg-gradient-dark z-index-3 py-3">
  <div class="container">
    <a class="navbar-brand text-white" href="https://demos.creative-tim.com/material-kit/presentation" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
      Material Kit 2
    </a>
    <a href="https://www.creative-tim.com/product/material-design-system-pro#pricingCard" class="btn btn-sm  bg-gradient-primary  btn-round mb-0 ms-auto d-lg-none d-block">Buy Now</a>
    <button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon mt-2">
        <span class="navbar-toggler-bar bar1"></span>
        <span class="navbar-toggler-bar bar2"></span>
        <span class="navbar-toggler-bar bar3"></span>
      </span>
    </button>
    <div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0" id="navigation">
      <ul class="navbar-nav navbar-nav-hover mx-auto">
        <li class="nav-item mx-2">
          <a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button">
            Pages
            <img src="{% static 'img/down-arrow-white.svg' %}" alt="down-arrow" class="arrow ms-1">
          </a>
        </li>

        <li class="nav-item mx-2">
          <a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button">
            Account
            <img src="{% static 'img/down-arrow-white.svg' %}" alt="down-arrow" class="arrow ms-1">
          </a>
        </li>
        <li class="nav-item mx-2">
          <a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button">
            Blocks
            <img src="{% static 'img/down-arrow-white.svg' %}" alt="down-arrow" class="arrow ms-1">
          </a>
        </li>

        <li class="nav-item dropdown dropdown-hover mx-2">
          <a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button">
            Docs
            <img src="{% static 'img/down-arrow-white.svg' %}" alt="down-arrow" class="arrow ms-1">
          </a>
        </li>
      </ul>

      <ul class="navbar-nav d-lg-block d-none">
        <li class="nav-item">
          <a href="https://www.creative-tim.com/product/material-design-system-pro#pricingCard" class="btn btn-sm  bg-gradient-primary  mb-0 me-1" role="button">Buy Now</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- End Navbar -->

Navbar light

Screenshot
Get the Code
navbar-2

Navbar transparent

Screenshot
Get the Code
navbar-3

Navbar blur

Screenshot
Get the Code
navbar-4
{% endblock content %} {% block footer %} {% include 'includes/footer_fullscreen.html' %} {% endblock footer %} {% block javascripts %} {% include 'includes/scripts_sections.html' %} {% endblock javascripts %}