header toggler

Author: codecalm

src/_includes/footer.html

@@ -2,7 +2,7 @@
 <footer class="footer">
 	<div class="container">
 		<div class="row align-items-center flex-row-reverse">
-			<div class="col-auto ml-auto">
+			<div class="col-auto ml-lg-auto">
 				<div class="row align-items-center">
 					<div class="col-auto">
 						<ul class="list-inline list-inline-dots mb-0">

src/_includes/header.html

@@ -1,5 +1,5 @@
 {% assign user = site.data.users[40] %}
-<div class="header py-lg-4">
+<div class="header py-4">
 	<div class="container">
 		<div class="d-flex">
 			<a class="header-brand" href="{{ site.base }}/index.html">
@@ -74,9 +74,8 @@
 				</div>
 			</div>
 
-			<a class="header-toggler d-lg-none" data-toggle="collapse" data-target="#headerMenuCollapse">
+			<a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
 				<span class="header-toggler-icon"></span>
-				zzz
 			</a>
 		</div>
 	</div>

src/_includes/menu.html

@@ -3,7 +3,7 @@
 	{% assign menu_levels = layout.menu | default: page.menu | split: '.' %}
 
 	{% for item in menu %}
-	<li class="nav-item d-block">
+	<li class="nav-item">
 		{% assign index = item[0] %}
 		{% assign data = item[1] %}
 		<a href="{% if data.url %}{% if data.url != '#' %}{{ site.base }}/{% endif %}{{ data.url }}{% else %}javascript:void(0){% endif %}" class="nav-link{% if menu_levels[0] == index %} active{% endif %}{% if data.disabled %} disabled{% endif %}">{% if data.icon %}<i class="{{ data.icon }}"></i>{% endif %} {{ data.name }}{% if data.count %} <span class="badge badge-pill bg-primary text-white ml-2">{{ data.count }}</span>{% endif %}</a>

src/assets/scss/dashboard/_header.scss

@@ -101,4 +101,28 @@
 			border-radius: 50%;
 		}
 	}
+}
+
+.header-toggler {
+	width: 2rem;
+	height: 2rem;
+	position: relative;
+	color: $text-muted;
+
+	&:hover {
+		color: $text-muted-dark;
+	}
+}
+
+.header-toggler-icon {
+	position: absolute;
+	width: 1rem;
+	height: 2px;
+	color: inherit;
+	background: currentColor;
+	border-radius: 3px;
+	top: 50%;
+	left: 50%;
+	margin: -2px 0 0 -.5rem;
+	box-shadow: 0 5px currentColor, 0 -5px currentColor;
 }