From c52685b9bcefe91c07b8e7ff48cc7319d5cc85ce Mon Sep 17 00:00:00 2001
From: Dominic Masters <dominic@domsplace.com>
Date: Fri, 23 Feb 2018 22:30:53 +1100
Subject: [PATCH] Styled nav on smaller screens
---
public/styles/components/_navbar.scss | 28 +++++++++++++++++++--------
public/styles/index.scss | 1 +
2 files changed, 21 insertions(+), 8 deletions(-)
diff --git a/public/styles/components/_navbar.scss b/public/styles/components/_navbar.scss
index deafe63..5dcd99e 100644
--- a/public/styles/components/_navbar.scss
+++ b/public/styles/components/_navbar.scss
@@ -3,26 +3,38 @@
* Styles for Navbar
*
* Dependencies:
+ * styles/settings/responsive.scss
* styles/tools/_box-shadow.scss
+ * styles/tools/_responsive.scss
*
* Version:
* 1.0.0 - 2018/02/23
*/
$c-navbar--z-index: 100;
.c-navbar {
- width: 90%;
position: fixed;
- top:3em;
+ top: 0;
left: 0;
+ width: 100%;
background: white;
z-index: $c-navbar--z-index;
- left: 1%;
-
- @include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5));
}
-
-
.c-navbar__menu-button {
- font-size: 2em;
+ font-size: 1.5em;
padding: 0.5em 0.75em;
}
+
+@include t-media-query($s-xsmall-up) {
+ .c-navbar__menu-button {
+ font-size: 2em;
+ }
+}
+
+@include t-media-query($s-small-up) {
+ .c-navbar {
+ width: 90%;
+ top:3em;
+ left: 1%;
+ @include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5));
+ }
+}
diff --git a/public/styles/index.scss b/public/styles/index.scss
index fe03508..937a192 100644
--- a/public/styles/index.scss
+++ b/public/styles/index.scss
@@ -15,6 +15,7 @@
//Tools
@import './tools/_box-shadow.scss';
@import './tools/_gradients.scss';
+@import './tools/_responsive.scss';
//Resets
@import './../../node_modules/normalize.css/normalize.css';