CODEWITHSUNDEEP
htmlcssangular
Newsha Nik
Newsha Nik

Reputation: 947

Fixed nav menu with z-index 1000 doesn't cover angular material components

I have a fixed navbar that opens up when a user clicks on the hamburger icon. Problem is, it covers all elements in the page except for the elements that are actually Angular material components.

screenshot of website

As you can see in the picture, get started and token buttons are not covered by the hamburger menu like the rest of the page.

This is my fixed navbar scss:

position: fixed;
width: 80vw;
height: 100vh;
z-index: 1000;
transition: 0.23s;
background-color: $snd-dark-lighter;

padding: 0 28px;

top: 0;
right: -100vw;

Action buttons html:

      <div class="container__action--buttons">
        <button mat-flat-button>
          Get started
          <mat-icon>arrow_forward</mat-icon>
        </button>
        <button mat-stroked-button>
          <mat-icon>info</mat-icon>
          Sonido token
        </button>
      </div>

actions buttons scss:

        .container__action--buttons {
            button {
              font-size: 14px;
              font-weight: 400;

              height: 48px;

              &.mat-flat-button {
                background-color: $snd-green;
                margin-right: 25px;
              }

              &.mat-stroked-button {
                border: 1px solid $snd-white;
              }
            }
          }

Upvotes: 0

Views: 921

Answers (1)

wnvko
wnvko

Reputation: 2120

Instead of using z-index and try to put your menu above all the elements on the page you can try using Angular Material CDK Overlay. By the help of the overlay you can show your menu and overlay will ensure it will be above all the elements rendered on the page.

Upvotes: 1

Related Questions