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 292 additions and 99 deletions
......@@ -15108,26 +15108,77 @@ body {
#mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
width: 100%;
max-width: 100%;
padding: 0px 10%;
padding: 0px 34px;
margin: auto;
}
#mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
left: -100%;
background-color: #F0F0F0;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu {
margin-top: 0px;
}
.sub-mobile-menu .mega-menu-item {
margin-top: 15px !important;
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link > span.mega-indicator:after,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator:after {
content: "";
width: 20px;
height: 15px;
background-repeat: no-repeat;
background-size: contain;
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>');
display: inline-block;
position: relative;
top: 12px;
}
.sub-mobile-menu .mega-indicator {
margin-top: -50px !important;
position: relative !important;
margin-right: 0px !important;
width: 30px !important;
.back-one-level {
background-color: #EE0000;
position: fixed;
left: 0px;
top: 130px;
width: 40px;
height: 41px;
border: 0px solid #EE0000;
border-radius: 0px 50% 50% 0px;
display: none;
}
.back-one-level span {
color: #fff;
text-indent: -9999px;
display: block;
}
.back-one-level:before {
content: "";
width: 11px;
height: 18px;
background-repeat: no-repeat;
background-size: contain;
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>');
display: inline-block;
position: absolute;
top: 10px;
left: 13px;
}
.is-visible .back-one-level {
display: block !important;
}
.sub-mobile-menu .mega-indicator:after {
margin-right: 0px !important;
.mega-sub-menu .mega-indicator {
display: none !important;
}
.mega-sub-menu .mega-menu-item-has-children > .mega-menu-link > .mega-description-group > .mega-menu-title {
position: relative;
display: inline-block;
}
.mega-sub-menu .mega-menu-item-has-children > .mega-menu-link > .mega-description-group > .mega-menu-title:after {
content: "";
width: 20px;
height: 22px;
background-repeat: no-repeat;
background-size: contain;
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;
display: inline-block;
position: relative;
top: 8px;
right: -10px;
}
#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 {
margin-left: 20px;
......@@ -15142,46 +15193,33 @@ body {
display: block;
border: 0;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
#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 {
width: 100%;
margin: 10px auto 0px auto;
color: #fff;
background-color: #EE0000;
border-radius: 1.25rem;
text-align: center;
text-align: left;
height: 2.5rem;
margin-top: 0rem;
font-size: 18px;
position: relative;
font-family: "PT Sans", sans-serif;
font-weight: 700;
padding-left: 40px;
margin-bottom: 14px;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
width: 100%;
margin: 10px auto 0px auto !important;
color: #fff;
background-color: #EE0000;
border-radius: 1.25rem;
text-align: center !important;
height: 2.5rem;
font-size: 18px;
position: relative;
font-family: "PT Sans", sans-serif;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
width: 100%;
margin: 10px auto 0px auto !important;
color: #fff;
background-color: #EE0000;
border-radius: 1.25rem;
text-align: center !important;
height: 2.5rem;
font-size: 18px;
position: relative;
font-family: "PT Sans", sans-serif;
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
#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 {
background-color: #669999;
}
.sub-menu-wrapper {
background-color: #fff;
background-color: #F0F0F0;
width: 100% !important;
height: 90vh;
padding: 0px 10% !important;
margin: auto !important;
float: none !important;
......@@ -15211,6 +15249,19 @@ body {
.list-wrapper3 ul.mega-sub-menu {
display: block !important;
}
.sub-mobile-menu .mega-sub-menu {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 100vh !important;
transform: translateX(200%) !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
transition: transform 0.5s !important;
background-color: #F0F0F0;
padding: 40px 40px 60px 40px;
}
.list-wrapper2,
.list-wrapper3 {
position: absolute !important;
......@@ -15222,7 +15273,8 @@ body {
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
transition: transform 0.5s !important;
background-color: #fff !important;
background-color: #F0F0F0;
padding: 50px 40px 60px 40px;
}
.list-wrapper2.is-visible,
.list-wrapper3.is-visible {
......@@ -15231,7 +15283,54 @@ body {
.mega-menu-item .list-wrapper:nth-child(1) > ul > li > .sub-menu {
display: none;
}
.mega-sub-menu .mega-menu-item {
margin-top: 14px !important;
}
.mega-menu-title {
color: #000;
font-weight: bold;
font-size: 20px !important;
line-height: 23px !important;
margin-bottom: 5px;
}
.mega-menu-description {
color: #000;
font-style: normal !important;
font-size: 16px !important;
line-height: 20px !important;
}
.list-wrapper3 .mega-sub-menu .mega-menu-item a {
color: #000 !important;
font-style: normal !important;
font-size: 16px !important;
line-height: 20px !important;
}
.list-wrapper3 .mega-sub-menu .mega-menu-item:first-of-type a {
color: #000 !important;
font-weight: bold;
font-size: 20px !important;
line-height: 23px !important;
}
}
#mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-3:after {
content: "×";
font-size: 34px;
font-weight: bold;
color: #fff;
margin: 0 0 0 10px;
line-height: 25px;
}
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-3:after {
content: "\f333";
font-family: dashicons;
font-weight: 500;
font-size: 27px;
color: #fff;
margin: 0px 0 0 6.1px;
line-height: 40px;
}
.site-title {
font-size: 2.1875rem;
line-height: 3.125rem;
......@@ -15270,6 +15369,7 @@ body {
.site-title {
font-size: 20px;
line-height: 24px;
margin-left: 0px;
}
.navbar-brand {
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 @@
autoInitialize(LazyLoad, window.lazyLoadOptions);
}
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>';
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>';
const pageHeader = document.querySelector("#main-nav");
const toggleMenu = pageHeader.querySelector(".mega-toggle-block");
pageHeader.querySelector(".mega-toggle-block");
pageHeader.querySelector(".mega-menu-toggle.mega-menu-open");
const menuWrapper = pageHeader.querySelector("#mega-menu-primary");
menuWrapper.innerHTML = menuWrapper.innerHTML + addstuff;
const level1Links = pageHeader.querySelectorAll("li.mega-menu-item-has-children > a.mega-menu-link");
......@@ -7447,17 +7448,6 @@
const backOneLevelBtns = pageHeader.querySelectorAll(".back-one-level");
const isVisibleClass = "is-visible";
const isActiveClass = "is-active";
toggleMenu.addEventListener("click", function () {
menuWrapper.classList.toggle(isVisibleClass);
if (!this.classList.contains(isVisibleClass)) {
listWrapper2.classList.remove(isVisibleClass);
listWrapper3.classList.remove(isVisibleClass);
const menuLinks = menuWrapper.querySelectorAll("a");
for (const menuLink of menuLinks) {
menuLink.classList.remove(isActiveClass);
}
}
});
for (const level1Link of level1Links) {
level1Link.addEventListener("click", function (e) {
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 @@
html_body_class_timeout = setTimeout(function() {
$("body").removeClass($menu.attr("id") + "-mobile-open");
$("html").removeClass($menu.attr("id") + "-off-canvas-open");
$('.list-wrapper').removeClass('is-visible');
}, plugin.settings.effect_speed_mobile);
$(".mega-toggle-label, .mega-toggle-animated", $toggle_bar).attr("aria-expanded", "false");
......
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>';
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>';
const pageHeader = document.querySelector("#main-nav");
const toggleMenu = pageHeader.querySelector(".mega-toggle-block");
const closeMenu = pageHeader.querySelector(".mega-menu-toggle.mega-menu-open");
const menuWrapper = pageHeader.querySelector("#mega-menu-primary");
menuWrapper.innerHTML =menuWrapper.innerHTML + addstuff;
......@@ -15,17 +16,10 @@ const backOneLevelBtns = pageHeader.querySelectorAll(".back-one-level");
const isVisibleClass = "is-visible";
const isActiveClass = "is-active";
toggleMenu.addEventListener("click", function () {
menuWrapper.classList.toggle(isVisibleClass);
if (!this.classList.contains(isVisibleClass)) {
listWrapper2.classList.remove(isVisibleClass);
listWrapper3.classList.remove(isVisibleClass);
const menuLinks = menuWrapper.querySelectorAll("a");
for (const menuLink of menuLinks) {
menuLink.classList.remove(isActiveClass);
}
}
});
for (const level1Link of level1Links) {
level1Link.addEventListener("click", function (e) {
......
......@@ -39,6 +39,7 @@
.site-title{
font-size: 20px;
line-height: 24px;
margin-left: 0px;
}
.navbar-brand{
......
......@@ -139,35 +139,90 @@
#mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
width: 100%;
max-width: 100%;
padding: 0px 10%;
padding: 0px 34px;
margin: auto;
}
#mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary{
left: -100%;
background-color: #F0F0F0;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu{
margin-top: 0px;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link > span.mega-indicator:after,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator:after{
content:"";
width: 20px;
height: 15px;
background-repeat: no-repeat;
background-size: contain;
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>');
display: inline-block;
position: relative;
top: 12px;
}
.sub-mobile-menu{
.back-one-level{
background-color: #EE0000;
position: fixed;
left: 0px;
top: 130px;
width: 40px;
height: 41px;
border: 0px solid #EE0000;
border-radius: 0px 50% 50% 0px;
display: none;
.mega-menu-item{
margin-top: 15px !important;
span{
color: #fff;
text-indent: -9999px;
display: block;
}
&:before{
content:"";
width: 11px;
height: 18px;
background-repeat: no-repeat;
background-size: contain;
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>');
display: inline-block;
position: absolute;
top: 10px;
left: 13px;
}
.mega-indicator{
margin-top: -50px !important;
position: relative !important;
margin-right: 0px !important;
width: 30px !important;
&:after{
margin-right: 0px !important;
}
.is-visible{
.back-one-level{
display: block !important;
}
}
.mega-sub-menu{
.mega-indicator{
display: none !important;
}
.mega-menu-item-has-children > .mega-menu-link > .mega-description-group > .mega-menu-title{
position: relative;
display: inline-block;
&:after{
content:"";
width: 20px;
height: 22px;
background-repeat: no-repeat;
background-size: contain;
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;
display: inline-block;
position: relative;
top: 8px;
right: -10px;
}
}
}
#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 @@
display: block;
border: 0;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
#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{
width: 100%;
margin: 10px auto 0px auto;
color:#fff;
background-color: #EE0000;
border-radius: 1.25rem;
text-align: center;
text-align: left;
height: 2.5rem;
margin-top: 0rem;
font-size: 18px;
position: relative;
font-family: "PT Sans",sans-serif;
font-weight: 700;
padding-left: 40px;
margin-bottom: 14px;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link{
width: 100%;
margin: 10px auto 0px auto !important;
color:#fff;
background-color: #EE0000;
border-radius: 1.25rem;
text-align: center !important;
height: 2.5rem;
font-size: 18px;
position: relative;
font-family: "PT Sans",sans-serif;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link{
width: 100%;
margin: 10px auto 0px auto !important;
color:#fff;
background-color: #EE0000;
border-radius: 1.25rem;
text-align: center !important;
height: 2.5rem;
font-size: 18px;
position: relative;
font-family: "PT Sans",sans-serif;
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
#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{
background-color: #669999;
}
.sub-menu-wrapper{
background-color: #fff;
background-color: #F0F0F0;
width: 100% !important;
height: 90vh;
padding: 0px 10% !important;
margin: auto !important;
float: none !important;
}
......@@ -261,6 +304,19 @@
display: block !important;
}
}
.sub-mobile-menu .mega-sub-menu{
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 100vh !important;
transform: translateX(200%) !important;
backface-visibility: hidden !important;
transition: transform 0.5s !important;
background-color: #F0F0F0;
padding: 40px 40px 60px 40px;
}
.list-wrapper2,
.list-wrapper3 {
position: absolute !important;
......@@ -271,10 +327,12 @@
transform: translateX(100%) !important;
backface-visibility: hidden !important;
transition: transform 0.5s !important;
background-color: #fff !important;
}
background-color: #F0F0F0;
padding: 50px 40px 60px 40px;
}
//.sub-mobile-menu .mega-sub-menu.is-visible,
.list-wrapper2.is-visible,
.list-wrapper3.is-visible {
transform: none !important;
......@@ -283,5 +341,54 @@
.mega-menu-item .list-wrapper:nth-child(1) > ul > li > .sub-menu{
display: none;
}
.mega-sub-menu .mega-menu-item{
margin-top: 14px !important;
}
.mega-menu-title{
color: #000;
font-weight: bold;
font-size:20px !important;;
line-height: 23px !important;;
margin-bottom: 5px;
}
.mega-menu-description{
color: #000;
font-style: normal !important;
font-size:16px !important;;
line-height: 20px !important;;
}
.list-wrapper3 .mega-sub-menu .mega-menu-item a{
color: #000 !important;
font-style: normal !important;
font-size:16px !important;;
line-height: 20px !important;;
}
.list-wrapper3 .mega-sub-menu .mega-menu-item:first-of-type a{
color: #000 !important;
font-weight: bold;
font-size:20px !important;;
line-height: 23px !important;
}
}
#mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-3:after{
content: "\00d7";
font-size: 34px;
font-weight: bold;
color: #fff;
margin: 0 0 0 10px;
line-height: 25px;
}
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-3:after {
content: "\f333";
font-family: dashicons;
font-weight: 500;
font-size: 27px;
color: #fff;
margin: 0px 0 0 6.1px;
line-height: 40px;
}
......