Topic: Menu Navbar Background Colour Transition
*Expected behavior*Background navbar colour to change from transparent to solid
*Actual behavior*Background navbar colour stays transparent
*Resources (screenshots, code snippets etc.)*I just simply followed the standard procedures to start an Angular SSR project then integrates MDB pro, Font Awesome pro and just try to cut&paste an Intro to check all is fine to start dev.Even though I have well checked everything, navbar always stays transparent and background-colour doesn't turn solid on scrolling or mobile, even though tp-nav-collapse class is properly added...Any idea what is wrong?boilerplate Of course should add .npmrc file with license for FontAwesome pro and token in package.json for MDBootstrap pro license...
Indeed. Workaround works, but still, strange behaviour :) Thanks for your help
Bartosz Termena staff commented 5 years ago
Dear @Flub
It's because by default components have view encapsulation (shadow dom). To disable this behavior, you can leverage the encapsulation attribute, as described below:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None // <------
})
With this, your styles in app.component.scss will work. Hope it helps!
Best Regards, Bartosz.
Flub pro premium commented 5 years ago
Indeed. All working fine now. Thanks for your help!
I guess I have the same problem than here but it wasn't answered: duplicate
Arkadiusz Idzikowski staff commented 5 years ago
We didn't receive any code/reproduction steps in that thread, that's why we couldn't reproduce this problem on our end. It looks like it doesn't work when you put your styles in the app.component.scss file. As a workaround for now please add your rules responsible for styling .top-nav-collapse to global styles.scss, we will take a closer look at this problem.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 8.1.1
- Device: PC
- Browser: FF, Chrome, Edge, Opera
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes