smaller height of nav

src/app/core/components/header/header.component.scss

@@ -1,6 +1,12 @@
 @import '../../../../styles/variables';
 .big-header {
 	height: $home-nav-height;
+	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
+	position: fixed;
+	top: 0;
+	width: 100%;
+	background: $white;
+	z-index: 2;
 }
 .app-title {
 	color: $white !important;

src/app/features/administration/stepper/stepper.component.html

@@ -54,11 +54,7 @@
 	<div class="step-info">
 		<div class="columns">
 			<div class="column">
-				<a
+				<a class="logo-home-link navbar-item pull-left" routerLink="/" routerLinkActive="active">
-					class="logo-home-link navbar-item pull-left is-hidden-mobile"
-					routerLink="/"
-					routerLinkActive="active"
-				>
 					<img
 						class="stepper-app-logo"
 						*ngIf="environment.appLogo"
@@ -87,15 +83,20 @@
 				</h1>
 			</div>
 			<div class="column has-text-right is-narrow">
-				<app-language-selector class="nav-button"></app-language-selector>
+				<span class="is-visible-smallest-screen" (click)="toggle_mobile_menu()">
-				<button
+					menu burger
-					class="nav-button cancel-button-stepper"
+				</span>
-					(click)="showCancelDialog()"
+				<span class="is-hidden-smallest-screen">
-					id="display_cancel_popup_button"
+					<app-language-selector class="nav-button"></app-language-selector>
-					aria-haspopup="dialog"
+					<button
-				>
+						class="nav-button cancel-button-stepper"
-					{{ 'nav.leave' | translate }}
+						(click)="showCancelDialog()"
-				</button>
+						id="display_cancel_popup_button"
+						aria-haspopup="dialog"
+					>
+						{{ 'nav.leave' | translate }}
+					</button>
+				</span>
 			</div>
 		</div>
 	</div>
@@ -145,4 +146,7 @@
 			</div>
 		</ng-template>
 	</p-dialog>
+	<div id="mobile_menu" *ngIf="display_mobile_menu">
+		coucou le menu mobile
+	</div>
 </section>

src/app/features/administration/stepper/stepper.component.ts

@@ -19,6 +19,7 @@ export class StepperComponent {
 	public step_max: number = 5;
 	public environment = environment;
 	display_cancel_dialog: boolean = false;
+	display_mobile_menu: boolean = false;
 
 	constructor(
 		public pollService: PollService,
@@ -52,4 +53,8 @@ export class StepperComponent {
 		this.display_cancel_dialog = false;
 		this.router.navigate(['/']);
 	}
+
+	toggle_mobile_menu() {
+		this.display_mobile_menu = !this.display_mobile_menu;
+	}
 }

src/app/shared/components/selectors/language-selector/language-selector.component.scss

@@ -1,7 +1,6 @@
 @import './../../../../../styles/variables';
 
 #lang_selector {
-	background: white;
 	max-width: 15em;
 	width: 15em !important;
 	.top {
@@ -9,6 +8,9 @@
 		width: 100%;
 	}
 }
+#lang_button_popup {
+	background: transparent !important;
+}
 
 .language-selector-container {
 	cursor: pointer;
@@ -34,5 +36,5 @@
 	padding: 0 1rem;
 	display: block;
 	line-height: 2rem;
-	height: 4rem;
+	height: $stepper-nav-height;
 }

src/styles/partials/_responsive.scss

@@ -2,6 +2,12 @@
 
 // small screens
 @media (max-width: 487px) {
+	.is-hidden-smallest-screen {
+		display: none;
+	}
+	.is-visible-smallest-screen {
+		display: block;
+	}
 	.big-header {
 		height: $home-nav-height-small;
 	}
@@ -16,6 +22,14 @@
 		}
 	}
 	#creation_stepper {
+		.logo-home-link {
+			padding: 0;
+			margin: 0;
+			img {
+				padding: 0;
+				margin: 0;
+			}
+		}
 		.step-info {
 			height: 4.5rem;
 		}
@@ -30,7 +44,13 @@
 		max-width: 18ch;
 	}
 }
-@media (min-width: 380px) {
+@media (min-width: 488px) {
+	.is-hidden-smallest-screen {
+		display: block;
+	}
+	.is-visible-smallest-screen {
+		display: none;
+	}
 	.feedback-container {
 		//position: fixed;
 	}

src/styles/variables.scss

@@ -79,8 +79,8 @@ $mobile-size: 25rem;
 $header-nav-height: 4.85rem;
 $header-nav-inner-height: 4.5rem;
 $widescreen-width-main-column: 75rem;
-$stepper-nav-height: 4.5rem;
+$stepper-nav-height: 56px;
-$home-nav-height: 4.5rem;
+$home-nav-height: 56px;
 $home-nav-height-small: 3.5rem;
 // datepicker
 $cell-size: 30px;