when doing scrolling-down the navbar dosen&#039;t change

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; }

Add comment

williamzv pro answered 6 years ago

0 0 Best answer

I am sending my project to your mail, Thank you

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

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:
<div>
<pre>

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

<mdb-navbar-brand>

<a class="navbar-brand"href="#">Navbar</a>

</mdb-navbar-brand>

<links>

<a class="nav-link waves-light"mdbWavesEffect>Home

<span class="sr-only">(current)</span>

</a>

</li>

<a class="nav-link waves-light"mdbWavesEffect>Features</a>

</li>

<a class="nav-link waves-light"mdbWavesEffect>Pricing</a>

</li>

Basic dropdown

</a>

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

<a class="dropdown-item waves-light"mdbWavesEffect href="#">Separated link</a>

</div>

</li>

</ul>

</div>

</form>

</links>

</mdb-navbar>

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

background-color: #424f95!important;

}

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

background: transparent!important;

}</pre>
</div>

Best Regards,

Damian

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

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

williamzv

Pro User 10Support score
3Questions 2Answers 0Snippets