View on GitHub

Transparent navbar

Use the navbar transparent variation for placing navbars over backgrounds and interactive content.

On this page

Examples

html

<div class="py-5 px-3" style="background: url(/docs/assets/img/examples/kanye.jpg) top center; background-size: cover">

  <nav class="navbar navbar-transparent navbar-padded navbar-expand-sm">
    <a class="navbar-brand" href="#">
      <h4 class="text-uppercase my-0">Project Name</h4>
    </a>

    <button
      class="navbar-toggler navbar-toggler-right d-md-none"
      type="button"
      data-toggle="collapse"
      data-target="#navbarResponsive"
      aria-controls="navbarResponsive"
      aria-expanded="false"
      aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="nav navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

</div>

CSS

Sass variables

$navbar-transparent-color:             $white;
$navbar-transparent-bg:                transparent;
$navbar-transparent-border-color:      transparent;

$navbar-transparent-link-color:        $navbar-transparent-color;
$navbar-transparent-link-hover-color:  shade-color($navbar-transparent-color, 10%);
$navbar-transparent-link-hover-bg:     transparent;
$navbar-transparent-link-active-color: $navbar-transparent-link-hover-color;
$navbar-transparent-link-active-bg:    transparent;

$navbar-transparent-brand-color:       $navbar-transparent-color;
$navbar-transparent-brand-hover-color: shade-color($navbar-transparent-color, 10%);
$navbar-transparent-brand-hover-bg:    transparent;