Full Page Intro with fixed, transparent Navbar when scroll w

Hi, i just download mdbootstrap basic template then i start trying to code a navbar, and trying to create fullpage intro with fixed, transparent navbar and then when scroll added a blue color just like example in mdbootstrap documentation, i simply copy and paste the code just like below :

app.component.css :

.view {
    background: url("https://mdbootstrap.com/img/Photos/Others/img (40).jpg")no-repeat center center;
    background-size: cover;
}    
.navbar {
    background-color: transparent;
}
.top-nav-collapse {
    background-color: #4285F4;
}
@media only screen and (max-width: 768px) {
    .navbar {
        background-color: #4285F4;
    }
}

and here is my app.component.html :

i can't post HTML code, i just post the link then https://mdbootstrap.com/angular/layout/navigation/#i-f-t-n
thats exactly HTML i use, i do not change a bit of it, just simply copy and paste there to the getting started project

When i scroll down the navbar is shrink and when i scroll up the navbar getting bigger just like example but it wont added a color, still transparent, in mdbootstrap example the color is changed to blue, how can i fix this?