diff --git a/_docs_theme/partials/header.html b/_docs_theme/partials/header.html
index ad275645..ff95e301 100644
--- a/_docs_theme/partials/header.html
+++ b/_docs_theme/partials/header.html
@@ -1,144 +1,145 @@
\ No newline at end of file
diff --git a/_site/js/mobile-navbar.js b/_site/js/mobile-navbar.js
new file mode 100644
index 00000000..0e2a95a1
--- /dev/null
+++ b/_site/js/mobile-navbar.js
@@ -0,0 +1,25 @@
+const hamburgerMenuIcon = document.getElementById("hamburgerMenuIcon");
+const closeMenuIcon = document.getElementById("closeMenuIcon");
+const overlayMenuClick = document.getElementById("overlay-menu");
+const overlayMenu = document.getElementsByClassName("overlay-menu");
+const mobileMenuWrapper = document.getElementsByClassName(
+ "mobile-menu-wrapper"
+);
+
+closeMenuIcon.addEventListener("click", () => {
+ closeMenu();
+});
+
+overlayMenuClick.addEventListener("click", () => {
+ closeMenu();
+});
+
+hamburgerMenuIcon.addEventListener("click", () => {
+ overlayMenu[0].classList.add("active-overlay");
+ mobileMenuWrapper[0].classList.add("active-menu");
+});
+
+function closeMenu() {
+ overlayMenu[0].classList.remove("active-overlay");
+ mobileMenuWrapper[0].classList.remove("active-menu");
+}
diff --git a/extra_sass/_masthead.scss b/extra_sass/_masthead.scss
index 81a23bff..e37807e2 100644
--- a/extra_sass/_masthead.scss
+++ b/extra_sass/_masthead.scss
@@ -47,14 +47,13 @@
.masthead__logo {
display: flex;
+ margin-left: 12px;
svg {
max-width: 60vw;
}
@include breakpoint($medium-wide) {
- margin-left: 12px;
-
svg {
width: auto;
}
@@ -174,11 +173,16 @@
.overlay-menu {
display: none;
}
-
+
+ #site-nav {
+ margin-right: 24px;
+ }
+
@media (max-width: 1279px) {
#site-nav,
.social-links {
display: none;
+ margin-right: 24px;
}
.hamburgerMenuIcon {
@@ -199,7 +203,7 @@
display: block;
background-color: #fff;
position: fixed;
- right: -50vw;
+ right: -65vw;
top: 0;
height: 100%;
width: 50vw;
diff --git a/extra_sass/_static.scss b/extra_sass/_static.scss
index ce568b2c..69344780 100644
--- a/extra_sass/_static.scss
+++ b/extra_sass/_static.scss
@@ -11,6 +11,10 @@
line-height: 1.5;
margin: 0;
+ .md-header {
+ background: none !important;
+ }
+
a {
text-decoration: none;
@@ -28,7 +32,6 @@
footer {
margin: 1em auto;
- padding: 0 1em 2em;
@include breakpoint($x-large) {
max-width: $x-large;
diff --git a/mkdocs.yml b/mkdocs.yml
index 5e9a821a..2c7f4674 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -18,6 +18,7 @@ extra_javascript:
- js/faq.js
- js/codeTab.js
- js/code-tabs.js
+ - js/mobile-navbar.js
# Theme
theme:
+