diff --git a/packages/stark-ui/assets/styles/_base.scss b/packages/stark-ui/assets/styles/_base.scss
index 2828de3b1f..95acfa72d9 100644
--- a/packages/stark-ui/assets/styles/_base.scss
+++ b/packages/stark-ui/assets/styles/_base.scss
@@ -17,15 +17,28 @@ body {
     margin-bottom: 64px;
   }
 
-  main.stark-main-container {
-    flex: 1 0 auto;
-    align-self: center;
+  .mat-drawer {
+    z-index: 120; /* z-index of header is 110. z-index of mat-drawer should be bigger */
+  }
+  
+  .mat-drawer-content {
+    z-index: initial; // fix safari not showing fixed header
+
+    display: flex;
+    flex-direction: column;
+
+    overflow: auto;
 
-    width: 100%;
-    max-width: $stark-max-content-width;
+    main.stark-main-container {
+      flex: 1 0 auto;
+      align-self: center;
 
-    box-sizing: border-box;
-    padding: 64px 15px;
+      width: 100%;
+      max-width: $stark-max-content-width;
+
+      box-sizing: border-box;
+      padding: 64px 15px;
+    }
   }
 }
 
diff --git a/showcase/src/app/app.component.html b/showcase/src/app/app.component.html
index 9074b57a54..f3e0e729a5 100644
--- a/showcase/src/app/app.component.html
+++ b/showcase/src/app/app.component.html
@@ -1,140 +1,4 @@
 <stark-app-container>
-	<header class="stark-app-header">
-		<div class="stark-header-container">
-			<div class="stark-app-bar">
-				<div class="stark-app-bar-content-left">
-					<div class="stark-actions">
-						<button class="stark-home-button" (click)="goHome()" color="white" mat-icon-button>
-							<mat-icon svgIcon="home"></mat-icon>
-						</button>
-
-						<button color="white" mat-icon-button (click)="toggleMenu()">
-							<mat-icon svgIcon="menu"></mat-icon>
-						</button>
-					</div>
-				</div>
-
-				<div class="stark-app-bar-content-center">
-					<div class="app-logo">
-						<stark-app-logo></stark-app-logo>
-					</div>
-				</div>
-
-				<div class="stark-app-bar-content-right">
-					<div>
-						<div *ngIf="!isMenuModeActive">
-							<stark-app-data mode="dropdown">
-								<div class="summary-slot">
-									<span *ngIf="user" class="label">{{ "SHOWCASE.DEMO.APP_DATA.USER" | translate }}:&nbsp;</span>
-									<span *ngIf="user" class="value">{{ user.username }} ({{ user.roles[0] }})</span>
-									<br />
-									<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.LAST_ACCESS" | translate }}
-										:&nbsp;</span>
-									<span class="value">{{ time }}</span>
-								</div>
-
-								<div class="detail-slot">
-									<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.VERSION" | translate }}:&nbsp;</span>
-									<span class="value">{{ appMetadata.version }}</span>
-									<br />
-									<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.ENVIRONMENT" | translate }}
-										:&nbsp;</span>
-									<span class="value">{{ appMetadata.environment }}</span>
-								</div>
-							</stark-app-data>
-						</div>
-
-						<stark-app-logout></stark-app-logout>
-					</div>
-
-					<div class="stark-app-bar-content-right-center">
-						<div *ngIf="isMenuModeActive">
-							<stark-app-data mode="menu">
-								<div class="detail-slot">
-									<span *ngIf="user" class="label">{{ "SHOWCASE.DEMO.APP_DATA.USER" | translate }}:&nbsp;</span>
-									<span *ngIf="user" class="value">{{ user.username }} ({{ user.roles[0] }})</span>
-									<br />
-									<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.LAST_ACCESS" | translate }}
-										:&nbsp;</span>
-									<span class="value">{{ time }}</span>
-									<br />
-									<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.VERSION" | translate }}:&nbsp;</span>
-									<span class="value">{{ appMetadata.version }}</span>
-									<br />
-									<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.ENVIRONMENT" | translate }}
-										:&nbsp;</span>
-									<span class="value">{{ appMetadata.environment }}</span>
-								</div>
-							</stark-app-data>
-						</div>
-
-						<stark-language-selector color="white"
-												 class="stark-full-width"
-												 mode="dropdown"></stark-language-selector>
-
-						<button color="white" (click)="openLeftSidebar()" mat-icon-button>
-							<mat-icon svgIcon="skip-next"></mat-icon>
-						</button>
-
-						<button color="white" (click)="openRightSidebar()" mat-icon-button>
-							<mat-icon svgIcon="skip-previous"></mat-icon>
-						</button>
-					</div>
-
-					<div class="stark-app-bar-content-right-actions-alt">
-						<stark-route-search direction="left" [menuConfig]="mainMenu"></stark-route-search>
-
-						<a href="https://stark.nbb.be/api-docs/stark-ui/latest/"
-						   target="_blank"
-						   rel="noopener noreferrer">
-							<button mat-mini-fab
-									mat-icon-button
-									color="success"
-									[matTooltip]="'SHOWCASE.ICONS.STARK_UI' | translate">
-								<mat-icon class="header-icon" svgIcon="television-guide"></mat-icon>
-							</button>
-						</a>
-
-						<a href="https://stark.nbb.be/api-docs/stark-core/latest/"
-						   target="_blank"
-						   rel="noopener noreferrer">
-							<button mat-mini-fab
-									mat-icon-button
-									color="primary"
-									[matTooltip]="'SHOWCASE.ICONS.STARK_CORE' | translate">
-								<mat-icon class="header-icon" svgIcon="atom"></mat-icon>
-							</button>
-						</a>
-
-						<a href="https://stark.nbb.be/api-docs/stark-rbac/latest/"
-						   target="_blank"
-						   rel="noopener noreferrer">
-							<button mat-mini-fab
-									mat-icon-button
-									color="alert"
-									[matTooltip]="'SHOWCASE.ICONS.STARK_RBAC' | translate">
-								<mat-icon class="header-icon" svgIcon="shield-lock-outline"></mat-icon>
-							</button>
-						</a>
-
-						<a href="https://github.com/NationalBankBelgium" target="_blank" rel="noopener noreferrer">
-							<button mat-mini-fab
-									mat-icon-button
-									class="github-icon"
-									[matTooltip]="'SHOWCASE.ICONS.GITHUB' | translate">
-								<mat-icon class="custom-icon" svgIcon="github-circle"></mat-icon>
-							</button>
-						</a>
-					</div>
-				</div>
-
-				<div class="stark-app-bar-page-title"></div>
-
-				<stark-message-pane [clearOnNavigation]="true"></stark-message-pane>
-			</div>
-		</div>
-	</header>
-
 	<stark-app-sidebar>
 		<ng-container stark-app-sidenav-menu>
 			<stark-app-logo></stark-app-logo>
@@ -159,6 +23,154 @@
 		</ng-container>
 
 		<ng-container stark-app-sidenav-content>
+			<header class="stark-app-header">
+				<div class="stark-header-container">
+					<div class="stark-app-bar">
+						<div class="stark-app-bar-content-left">
+							<div class="stark-actions">
+								<button class="stark-home-button" (click)="goHome()" color="white" mat-icon-button>
+									<mat-icon svgIcon="home"></mat-icon>
+								</button>
+
+								<button color="white" mat-icon-button (click)="toggleMenu()">
+									<mat-icon svgIcon="menu"></mat-icon>
+								</button>
+							</div>
+						</div>
+
+						<div class="stark-app-bar-content-center">
+							<div class="app-logo">
+								<stark-app-logo></stark-app-logo>
+							</div>
+						</div>
+
+						<div class="stark-app-bar-content-right">
+							<div>
+								<div *ngIf="!isMenuModeActive">
+									<stark-app-data mode="dropdown">
+										<div class="summary-slot">
+											<span *ngIf="user"
+												  class="label">{{ "SHOWCASE.DEMO.APP_DATA.USER" | translate }}
+												:&nbsp;</span>
+											<span *ngIf="user" class="value">{{ user.username }} ({{ user.roles[0] }}
+																								 )</span>
+											<br />
+											<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.LAST_ACCESS" | translate }} :&nbsp;</span>
+											<span class="value">{{ time }}</span>
+										</div>
+
+										<div class="detail-slot">
+											<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.VERSION" | translate }}:&nbsp;</span>
+											<span class="value">{{ appMetadata.version }}</span>
+											<br />
+											<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.ENVIRONMENT" | translate }} :&nbsp;</span>
+											<span class="value">{{ appMetadata.environment }}</span>
+										</div>
+									</stark-app-data>
+								</div>
+
+								<stark-app-logout></stark-app-logout>
+							</div>
+
+							<div class="stark-app-bar-content-right-center">
+								<div *ngIf="isMenuModeActive">
+									<stark-app-data mode="menu">
+										<div class="detail-slot">
+											<span *ngIf="user"
+												  class="label">{{ "SHOWCASE.DEMO.APP_DATA.USER" | translate }}
+												:&nbsp;</span>
+											<span *ngIf="user" class="value">{{ user.username }} ({{ user.roles[0] }}
+																								 )</span>
+											<br />
+											<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.LAST_ACCESS" | translate }} :&nbsp;</span>
+											<span class="value">{{ time }}</span>
+											<br />
+											<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.VERSION" | translate }}:&nbsp;</span>
+											<span class="value">{{ appMetadata.version }}</span>
+											<br />
+											<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.ENVIRONMENT" | translate }} :&nbsp;</span>
+											<span class="value">{{ appMetadata.environment }}</span>
+										</div>
+									</stark-app-data>
+								</div>
+
+								<stark-language-selector color="white"
+														 class="stark-full-width"
+														 mode="dropdown"></stark-language-selector>
+
+								<button color="white" (click)="openLeftSidebar()" mat-icon-button>
+									<mat-icon svgIcon="skip-next"></mat-icon>
+								</button>
+
+								<button color="white" (click)="openRightSidebar()" mat-icon-button>
+									<mat-icon svgIcon="skip-previous"></mat-icon>
+								</button>
+							</div>
+
+							<div class="stark-app-bar-content-right-actions-alt">
+								<stark-route-search direction="left" [menuConfig]="mainMenu"></stark-route-search>
+
+								<a href="https://stark.nbb.be/api-docs/stark-ui/latest/"
+								   target="_blank"
+								   rel="noopener noreferrer">
+									<button
+										mat-mini-fab
+										mat-icon-button
+										color="success"
+										[matTooltip]="'SHOWCASE.ICONS.STARK_UI' | translate"
+									>
+										<mat-icon class="header-icon" svgIcon="television-guide"></mat-icon>
+									</button>
+								</a>
+
+								<a href="https://stark.nbb.be/api-docs/stark-core/latest/"
+								   target="_blank"
+								   rel="noopener noreferrer">
+									<button
+										mat-mini-fab
+										mat-icon-button
+										color="primary"
+										[matTooltip]="'SHOWCASE.ICONS.STARK_CORE' | translate"
+									>
+										<mat-icon class="header-icon" svgIcon="atom"></mat-icon>
+									</button>
+								</a>
+
+								<a href="https://stark.nbb.be/api-docs/stark-rbac/latest/"
+								   target="_blank"
+								   rel="noopener noreferrer">
+									<button
+										mat-mini-fab
+										mat-icon-button
+										color="alert"
+										[matTooltip]="'SHOWCASE.ICONS.STARK_RBAC' | translate"
+									>
+										<mat-icon class="header-icon" svgIcon="shield-lock-outline"></mat-icon>
+									</button>
+								</a>
+
+								<a href="https://github.com/NationalBankBelgium"
+								   target="_blank"
+								   rel="noopener noreferrer">
+									<button
+										mat-mini-fab
+										mat-icon-button
+										class="github-icon"
+										[matTooltip]="'SHOWCASE.ICONS.GITHUB' | translate"
+									>
+										<mat-icon class="custom-icon" svgIcon="github-circle"></mat-icon>
+									</button>
+								</a>
+							</div>
+						</div>
+
+						<div class="stark-app-bar-page-title"></div>
+
+						<stark-message-pane [clearOnNavigation]="true"></stark-message-pane>
+					</div>
+				</div>
+			</header>
+
 			<main class="stark-main-container">
 				<ui-view></ui-view>
 			</main>
diff --git a/starter/src/app/app.component.html b/starter/src/app/app.component.html
index c4563e77c2..a12f9f0eb9 100644
--- a/starter/src/app/app.component.html
+++ b/starter/src/app/app.component.html
@@ -1,71 +1,73 @@
 <stark-app-container>
-	<header class="stark-app-header">
-		<div class="stark-header-container">
-			<div class="stark-app-bar">
-				<div class="stark-app-bar-content-left">
-					<div class="stark-actions">
-						<button class="stark-home-button" (click)="goHome()" color="white" mat-icon-button>
-							<mat-icon svgIcon="home"></mat-icon>
-						</button>
+	<stark-app-sidebar>
+		<ng-container stark-app-sidenav-menu>
+			<stark-app-logo></stark-app-logo>
 
-						<button color="white" mat-icon-button (click)="toggleMenu()">
-							<mat-icon svgIcon="menu"></mat-icon>
-						</button>
-					</div>
-				</div>
+			<stark-app-menu [menuConfig]="mainMenu"></stark-app-menu>
+		</ng-container>
 
-				<div class="stark-app-bar-content-center">
-					<div class="app-logo">
-						<stark-app-logo></stark-app-logo>
-					</div>
-				</div>
+		<ng-container stark-app-sidenav-content>
+			<header class="stark-app-header">
+				<div class="stark-header-container">
+					<div class="stark-app-bar">
+						<div class="stark-app-bar-content-left">
+							<div class="stark-actions">
+								<button class="stark-home-button" (click)="goHome()" color="white" mat-icon-button>
+									<mat-icon svgIcon="home"></mat-icon>
+								</button>
 
-				<div class="stark-app-bar-content-right">
-					<div>
-						<div class="app-data"><p>App Data</p></div>
+								<button color="white" mat-icon-button (click)="toggleMenu()">
+									<mat-icon svgIcon="menu"></mat-icon>
+								</button>
+							</div>
+						</div>
 
-						<button class="app-data-alt"
-								color="white"
-								mat-icon-button
-								[matTooltip]="'STARK.ICONS.APP_DATA' | translate">
-							<mat-icon svgIcon="dots-vertical"></mat-icon>
-						</button>
+						<div class="stark-app-bar-content-center">
+							<div class="app-logo">
+								<stark-app-logo></stark-app-logo>
+							</div>
+						</div>
 
-						<stark-app-logout></stark-app-logout>
-					</div>
+						<div class="stark-app-bar-content-right">
+							<div>
+								<div class="app-data"><p>App Data</p></div>
 
-					<div class="stark-app-bar-content-right-center">
-						<stark-language-selector color="white"
-												 class="stark-full-width"
-												 mode="dropdown"></stark-language-selector>
-					</div>
+								<button
+									class="app-data-alt"
+									color="white"
+									mat-icon-button
+									[matTooltip]="'STARK.ICONS.APP_DATA' | translate"
+								>
+									<mat-icon svgIcon="dots-vertical"></mat-icon>
+								</button>
 
-					<div class="stark-app-bar-content-right-actions-alt">
-						<button mat-mini-fab color="success" [matTooltip]="'STARK.ICONS.ADD_ITEM' | translate">
-							<mat-icon svgIcon="plus"></mat-icon>
-						</button>
+								<stark-app-logout></stark-app-logout>
+							</div>
 
-						<button mat-mini-fab color="primary" [matTooltip]="'STARK.ICONS.SEARCH' | translate">
-							<mat-icon svgIcon="magnify"></mat-icon>
-						</button>
-					</div>
-				</div>
+							<div class="stark-app-bar-content-right-center">
+								<stark-language-selector color="white"
+														 class="stark-full-width"
+														 mode="dropdown"></stark-language-selector>
+							</div>
 
-				<div class="stark-app-bar-page-title">
-					<h1>{{ name }}</h1>
-				</div>
-			</div>
-		</div>
-	</header>
+							<div class="stark-app-bar-content-right-actions-alt">
+								<button mat-mini-fab color="success" [matTooltip]="'STARK.ICONS.ADD_ITEM' | translate">
+									<mat-icon svgIcon="plus"></mat-icon>
+								</button>
 
-	<stark-app-sidebar>
-		<ng-container stark-app-sidenav-menu>
-			<stark-app-logo></stark-app-logo>
+								<button mat-mini-fab color="primary" [matTooltip]="'STARK.ICONS.SEARCH' | translate">
+									<mat-icon svgIcon="magnify"></mat-icon>
+								</button>
+							</div>
+						</div>
 
-			<stark-app-menu [menuConfig]="mainMenu"></stark-app-menu>
-		</ng-container>
+						<div class="stark-app-bar-page-title">
+							<h1>{{ name }}</h1>
+						</div>
+					</div>
+				</div>
+			</header>
 
-		<ng-container stark-app-sidenav-content>
 			<main class="stark-main-container">
 				<ui-view></ui-view>
 			</main>