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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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