Transparent Navbar text color


Topic: Transparent Navbar text color

dojo44 asked 5 years ago

Expected behavior Text color changes so based on background

Actual behavior Text color remains white and back ground is white

It would be great to have the background color and text color flip on scroll so the text can be viewed Resources (screenshots, code snippets etc.)


Bartosz Termena staff answered 5 years ago

Dear @dojo44

You could use the mix-blend-mode property, which specifies how an element's content should blend with its direct parent background.

Try to add to your .scss :

.nav-link,
.md-form,
.navbar-brand {
  mix-blend-mode: difference;
}

and the navbar:

<!--Navbar-->
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark white">
  <!-- Navbar brand -->
  <mdb-navbar-brand><a class="navbar-brand" href="#">Navbar</a></mdb-navbar-brand>

  <!-- Collapsible content -->
  <links>
    <!-- Links -->
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link waves-light" mdbWavesEffect
          >Home<span class="sr-only">(current)</span></a
        >
      </li>
      <li class="nav-item">
        <a class="nav-link waves-light" mdbWavesEffect>Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link waves-light" mdbWavesEffect>Pricing</a>
      </li>

      <!-- Dropdown -->
      <li class="nav-item dropdown" dropdown>
        <a
          dropdownToggle
          mdbWavesEffect
          type="button"
          class="nav-link dropdown-toggle waves-light"
          mdbWavesEffect
        >
          Basic dropdown<span class="caret"></span
        ></a>
        <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
          <a class="dropdown-item waves-light" mdbWavesEffect href="#">Action</a>
          <a class="dropdown-item waves-light" mdbWavesEffect href="#">Another action</a>
          <a class="dropdown-item waves-light" mdbWavesEffect href="#">Something else here</a>
          <div class="divider dropdown-divider"></div>
          <a class="dropdown-item waves-light" mdbWavesEffect href="#">Separated link</a>
        </div>
      </li>
    </ul>
    <!-- Links -->

    <!-- Search form -->
    <form class="form-inline waves-light" mdbWavesEffect>
      <div class="md-form my-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" />
      </div>
    </form>
  </links>
  <!-- Collapsible content -->
</mdb-navbar>
<!--/.Navbar-->

From now, when you change navbar background color (for ex. to black), text color should change to white.

Hope it helps!

Best Regards, Bartosz.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.1.1
  • Device: PC
  • Browser: Chrome
  • OS: Win 10
  • Provided sample code: No
  • Provided link: No
Tags