Updated nav styles

ehowey · Jul 28, 2019 · d3d220c · d3d220c
1 parent a90d131
commit d3d220c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/components/nav.js b/src/components/nav.js
@@ -23,14 +23,16 @@ const siteNav = props => {
   return (
     <nav
       sx={{
-        gridColumn: ["1 / -1", "2 / 3", null],
-        gridRow: ["2 / 3", "1 / 2", null],
-        justifySelf: ["center", "end", null],
-        alignSelf: "center",
-        height: [props.open ? headOpen() : 0, "auto", null],
+        gridColumn: ["1 / -1", "1 / -1", "2 / 3"],
+        gridRow: ["2 / 3", "2 / 3", "1 / 2"],
+        justifySelf: ["center", "start", "end"],
+        alignItems: "center",
+        justifyContent: ["flex-start", "space-between", "flex-start"],
+        height: [props.open ? headOpen() : 0, "headerHeightTablet", "auto"],
         mt: [props.open ? 2 : 0, 0, null],
         display: "flex",
         flexDirection: ["column", "row", null],
+        width: ["auto", "100%", "auto"],
       }}
       role="navigation"
       aria-label="main-navigation"
@@ -40,8 +42,8 @@ const siteNav = props => {
           display: [props.open ? "flex" : "none", "flex", null],
           mr: ["auto", 3, null],
           ml: "auto",
-          mt: "0.25rem",
           mb: [3, 0, null],
+          order: [2, 2, 1],
 
           a: {
             color: props.open ? "header.iconsOpen" : "header.icons",

diff --git a/src/gatsby-plugin-theme-ui/index.js b/src/gatsby-plugin-theme-ui/index.js
@@ -18,7 +18,7 @@ export default {
       text: "#333333",
       textOpen: "#ffffff",
       icons: "#333333",
-      iconsHover: "primary",
+      iconsHover: "#3273dc",
       iconsOpen: "#ffffff",
     },