1- First, double click the scroll container in the layout and change the scroll behavior to "Full width"
2 - Add the content of the header inside a container and give it a class name let's say "top-container"
3- inside your "main.scss" add this styling for the container (use any suitable value for the z-index):
.top-container {
position: fixed;
z-index: 10000;
width: 100%;
}
// This staying to solve the overlapping that happens after the header gets fixed (use your header height)
.mx-scrollcontainer-top {
height: /*Your header height*/;
}
hope that was useful.
To let the footer always be at the bottom even when the page does not have any data, follow these steps:
1- give the scroll container in your layout a class name, let's say "scroll-container-height"
2- in your "main.scss" file add these styles, it includes the styles from the previous answer, all in one class. (make sure to set your header height):
.scroll-container-height {
min-height: 100vh;
display: flex;
flex-direction: column;
.mx-scrollcontainer-top {
height: /*Your header height*/;
.top-container {
position: fixed;
z-index: 10000;
width: 100%;
}
}
.mx-scrollcontainer-middle {
flex-grow: 1;
.mx-scrollcontainer-wrapper {
min-height: unset !important;
}
}
}