Topic: Full Page Intro with fixed, transparent Navbar not working

vrund pro asked 6 years ago


The navbar is not changing its background color when scrolling starts, everything else works. I am using this example - https://mdbootstrap.com/live/_MDB/index/docs/page-layouts/intro-fixed-transparent.html

Androxia

 

 

.top-nav-collapse {background-color: #4285F4;}@media only screen and (max-width: 768px) {.navbar {background-color: #4285F4;}}


Damian Gemza staff answered 6 years ago


Hi, Vrund, let's check the last thing. If this solution won't solve your's problem, you have to send me your's code on my email address: d.gemza@mdbootstrap.com From below line:
<mdb-navbar SideClass="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar transparent" [containerInside]="false"></div>
try to remove class 'transparent'. It should now work. If not, just send me your's whole project to me. Best Regards, Damian

Damian Gemza staff answered 6 years ago


Vrund, please tell me - do you added a class .scrolling-navbar to navbar component? If no, it won't work without this class. Best Regards, Damian

vrund pro commented 6 years ago

My navbar has <pre> <div><mdb-navbar SideClass="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar transparent" [containerInside]="false"></div> </pre>

Damian Gemza staff answered 6 years ago


Hello there, Yes, class is added dynamically to DOM through scripts. When you scroll down your's page, .top-nav-collapse is added to your's nav element. Just open your's project in browser, click F12 button to see browser's console, and inspect navigation. Now you should see that .top-nav-collapse is being added when you scroll down your's page. You have to edit only the main, global .scss file in your's project. Only styles from that stylesheet will work with this navigation. Best Regards, Damian

vrund pro commented 6 years ago

Hi Damian, I tried inspecting and it's not adding the class to the DOM. Is there any MDB javascript file that I need to include in the scripts array in angular-cli.json?

Damian Gemza staff answered 6 years ago


Hi, Dear vrund, in which stylesheet file do you set color of
.top-nav-collapse class?
You have to add background-color styles in global stylesheet called: "styles.scss". He is in root/src folder of your's application. Just let me know, if it won't work in your's project. Best Regards, Damian

vrund pro commented 6 years ago

Yes, I have that .top-nav-collapse class in the styles.scss file. Thats the only class I need to make it change color on scroll right? Also, how is this class added to the DOM. I don't see it in my current HTML code. Is it dynamically being added?


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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: Yes
Tags