Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Transparent Navbar text color

dojo44 free 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

  • ForumUser: 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