header top nav toggler

Author: codecalm

src/_includes/header.html

@@ -1,11 +1,12 @@
 {% assign user = site.data.users[40] %}
-<div class="header">
+<div class="header py-lg-4">
 	<div class="container">
 		<div class="d-flex">
-			<a class="navbar-brand" href="{{ site.base }}/index.html">
-				<img src="{{ site.base }}/demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+			<a class="header-brand" href="{{ site.base }}/index.html">
+				<img src="{{ site.base }}/demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
 			</a>
-			<div class="ml-auto d-flex order-lg-2">
+
+			<div class="d-flex order-lg-2 ml-auto">
 				<div class="nav-item d-none d-md-flex">
 					<a href="{{ site.github_url }}" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
 				</div>
@@ -71,16 +72,17 @@
 						</a>
 					</div>
 				</div>
-
-				<div class="nav-item d-flex d-md-none">
-					<a href="#" class="nav-link icon"><i class="fe fe-menu"></i></a>
-				</div>
 			</div>
+
+			<a class="header-toggler d-lg-none" data-toggle="collapse" data-target="#headerMenuCollapse">
+				<span class="header-toggler-icon"></span>
+				zzz
+			</a>
 		</div>
 	</div>
 </div>
 
-<div class="header p-0">
+<div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
 	<div class="container">
 		<div class="row align-items-center">
 			<div class="col-lg-3 ml-auto">

src/assets/scss/dashboard/_header.scss

@@ -1,7 +1,6 @@
 .header {
-	padding-top: 1rem;
-	padding-bottom: 1rem;
-	//height: $header-height;
+	padding-top: .75rem;
+	padding-bottom: .75rem;
 	background: #fff;
 	border-bottom: 1px solid $border-color;
 
@@ -32,7 +31,7 @@
 	border-radius: 50%;
 }
 
-.navbar-brand {
+.header-brand {
 	color: inherit;
 	margin-right: 1rem;
 	font-size: 1.25rem;
@@ -49,7 +48,7 @@
 	}
 }
 
-.navbar-brand-img {
+.header-brand-img {
 	height: 2rem;
 	line-height: 2rem;
 	vertical-align: bottom;
@@ -65,26 +64,6 @@
 	border-radius: 50%;
 }
 
-.header-overlay {
-	position: fixed;
-	top: $header-height;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	background: rgba(26,54,80,0.1);
-	visibility: hidden;
-	opacity: 0;
-	z-index: $zindex-overlay;
-	transition: .6s opacity, .6s visibility;
-	backdrop-filter: blur(1px);
-
-
-	.dropdown-menu.show + & {
-		visibility: visible;
-		opacity: 1;
-	}
-}
-
 //.header-nav {
 //	background: #fff;
 //	border-bottom: 1px solid $border-color;