From 86df60bd9821516d083d0d51a72d8ca8f03f04a1 Mon Sep 17 00:00:00 2001 From: Manos Date: Tue, 31 Dec 2019 14:22:03 +0200 Subject: [PATCH] Mobile menu fix --- css/styles.css | 39 +++++++++++++++++++++++++-------------- img/close.svg | 1 + index.html | 15 ++------------- 3 files changed, 28 insertions(+), 27 deletions(-) create mode 100644 img/close.svg diff --git a/css/styles.css b/css/styles.css index b203be1..84f77c2 100644 --- a/css/styles.css +++ b/css/styles.css @@ -309,6 +309,7 @@ h1, h2, h3, h4, h5, p { #nav-mini .menu { display: none; box-shadow: 0 0 0.5em black; + background-color: black; } #nav-mini .menu a:hover { @@ -316,7 +317,6 @@ h1, h2, h3, h4, h5, p { } #nav-mini { - background: black; display: block; position: fixed; top: 0; @@ -326,27 +326,38 @@ h1, h2, h3, h4, h5, p { z-index: 1; } - #nav-ctrl + label > img { + #nav-ctrl + label { + width: 3em; + height: 3em; + background-color: white; + background-image: url("../img/menu.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: 50%; + box-shadow: 0 0 0.5em black; + display: block; cursor: pointer; } - #nav-ctrl:checked + label > img { + #nav-ctrl:hover + label { filter: invert(100%); box-shadow: 0 0 0.5em white; - color: gray; + } + + #nav-ctrl:checked + label { + filter: invert(100%); + box-shadow: 0 0 0.5em white; + background-image: url("../img/close.svg"); + background-size: 25%; + } + + #nav-ctrl:checked:hover + label { + filter: invert(0%); + box-shadow: 0 0 0.5em black; } #nav-ctrl:checked + label + .menu { - display: block; - } - - #nav-mini img { - display: block; - background-color: white; - height: 1.75em; - width: 1.75em; - padding: 0.5em; - box-shadow: 0 0 0.5em black; + display: inline-block; } /* About */ diff --git a/img/close.svg b/img/close.svg new file mode 100644 index 0000000..8144622 --- /dev/null +++ b/img/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index 18fdc12..30c9415 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,5 @@ - @@ -14,9 +13,7 @@ Manos Katsomallos - - - -
Manos Katsomallos
@@ -60,7 +55,6 @@
-
@@ -82,7 +76,6 @@
-
@@ -141,7 +134,6 @@
-
@@ -191,7 +183,6 @@
-

Contact

@@ -212,7 +203,6 @@
- -