CODEWITHSUNDEEP
angularangular-material
user1797508
user1797508

Reputation: 292

Angular Material Sidenav CSS not applied

My Angular Material sidenav is not having its CSS applied. Any idea of what's wrong?

Component CSS:

.nav-title {
    color:orangered ;
    font-weight: 500 ;
}

.orange {
    border-top-style: solid ;
    border-top-color: orangered ;
    border-top-width: 2px ;
}

Component HTML

    <mat-sidenav-container>

                <mat-sidenav #sidenav mode="side" 
                             [fixedInViewport]="'true'" [fixedTopGap]="'0'"
                             [fixedBottomGap]="'0'">



                             <app-navigation></app-navigation>



            </mat-sidenav>


            <mat-sidenav-content >


                    <nav class="uk-navbar-container orange" uk-sticky="bottom: #offset" uk-navbar>
                            <div class="uk-navbar-left uk-padding-small"><button (click)="sidenav.toggle()" class="uk-button uk-button-text  uk-margin-small-right" type="button" ><span uk-icon="icon: menu; ratio: 2" ></span></button><div class="nav-title">{{ title }}</div></div>
                            <div class="uk-navbar-center"></div>
                            <div class="uk-navbar-right"></div>
                        </nav>

                    <router-outlet></router-outlet>

            </mat-sidenav-content>

Any guidance would be much appreciated.

Thank you!

Upvotes: 1

Views: 1779

Answers (2)

Ashot Aleqsanyan
Ashot Aleqsanyan

Reputation: 4453

if you want to add the classes in your component css you need to do it by ::ng-deep or you need to add the classes in your global css file styles.css

Please try with thoes exaples

  1. in component.css
::ng-deep .nav-title {
    color:orangered !important;
    font-weight: 500  !important;
}

::ng-deep .orange {
    border-top-style: solid  !important;
    border-top-color: orangered  !important;
    border-top-width: 2px  !important;
}
  1. in styles.css
.nav-title {
    color:orangered !important;
    font-weight: 500  !important;
}

.orange {
    border-top-style: solid  !important;
    border-top-color: orangered  !important;
}

Upvotes: 1

igor_c
igor_c

Reputation: 1250

Looks like you forgot . before the css class selector:

.nav-title {
    ...
}

.orange {
    ...
}

Upvotes: 0

Related Questions