diff --git a/assets/css/style.css b/assets/css/style.css index a6586ad..ff1ab7b 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -82,6 +82,11 @@ body { color: var(--wtf-nearly-black); } +.primary_nav__mobile_navlist { + display: none; + z-index: 16; +} + .primary_nav__navlist { margin: 0; display: flex; @@ -1222,6 +1227,10 @@ footer { display: flex !important; } + .primary_nav__mobile_navlist { + display: none; + } + .content__inner_box { margin: -0.5rem 1.5rem 0 1.5rem; } @@ -1237,6 +1246,10 @@ footer { display: none; } + .primary_nav__mobile_navlist { + display: none; + } + .primary_nav__navlist { display: flex !important; } @@ -1259,6 +1272,10 @@ footer { display: none; } + .primary_nav__mobile_navlist { + display: none; + } + .primary_nav__navlist { display: flex !important; } @@ -1295,6 +1312,10 @@ footer { display: none; } + .primary_nav__mobile_navlist { + display: none; + } + .primary_nav__navlist { display: flex !important; } @@ -1377,6 +1398,10 @@ footer { display: none; } + .primary_nav__mobile_navlist { + display: none; + } + .primary_nav__navlist { display: flex !important; } @@ -1445,6 +1470,10 @@ footer { display: none; } + .primary_nav__mobile_navlist { + display: none; + } + .primary_nav__navlist { width: 100%; justify-content: space-evenly; @@ -1619,6 +1648,10 @@ footer { margin-right: 1rem; } + .primary_nav__mobile_navlist { + display: none; + } + .primary_nav__navlist { display: flex !important; margin-right: 1.5rem; @@ -1920,9 +1953,13 @@ footer { align-items: center; margin: 2.25rem 0 0 0; } - + .primary_nav__navlist { display: none; + } + + .primary_nav__mobile_navlist { + display: none; position: absolute; top: 6.5rem; right: 0; diff --git a/assets/js/nav_toggle.js b/assets/js/nav_toggle.js index 31d693d..4d9d199 100644 --- a/assets/js/nav_toggle.js +++ b/assets/js/nav_toggle.js @@ -1,9 +1,9 @@ document.getElementsByClassName('primary_nav__toggle')[0].addEventListener('click', function(){ - let nav_list = document.getElementsByClassName('primary_nav__navlist')[0] - if (nav_list.style.display === 'block') { - nav_list.style.display = 'none'; + let mobile_nav_list = document.getElementsByClassName('primary_nav__mobile_navlist')[0] + if (mobile_nav_list.style.display === 'block') { + mobile_nav_list.style.display = 'none'; } else { - nav_list.style.display = 'block'; + mobile_nav_list.style.display = 'block'; } }); diff --git a/databags/navigation.json b/databags/navigation.json index 2f6346b..2b8675a 100644 --- a/databags/navigation.json +++ b/databags/navigation.json @@ -12,7 +12,7 @@ "href": "/aktuelles", "slug": "aktuelles", "visible": true, - "list_childs": false, + "list_childs": true, "items": { "Blog": "/blog", "Podcast": "/podcast" diff --git a/templates/blocks/navigation.html b/templates/blocks/navigation.html index 87f11f6..446927c 100644 --- a/templates/blocks/navigation.html +++ b/templates/blocks/navigation.html @@ -10,29 +10,70 @@ + + +