Topic: when doing scrolling-down the navbar dosen't change the background color

williamzv pro asked 6 years ago


Html: <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark scrolling-navbar fixed-top">... </mdb-navbar> SCSS: .top-nav-collapse { background-color: #424f95!important; } .navbar:not(.top-nav-collapse) { background: transparent!important; }

williamzv pro answered 6 years ago


I am sending my project to your mail, Thank you

Damian Gemza staff answered 6 years ago


Dear williamzv, Could you please provide me the full code which you're using in your app? I have copied the basic example navbar code and added there .scrolling-navbar class, then I have added your styles to my global styles.scss stylesheet, and for me, everything is working fine. When I scroll down the page, my navbar changes color from transparent to simillar to indigo PS: Your code is working fine to me too. But please note, that you need to have some space to scroll down your page - I mean a div with some height after your navbar element. Please check my code:
<!--Navbar-->

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">

<!-- 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 *dropdownMenuclass="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>

<aclass="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 mt-0">

<input class="form-control mr-sm-2"type="text"placeholder="Search">

</div>

</form>

</links>

<!-- Collapsible content -->

</mdb-navbar>

<!--/.Navbar-->

<div style="height: 2000px"></div>
 
.top-nav-collapse {

background-color: #424f95!important;

}

.navbar:not(.top-nav-collapse) {

background: transparent!important;

}
  Best Regards, Damian

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags