Menu Navbar Background Colour Transition


Topic: Menu Navbar Background Colour Transition

Flub pro premium asked 5 years ago

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


Flub pro premium answered 5 years ago

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!


Flub pro premium answered 5 years ago

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.


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