I didn't know I had to add the CSS rule to the styles.scss file, I added it to the app.component.scss file. But doing that now it is working.

Thank you very much for your help.

I tried all the combinations and it is not working. The only case when I saw both navbars it was when I used

    `<mdb-navbar SideClass="second-navbar fixed-top navbar-expand-lg navbar-dark default-color ie-nav" [containerInside]="false">`![overlapped fixed navbars][1]

for the second navbar. But the navbars were still overlapping...

I was using the following code to have 2 fixed navbars:

<mdb-navbar SideClass="navbar fixed-top navbar-expand-lg navbar-dark pink ie-nav" [containerInside]="false">

<mdb-navbar class="second-navbar" SideClass="navbar fixed-top navbar-expand-lg navbar-dark default-color ie-nav" [containerInside]="false"> `

and your CSS rule, but unfortunately the navbars are overlapping for any "top" value..

1. Thanks, we will take care of that. Please add fixed-top class to main element to make the navbar fixed.

2. It is possible but you would need to update the position of the second navbar. For example, add .second-navbar class to your second navbar and use this css rule:

.second-navbar { top: 56px; // 56px is the height of the navbar in this case }