diff --git a/src/css/layout/_nav.scss b/src/css/layout/_nav.scss index 0ff5c40..1426610 100644 --- a/src/css/layout/_nav.scss +++ b/src/css/layout/_nav.scss @@ -19,13 +19,22 @@ margin: auto; line-height: 11px; - > #menuToggle { + > a > #logo > img { @include vendor('transition', ( - 'padding #{_duration(transition)} ease', + 'height #{_duration(transition)} ease', + 'left #{_duration(transition)} ease', )); + position: absolute; + cursor: pointer; + height: 80px; + padding: 10px 23.1px; + left: calc(50% - 40px); + } + + > #menuToggle { display: inline-block; cursor: pointer; - padding: calc(47px/2); + padding: 23.5px 18.5px; > span { &.bar { @@ -36,7 +45,6 @@ 'transform #{_duration(transition)} ease', 'transform-origin #{_duration(transition)} ease', 'width #{_duration(transition)} ease', - 'margin #{_duration(transition)} ease', )); } @@ -81,18 +89,27 @@ @include breakpoint('<=medium') { height: 60px; - > #wrapper > #menuToggle { - padding: calc(35px/2); + > #wrapper { - > span { - &.bar1 { - width: 22px; - @include vendor('transform-origin', '22px 1.5px'); - } + > a > #logo > img { + height: 60px; + padding: 7.5px 17.3px; + left: calc(50% - 30px); + } - &.bar2 { - width: 32px; - margin: 8px 0; + > #menuToggle { + padding: 17.5px 14px; + + > span { + &.bar1 { + width: 22px; + @include vendor('transform-origin', '22px 1.5px'); + } + + &.bar2 { + width: 32px; + margin: 8px 0; + } } } } diff --git a/src/index.html b/src/index.html index 63d16b4..667a9f0 100644 --- a/src/index.html +++ b/src/index.html @@ -53,15 +53,22 @@ + + + + + + +
-
diff --git a/src/js/main.js b/src/js/main.js index c13eca6..9971d2e 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,6 +1,7 @@ -//toggle menu burger animation -document.getElementById("menuToggle").addEventListener("click", menuToggle); +//toggle menu burger animation and menu +document.getElementById("menuToggle").addEventListener("mousedown", menuToggle); function menuToggle() { + document.getElementById("menu").classList.toggle("show"); //shows menu var bars = document.getElementsByClassName('bar'); for (var i = 0; i < bars.length; i++) { bars[i].classList.toggle('active');