Skip to content

MSF / msf-climate-hub

Go to a project
Toggle navigation
Toggle navigation pinning
c479fcff by Jeff Balicki
Options

mobile menu styled 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent ad57d372
Expand all
Inline Side-by-side
Showing 12 changed files with 294 additions and 101 deletions
...@@ -15108,26 +15108,77 @@ body { ...@@ -15108,26 +15108,77 @@ body {
15108 #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary { 15108 #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
15109 width: 100%; 15109 width: 100%;
15110 max-width: 100%; 15110 max-width: 100%;
15111 padding: 0px 10%; 15111 padding: 0px 34px;
15112 margin: auto; 15112 margin: auto;
15113 } 15113 }
15114 #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary { 15114 #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
15115 left: -100%; 15115 left: -100%;
15116 background-color: #F0F0F0;
15116 } 15117 }
15117 #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu { 15118 #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu {
15118 margin-top: 0px; 15119 margin-top: 0px;
15119 } 15120 }
15120 .sub-mobile-menu .mega-menu-item { 15121 #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link > span.mega-indicator:after,
15121 margin-top: 15px !important; 15122 #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator:after {
15123 content: "";
15124 width: 20px;
15125 height: 15px;
15126 background-repeat: no-repeat;
15127 background-size: contain;
15128 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9.095" height="15" viewBox="0 0 9.095 15"><path id="Path_1369" data-name="Path 1369" d="M7.515,3.553c.52.526,1.03,1.048,1.546,1.564q1.857,1.856,3.718,3.708a.834.834,0,0,0,1.232,0c.236-.242.477-.479.716-.718a.817.817,0,0,0,0-1.222L11.379,3.538Q9.758,1.915,8.138.29A.9.9,0,0,0,7.532,0a.864.864,0,0,0-.667.288Q5.614,1.544,4.363,2.8L.956,6.207c-.232.232-.465.463-.7.7A.812.812,0,0,0,.269,8.1l.71.71a.833.833,0,0,0,1.25,0l3.016-3L7.429,3.634Z" transform="translate(9.095) rotate(90)" fill="%23fff"/></svg>');
15129 display: inline-block;
15130 position: relative;
15131 top: 12px;
15132 }
15133 .back-one-level {
15134 background-color: #EE0000;
15135 position: fixed;
15136 left: 0px;
15137 top: 130px;
15138 width: 40px;
15139 height: 41px;
15140 border: 0px solid #EE0000;
15141 border-radius: 0px 50% 50% 0px;
15142 display: none;
15122 } 15143 }
15123 .sub-mobile-menu .mega-indicator { 15144 .back-one-level span {
15124 margin-top: -50px !important; 15145 color: #fff;
15125 position: relative !important; 15146 text-indent: -9999px;
15126 margin-right: 0px !important; 15147 display: block;
15127 width: 30px !important; 15148 }
15149 .back-one-level:before {
15150 content: "";
15151 width: 11px;
15152 height: 18px;
15153 background-repeat: no-repeat;
15154 background-size: contain;
15155 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9.095" height="15" viewBox="0 0 9.095 15"><path id="Path_1291" data-name="Path 1291" d="M7.515,5.543c.52-.526,1.03-1.048,1.546-1.564Q10.918,2.123,12.779.272a.834.834,0,0,1,1.232,0c.236.242.477.479.716.718a.817.817,0,0,1,0,1.222L11.379,5.557Q9.758,7.18,8.138,8.8a.9.9,0,0,1-.606.289.864.864,0,0,1-.667-.288Q5.614,7.551,4.363,6.3L.956,2.889c-.232-.232-.465-.463-.7-.7A.812.812,0,0,1,.269.993l.71-.71a.833.833,0,0,1,1.25,0l3.016,3L7.429,5.462Z" transform="translate(9.095 0) rotate(90)" fill="%23fff"/></svg>');
15156 display: inline-block;
15157 position: absolute;
15158 top: 10px;
15159 left: 13px;
15128 } 15160 }
15129 .sub-mobile-menu .mega-indicator:after { 15161 .is-visible .back-one-level {
15130 margin-right: 0px !important; 15162 display: block !important;
15163 }
15164 .mega-sub-menu .mega-indicator {
15165 display: none !important;
15166 }
15167 .mega-sub-menu .mega-menu-item-has-children > .mega-menu-link > .mega-description-group > .mega-menu-title {
15168 position: relative;
15169 display: inline-block;
15170 }
15171 .mega-sub-menu .mega-menu-item-has-children > .mega-menu-link > .mega-description-group > .mega-menu-title:after {
15172 content: "";
15173 width: 20px;
15174 height: 22px;
15175 background-repeat: no-repeat;
15176 background-size: contain;
15177 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><path id="Path_1369" data-name="Path 1369" d="M7.515,3.553c.52.526,1.03,1.048,1.546,1.564q1.857,1.856,3.718,3.708a.834.834,0,0,0,1.232,0c.236-.242.477-.479.716-.718a.817.817,0,0,0,0-1.222L11.379,3.538Q9.758,1.915,8.138.29A.9.9,0,0,0,7.532,0a.864.864,0,0,0-.667.288Q5.614,1.544,4.363,2.8L.956,6.207c-.232.232-.465.463-.7.7A.812.812,0,0,0,.269,8.1l.71.71a.833.833,0,0,0,1.25,0l3.016-3L7.429,3.634Z" transform="translate(9.095) rotate(90)" fill="%23000"/></svg>') !important;
15178 display: inline-block;
15179 position: relative;
15180 top: 8px;
15181 right: -10px;
15131 } 15182 }
15132 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link { 15183 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link {
15133 margin-left: 20px; 15184 margin-left: 20px;
...@@ -15142,46 +15193,33 @@ body { ...@@ -15142,46 +15193,33 @@ body {
15142 display: block; 15193 display: block;
15143 border: 0; 15194 border: 0;
15144 } 15195 }
15196 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
15197 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
15145 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link { 15198 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
15146 width: 100%; 15199 width: 100%;
15147 margin: 10px auto 0px auto; 15200 margin: 10px auto 0px auto;
15148 color: #fff; 15201 color: #fff;
15149 background-color: #EE0000; 15202 background-color: #EE0000;
15150 border-radius: 1.25rem; 15203 border-radius: 1.25rem;
15151 text-align: center; 15204 text-align: left;
15152 height: 2.5rem; 15205 height: 2.5rem;
15153 margin-top: 0rem; 15206 margin-top: 0rem;
15154 font-size: 18px; 15207 font-size: 18px;
15155 position: relative; 15208 position: relative;
15156 font-family: "PT Sans", sans-serif; 15209 font-family: "PT Sans", sans-serif;
15210 font-weight: 700;
15211 padding-left: 40px;
15212 margin-bottom: 14px;
15157 } 15213 }
15158 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { 15214 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link:hover,
15159 width: 100%; 15215 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
15160 margin: 10px auto 0px auto !important; 15216 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link:hover {
15161 color: #fff; 15217 background-color: #669999;
15162 background-color: #EE0000;
15163 border-radius: 1.25rem;
15164 text-align: center !important;
15165 height: 2.5rem;
15166 font-size: 18px;
15167 position: relative;
15168 font-family: "PT Sans", sans-serif;
15169 }
15170 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
15171 width: 100%;
15172 margin: 10px auto 0px auto !important;
15173 color: #fff;
15174 background-color: #EE0000;
15175 border-radius: 1.25rem;
15176 text-align: center !important;
15177 height: 2.5rem;
15178 font-size: 18px;
15179 position: relative;
15180 font-family: "PT Sans", sans-serif;
15181 } 15218 }
15182 .sub-menu-wrapper { 15219 .sub-menu-wrapper {
15183 background-color: #fff; 15220 background-color: #F0F0F0;
15184 width: 100% !important; 15221 width: 100% !important;
15222 height: 90vh;
15185 padding: 0px 10% !important; 15223 padding: 0px 10% !important;
15186 margin: auto !important; 15224 margin: auto !important;
15187 float: none !important; 15225 float: none !important;
...@@ -15211,6 +15249,19 @@ body { ...@@ -15211,6 +15249,19 @@ body {
15211 .list-wrapper3 ul.mega-sub-menu { 15249 .list-wrapper3 ul.mega-sub-menu {
15212 display: block !important; 15250 display: block !important;
15213 } 15251 }
15252 .sub-mobile-menu .mega-sub-menu {
15253 position: absolute !important;
15254 top: 0 !important;
15255 left: 0 !important;
15256 right: 0 !important;
15257 height: 100vh !important;
15258 transform: translateX(200%) !important;
15259 -webkit-backface-visibility: hidden !important;
15260 backface-visibility: hidden !important;
15261 transition: transform 0.5s !important;
15262 background-color: #F0F0F0;
15263 padding: 40px 40px 60px 40px;
15264 }
15214 .list-wrapper2, 15265 .list-wrapper2,
15215 .list-wrapper3 { 15266 .list-wrapper3 {
15216 position: absolute !important; 15267 position: absolute !important;
...@@ -15222,7 +15273,8 @@ body { ...@@ -15222,7 +15273,8 @@ body {
15222 -webkit-backface-visibility: hidden !important; 15273 -webkit-backface-visibility: hidden !important;
15223 backface-visibility: hidden !important; 15274 backface-visibility: hidden !important;
15224 transition: transform 0.5s !important; 15275 transition: transform 0.5s !important;
15225 background-color: #fff !important; 15276 background-color: #F0F0F0;
15277 padding: 50px 40px 60px 40px;
15226 } 15278 }
15227 .list-wrapper2.is-visible, 15279 .list-wrapper2.is-visible,
15228 .list-wrapper3.is-visible { 15280 .list-wrapper3.is-visible {
...@@ -15231,7 +15283,54 @@ body { ...@@ -15231,7 +15283,54 @@ body {
15231 .mega-menu-item .list-wrapper:nth-child(1) > ul > li > .sub-menu { 15283 .mega-menu-item .list-wrapper:nth-child(1) > ul > li > .sub-menu {
15232 display: none; 15284 display: none;
15233 } 15285 }
15286 .mega-sub-menu .mega-menu-item {
15287 margin-top: 14px !important;
15288 }
15289 .mega-menu-title {
15290 color: #000;
15291 font-weight: bold;
15292 font-size: 20px !important;
15293 line-height: 23px !important;
15294 margin-bottom: 5px;
15295 }
15296 .mega-menu-description {
15297 color: #000;
15298 font-style: normal !important;
15299 font-size: 16px !important;
15300 line-height: 20px !important;
15301 }
15302 .list-wrapper3 .mega-sub-menu .mega-menu-item a {
15303 color: #000 !important;
15304 font-style: normal !important;
15305 font-size: 16px !important;
15306 line-height: 20px !important;
15307 }
15308 .list-wrapper3 .mega-sub-menu .mega-menu-item:first-of-type a {
15309 color: #000 !important;
15310 font-weight: bold;
15311 font-size: 20px !important;
15312 line-height: 23px !important;
15313 }
15234 } 15314 }
15315 #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-3:after {
15316 content: "×";
15317 font-size: 34px;
15318 font-weight: bold;
15319 color: #fff;
15320 margin: 0 0 0 10px;
15321 line-height: 25px;
15322 }
15323
15324 #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-3:after {
15325 content: "\f333";
15326 font-family: dashicons;
15327 font-weight: 500;
15328 font-size: 27px;
15329 color: #fff;
15330 margin: 0px 0 0 6.1px;
15331 line-height: 40px;
15332 }
15333
15235 .site-title { 15334 .site-title {
15236 font-size: 2.1875rem; 15335 font-size: 2.1875rem;
15237 line-height: 3.125rem; 15336 line-height: 3.125rem;
...@@ -15270,6 +15369,7 @@ body { ...@@ -15270,6 +15369,7 @@ body {
15270 .site-title { 15369 .site-title {
15271 font-size: 20px; 15370 font-size: 20px;
15272 line-height: 24px; 15371 line-height: 24px;
15372 margin-left: 0px;
15273 } 15373 }
15274 .navbar-brand { 15374 .navbar-brand {
15275 width: 100px; 15375 width: 100px;
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -7434,9 +7434,10 @@ ...@@ -7434,9 +7434,10 @@
7434 autoInitialize(LazyLoad, window.lazyLoadOptions); 7434 autoInitialize(LazyLoad, window.lazyLoadOptions);
7435 } 7435 }
7436 7436
7437 var addstuff = '<div class="list-wrapper2 list-wrapper"><button type="button" class="back-one-level"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg><span>Back</span></button><div class="sub-menu-wrapper"></div></div><div class="list-wrapper3 list-wrapper"><button type="button" class="back-one-level"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg><span>Back</span></button><div class="sub-menu-wrapper"></div></div>'; 7437 var addstuff = '<div class="list-wrapper2 list-wrapper"><button type="button" class="back-one-level"><span>Back</span></button><div class="sub-menu-wrapper"></div></div><div class="list-wrapper3 list-wrapper"><button type="button" class="back-one-level"><span>Back</span></button><div class="sub-menu-wrapper"></div></div>';
7438 const pageHeader = document.querySelector("#main-nav"); 7438 const pageHeader = document.querySelector("#main-nav");
7439 const toggleMenu = pageHeader.querySelector(".mega-toggle-block"); 7439 pageHeader.querySelector(".mega-toggle-block");
7440 pageHeader.querySelector(".mega-menu-toggle.mega-menu-open");
7440 const menuWrapper = pageHeader.querySelector("#mega-menu-primary"); 7441 const menuWrapper = pageHeader.querySelector("#mega-menu-primary");
7441 menuWrapper.innerHTML = menuWrapper.innerHTML + addstuff; 7442 menuWrapper.innerHTML = menuWrapper.innerHTML + addstuff;
7442 const level1Links = pageHeader.querySelectorAll("li.mega-menu-item-has-children > a.mega-menu-link"); 7443 const level1Links = pageHeader.querySelectorAll("li.mega-menu-item-has-children > a.mega-menu-link");
...@@ -7447,17 +7448,6 @@ ...@@ -7447,17 +7448,6 @@
7447 const backOneLevelBtns = pageHeader.querySelectorAll(".back-one-level"); 7448 const backOneLevelBtns = pageHeader.querySelectorAll(".back-one-level");
7448 const isVisibleClass = "is-visible"; 7449 const isVisibleClass = "is-visible";
7449 const isActiveClass = "is-active"; 7450 const isActiveClass = "is-active";
7450 toggleMenu.addEventListener("click", function () {
7451 menuWrapper.classList.toggle(isVisibleClass);
7452 if (!this.classList.contains(isVisibleClass)) {
7453 listWrapper2.classList.remove(isVisibleClass);
7454 listWrapper3.classList.remove(isVisibleClass);
7455 const menuLinks = menuWrapper.querySelectorAll("a");
7456 for (const menuLink of menuLinks) {
7457 menuLink.classList.remove(isActiveClass);
7458 }
7459 }
7460 });
7461 for (const level1Link of level1Links) { 7451 for (const level1Link of level1Links) {
7462 level1Link.addEventListener("click", function (e) { 7452 level1Link.addEventListener("click", function (e) {
7463 const siblingList = level1Link.nextElementSibling; 7453 const siblingList = level1Link.nextElementSibling;
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -634,6 +634,7 @@ ...@@ -634,6 +634,7 @@
634 html_body_class_timeout = setTimeout(function() { 634 html_body_class_timeout = setTimeout(function() {
635 $("body").removeClass($menu.attr("id") + "-mobile-open"); 635 $("body").removeClass($menu.attr("id") + "-mobile-open");
636 $("html").removeClass($menu.attr("id") + "-off-canvas-open"); 636 $("html").removeClass($menu.attr("id") + "-off-canvas-open");
637 $('.list-wrapper').removeClass('is-visible');
637 }, plugin.settings.effect_speed_mobile); 638 }, plugin.settings.effect_speed_mobile);
638 639
639 $(".mega-toggle-label, .mega-toggle-animated", $toggle_bar).attr("aria-expanded", "false"); 640 $(".mega-toggle-label, .mega-toggle-animated", $toggle_bar).attr("aria-expanded", "false");
......
1 1
2 var addstuff = '<div class="list-wrapper2 list-wrapper"><button type="button" class="back-one-level"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg><span>Back</span></button><div class="sub-menu-wrapper"></div></div><div class="list-wrapper3 list-wrapper"><button type="button" class="back-one-level"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg><span>Back</span></button><div class="sub-menu-wrapper"></div></div>'; 2 var addstuff = '<div class="list-wrapper2 list-wrapper"><button type="button" class="back-one-level"><span>Back</span></button><div class="sub-menu-wrapper"></div></div><div class="list-wrapper3 list-wrapper"><button type="button" class="back-one-level"><span>Back</span></button><div class="sub-menu-wrapper"></div></div>';
3 3
4 const pageHeader = document.querySelector("#main-nav"); 4 const pageHeader = document.querySelector("#main-nav");
5 const toggleMenu = pageHeader.querySelector(".mega-toggle-block"); 5 const toggleMenu = pageHeader.querySelector(".mega-toggle-block");
6 const closeMenu = pageHeader.querySelector(".mega-menu-toggle.mega-menu-open");
6 const menuWrapper = pageHeader.querySelector("#mega-menu-primary"); 7 const menuWrapper = pageHeader.querySelector("#mega-menu-primary");
7 menuWrapper.innerHTML =menuWrapper.innerHTML + addstuff; 8 menuWrapper.innerHTML =menuWrapper.innerHTML + addstuff;
8 9
...@@ -15,17 +16,10 @@ const backOneLevelBtns = pageHeader.querySelectorAll(".back-one-level"); ...@@ -15,17 +16,10 @@ const backOneLevelBtns = pageHeader.querySelectorAll(".back-one-level");
15 const isVisibleClass = "is-visible"; 16 const isVisibleClass = "is-visible";
16 const isActiveClass = "is-active"; 17 const isActiveClass = "is-active";
17 18
18 toggleMenu.addEventListener("click", function () { 19
19 menuWrapper.classList.toggle(isVisibleClass); 20
20 if (!this.classList.contains(isVisibleClass)) { 21
21 listWrapper2.classList.remove(isVisibleClass); 22
22 listWrapper3.classList.remove(isVisibleClass);
23 const menuLinks = menuWrapper.querySelectorAll("a");
24 for (const menuLink of menuLinks) {
25 menuLink.classList.remove(isActiveClass);
26 }
27 }
28 });
29 23
30 for (const level1Link of level1Links) { 24 for (const level1Link of level1Links) {
31 level1Link.addEventListener("click", function (e) { 25 level1Link.addEventListener("click", function (e) {
......
...@@ -39,6 +39,7 @@ ...@@ -39,6 +39,7 @@
39 .site-title{ 39 .site-title{
40 font-size: 20px; 40 font-size: 20px;
41 line-height: 24px; 41 line-height: 24px;
42 margin-left: 0px;
42 43
43 } 44 }
44 .navbar-brand{ 45 .navbar-brand{
......
...@@ -139,35 +139,90 @@ ...@@ -139,35 +139,90 @@
139 #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary { 139 #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
140 width: 100%; 140 width: 100%;
141 max-width: 100%; 141 max-width: 100%;
142 padding: 0px 10%; 142 padding: 0px 34px;
143 margin: auto; 143 margin: auto;
144 } 144 }
145 145
146 #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary{ 146 #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary{
147 left: -100%; 147 left: -100%;
148 background-color: #F0F0F0;
148 149
149 } 150 }
150 #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu{ 151 #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu{
151 margin-top: 0px; 152 margin-top: 0px;
152 } 153 }
154 #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link > span.mega-indicator:after,
155 #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator:after{
156 content:"";
157 width: 20px;
158 height: 15px;
159 background-repeat: no-repeat;
160 background-size: contain;
161 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9.095" height="15" viewBox="0 0 9.095 15"><path id="Path_1369" data-name="Path 1369" d="M7.515,3.553c.52.526,1.03,1.048,1.546,1.564q1.857,1.856,3.718,3.708a.834.834,0,0,0,1.232,0c.236-.242.477-.479.716-.718a.817.817,0,0,0,0-1.222L11.379,3.538Q9.758,1.915,8.138.29A.9.9,0,0,0,7.532,0a.864.864,0,0,0-.667.288Q5.614,1.544,4.363,2.8L.956,6.207c-.232.232-.465.463-.7.7A.812.812,0,0,0,.269,8.1l.71.71a.833.833,0,0,0,1.25,0l3.016-3L7.429,3.634Z" transform="translate(9.095) rotate(90)" fill="%23fff"/></svg>');
162 display: inline-block;
163 position: relative;
164 top: 12px;
165 }
153 166
154 .sub-mobile-menu{ 167 .back-one-level{
168 background-color: #EE0000;
169 position: fixed;
170 left: 0px;
171 top: 130px;
172 width: 40px;
173 height: 41px;
174 border: 0px solid #EE0000;
175 border-radius: 0px 50% 50% 0px;
176 display: none;
155 177
156 .mega-menu-item{ 178 span{
157 margin-top: 15px !important; 179 color: #fff;
158 } 180 text-indent: -9999px;
181 display: block;
182 }
183 &:before{
184 content:"";
185 width: 11px;
186 height: 18px;
187 background-repeat: no-repeat;
188 background-size: contain;
189 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9.095" height="15" viewBox="0 0 9.095 15"><path id="Path_1291" data-name="Path 1291" d="M7.515,5.543c.52-.526,1.03-1.048,1.546-1.564Q10.918,2.123,12.779.272a.834.834,0,0,1,1.232,0c.236.242.477.479.716.718a.817.817,0,0,1,0,1.222L11.379,5.557Q9.758,7.18,8.138,8.8a.9.9,0,0,1-.606.289.864.864,0,0,1-.667-.288Q5.614,7.551,4.363,6.3L.956,2.889c-.232-.232-.465-.463-.7-.7A.812.812,0,0,1,.269.993l.71-.71a.833.833,0,0,1,1.25,0l3.016,3L7.429,5.462Z" transform="translate(9.095 0) rotate(90)" fill="%23fff"/></svg>');
190 display: inline-block;
191 position: absolute;
192 top: 10px;
193 left: 13px;
194 }
195
196 }
197 .is-visible{
198 .back-one-level{
199 display: block !important;
200 }
201 }
202 .mega-sub-menu{
159 203
160 .mega-indicator{ 204 .mega-indicator{
161 margin-top: -50px !important; 205 display: none !important;
162 position: relative !important; 206
163 margin-right: 0px !important; 207 }
164 width: 30px !important; 208 .mega-menu-item-has-children > .mega-menu-link > .mega-description-group > .mega-menu-title{
209
210 position: relative;
211 display: inline-block;
165 &:after{ 212 &:after{
166 margin-right: 0px !important; 213 content:"";
214 width: 20px;
215 height: 22px;
216 background-repeat: no-repeat;
217 background-size: contain;
218 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><path id="Path_1369" data-name="Path 1369" d="M7.515,3.553c.52.526,1.03,1.048,1.546,1.564q1.857,1.856,3.718,3.708a.834.834,0,0,0,1.232,0c.236-.242.477-.479.716-.718a.817.817,0,0,0,0-1.222L11.379,3.538Q9.758,1.915,8.138.29A.9.9,0,0,0,7.532,0a.864.864,0,0,0-.667.288Q5.614,1.544,4.363,2.8L.956,6.207c-.232.232-.465.463-.7.7A.812.812,0,0,0,.269,8.1l.71.71a.833.833,0,0,0,1.25,0l3.016-3L7.429,3.634Z" transform="translate(9.095) rotate(90)" fill="%23000"/></svg>') !important;
219 display: inline-block;
220 position: relative;
221 top: 8px;
222 right: -10px;
167 } 223 }
168 }
169
170 224
225 }
171 } 226 }
172 227
173 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link { 228 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link {
...@@ -183,51 +238,39 @@ ...@@ -183,51 +238,39 @@
183 display: block; 238 display: block;
184 border: 0; 239 border: 0;
185 } 240 }
241 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
242 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
186 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link{ 243 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link{
187 width: 100%; 244 width: 100%;
188 margin: 10px auto 0px auto; 245 margin: 10px auto 0px auto;
189 color:#fff; 246 color:#fff;
190 background-color: #EE0000; 247 background-color: #EE0000;
191 border-radius: 1.25rem; 248 border-radius: 1.25rem;
192 text-align: center; 249 text-align: left;
193 height: 2.5rem; 250 height: 2.5rem;
194 margin-top: 0rem; 251 margin-top: 0rem;
195 font-size: 18px; 252 font-size: 18px;
196 position: relative; 253 position: relative;
197 font-family: "PT Sans",sans-serif; 254 font-family: "PT Sans",sans-serif;
255 font-weight: 700;
256 padding-left: 40px;
257 margin-bottom: 14px;
198 } 258 }
199 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link{ 259 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link:hover,
200 width: 100%; 260 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
201 margin: 10px auto 0px auto !important; 261 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link:hover{
202 color:#fff; 262 background-color: #669999;
203 background-color: #EE0000;
204 border-radius: 1.25rem;
205 text-align: center !important;
206 height: 2.5rem;
207 font-size: 18px;
208 position: relative;
209 font-family: "PT Sans",sans-serif;
210 }
211 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link{
212 width: 100%;
213 margin: 10px auto 0px auto !important;
214 color:#fff;
215 background-color: #EE0000;
216 border-radius: 1.25rem;
217 text-align: center !important;
218 height: 2.5rem;
219 font-size: 18px;
220 position: relative;
221 font-family: "PT Sans",sans-serif;
222 } 263 }
223 264
224 265
225 .sub-menu-wrapper{ 266 .sub-menu-wrapper{
226 background-color: #fff; 267 background-color: #F0F0F0;
227 width: 100% !important; 268 width: 100% !important;
269 height: 90vh;
228 padding: 0px 10% !important; 270 padding: 0px 10% !important;
229 margin: auto !important; 271 margin: auto !important;
230 float: none !important; 272 float: none !important;
273
231 } 274 }
232 275
233 276
...@@ -261,6 +304,19 @@ ...@@ -261,6 +304,19 @@
261 display: block !important; 304 display: block !important;
262 } 305 }
263 } 306 }
307 .sub-mobile-menu .mega-sub-menu{
308 position: absolute !important;
309 top: 0 !important;
310 left: 0 !important;
311 right: 0 !important;
312 height: 100vh !important;
313 transform: translateX(200%) !important;
314 backface-visibility: hidden !important;
315 transition: transform 0.5s !important;
316 background-color: #F0F0F0;
317 padding: 40px 40px 60px 40px;
318 }
319
264 .list-wrapper2, 320 .list-wrapper2,
265 .list-wrapper3 { 321 .list-wrapper3 {
266 position: absolute !important; 322 position: absolute !important;
...@@ -271,10 +327,12 @@ ...@@ -271,10 +327,12 @@
271 transform: translateX(100%) !important; 327 transform: translateX(100%) !important;
272 backface-visibility: hidden !important; 328 backface-visibility: hidden !important;
273 transition: transform 0.5s !important; 329 transition: transform 0.5s !important;
274 background-color: #fff !important; 330 background-color: #F0F0F0;
331 padding: 50px 40px 60px 40px;
332
275 } 333 }
276 334
277 335 //.sub-mobile-menu .mega-sub-menu.is-visible,
278 .list-wrapper2.is-visible, 336 .list-wrapper2.is-visible,
279 .list-wrapper3.is-visible { 337 .list-wrapper3.is-visible {
280 transform: none !important; 338 transform: none !important;
...@@ -283,5 +341,54 @@ ...@@ -283,5 +341,54 @@
283 .mega-menu-item .list-wrapper:nth-child(1) > ul > li > .sub-menu{ 341 .mega-menu-item .list-wrapper:nth-child(1) > ul > li > .sub-menu{
284 display: none; 342 display: none;
285 } 343 }
344 .mega-sub-menu .mega-menu-item{
345 margin-top: 14px !important;
346 }
347 .mega-menu-title{
348 color: #000;
349 font-weight: bold;
350 font-size:20px !important;;
351 line-height: 23px !important;;
352 margin-bottom: 5px;
353 }
354 .mega-menu-description{
355 color: #000;
356 font-style: normal !important;
357 font-size:16px !important;;
358 line-height: 20px !important;;
359 }
360
361 .list-wrapper3 .mega-sub-menu .mega-menu-item a{
362 color: #000 !important;
363 font-style: normal !important;
364 font-size:16px !important;;
365 line-height: 20px !important;;
366
367 }
368 .list-wrapper3 .mega-sub-menu .mega-menu-item:first-of-type a{
369 color: #000 !important;
370 font-weight: bold;
371 font-size:20px !important;;
372 line-height: 23px !important;
373 }
374
375 }
376
377 #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-3:after{
378 content: "\00d7";
379 font-size: 34px;
380 font-weight: bold;
381 color: #fff;
382 margin: 0 0 0 10px;
383 line-height: 25px;
384 }
385 #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-3:after {
386 content: "\f333";
387 font-family: dashicons;
388 font-weight: 500;
389 font-size: 27px;
390 color: #fff;
391 margin: 0px 0 0 6.1px;
392 line-height: 40px;
393 }
286 394
287 }
...\ No newline at end of file ...\ No newline at end of file
......