How to make a toggleable mat-sidenav push also a fixed header in the mat-sidenav-content

0
votes

I'm using the mat-sidenav-container to create the desktop version of my page, but I want to make the mat-sidenav toggleable , which I've already managed to do. The problem now is that I have a fixed header on the mat-sidenav-content, and that part is not being pushed when the mat-sidenav is displayed.

For the mat-sidenav-content I'm using the css grid to divide this section into two parts (the fixed header and the main content)

enter image description here

Here's a stackblitz demo.

Do you have any idea how I can make the mat-sidenav push also the fixed header?

Thanks.

1
csssassangular-materialmat-sidenav

1 Answers

1
votes

You have to remove these styles from .content__header:

height: 12rem;
position: fixed;
left: 0;

and add position: sticky to it. Because of the position: fixed, the block could not be pushed to the side by the sidebar and because of the fixed height, it overflowed when the position: fixed was removed. The height was especially not needed, as you already specified it in your .content class with this: grid-template-rows: 12rem auto;. Changing it to position: sticky makes the header still be there on scroll, but also be pushed to the side. Important is that top: 0 is still there.

The .content__header class should now look like this:

.content__header {
  background-color: #eee;
  width: 100%;
  position: sticky;
  top: 0;
  padding: 0.5rem 1rem;
  z-index: 3;
}