Skip to content

MSF / msf-climate-hub

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

mobile menu qa 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 2f7aaa7d
Inline Side-by-side
Showing 6 changed files with 64 additions and 46 deletions
......@@ -15098,7 +15098,6 @@ body {
#mega-menu-primary {
padding-top: 20px !important;
padding-bottom: 130px !important;
overflow-x: scroll !important;
height: calc(100vh - 80px) !important;
}
.admin-bar #mega-menu-primary {
......@@ -15108,13 +15107,16 @@ body {
display: none !important;
}
#mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
width: 100%;
max-width: 100%;
width: 100vw;
max-width: 100vw;
padding: 0px 34px;
margin: auto;
left: -100%;
margin-top: 10px;
min-height: 100vh;
background-color: #F0F0F0;
margin-top: 105px;
position: relative;
overflow: hidden !important;
}
#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;
......@@ -15220,15 +15222,14 @@ body {
.sub-menu-wrapper {
background-color: #F0F0F0;
width: 100% !important;
height: 100vh;
height: auto;
padding: 0px 10% !important;
margin: auto !important;
margin-bottom: 200px;
float: none !important;
}
}
@media only screen and (max-width: 1000px) {
#mega-menu-wrap-primary {
width: 30%;
width: 100%;
height: auto;
top: 55px;
right: 0px;
position: absolute;
......@@ -15247,15 +15248,6 @@ body {
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu, #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu.mega-menu-item.mega-toggle-on ul.mega-sub-menu {
display: none !important;
}
.list-wrapper2,
.list-wrapper3 {
max-width: 100%;
overflow-x: hidden;
}
.list-wrapper2 ul.mega-sub-menu,
.list-wrapper3 ul.mega-sub-menu {
display: block !important;
}
.sub-mobile-menu .mega-sub-menu {
position: absolute !important;
top: 0 !important;
......@@ -15275,20 +15267,25 @@ body {
top: 0;
left: 0;
right: 0;
height: auto;
min-height: 100vh;
height: 100%;
min-height: unset;
transform: translateX(100%) !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
transition: transform 0.5s !important;
background-color: #F0F0F0;
padding: 20px 40px 150px 40px;
display: none;
padding: 20px 40px 50px 40px;
max-width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
.list-wrapper2 ul.mega-sub-menu,
.list-wrapper3 ul.mega-sub-menu {
display: block !important;
}
.list-wrapper2.is-visible,
.list-wrapper3.is-visible {
transform: none !important;
display: block;
}
.mega-menu-item .list-wrapper:nth-child(1) > ul > li > .sub-menu {
display: none;
......@@ -17270,7 +17267,7 @@ ul.sf_date_field .sf-datepicker {
}
@media only screen and (max-width: 782px) {
.home-header .search-box .searchandfilter {
width: calc(100% - 40px);
width: calc(100% - 35px);
}
}
.home-header .search-box .searchandfilter ul {
......@@ -17287,6 +17284,11 @@ ul.sf_date_field .sf-datepicker {
display: inline-block;
width: calc(100% - 80px);
}
@media screen and (max-width: 900px) {
.home-header .search-box .sf-field-search {
width: calc(100% - 56px);
}
}
.home-header .search-box .sf-field-search label {
width: 90%;
position: relative;
......@@ -17297,6 +17299,7 @@ ul.sf_date_field .sf-datepicker {
@media screen and (max-width: 900px) {
.home-header .search-box .sf-field-search label {
width: 100%;
margin-left: 5%;
}
}
.home-header .search-box .sf-field-search label:after {
......@@ -17324,6 +17327,11 @@ ul.sf_date_field .sf-datepicker {
.home-header .search-box .sf-field-submit {
display: inline-block !important;
}
@media screen and (max-width: 900px) {
.home-header .search-box .sf-field-submit {
margin-left: 0px;
}
}
.home-header .search-box .sf-field-submit input[name=_sf_submit] {
border-radius: 50%;
padding: 0;
......
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.
......@@ -67,7 +67,7 @@
.searchandfilter{
width: calc(100% - 50px);
@media only screen and (max-width: 782px) {
width: calc(100% - 40px);
width: calc(100% - 35px);
}
display: inline-block;
}
......@@ -85,6 +85,9 @@
.sf-field-search{
display: inline-block;
width: calc(100% - 80px);
@media screen and (max-width: 900px) {
width: calc(100% - 56px);
}
label{
width: 90%;
position: relative;
......@@ -93,6 +96,7 @@
margin-left: 10%;
@media screen and (max-width: 900px) {
width: 100%;
margin-left: 5%;
}
&:after {
content: "";
......@@ -122,6 +126,9 @@
.sf-field-submit{
display: inline-block !important;
@media screen and (max-width: 900px) {
margin-left:0px;
}
input[name="_sf_submit"]{
border-radius: 50%;
padding: 0;
......@@ -141,6 +148,7 @@
@media screen and (max-width: 900px) {
height: 40px;
width:40px;
}
&:hover {
background:#669999;
......
......@@ -130,7 +130,7 @@
#mega-menu-primary{
padding-top: 20px !important;
padding-bottom: 130px !important;
overflow-x: scroll !important;
height: calc(100vh - 80px) !important;
}
.admin-bar #mega-menu-primary{
......@@ -140,13 +140,17 @@
display: none !important;
}
#mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
width: 100%;
max-width: 100%;
width: 100vw;
max-width:100vw;
padding: 0px 34px;
margin: auto;
left: -100%;
margin-top: 10px;
min-height: 100vh;
background-color: #F0F0F0;
margin-top: 105px;
position: relative;
overflow: hidden !important;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu{
......@@ -267,9 +271,9 @@
.sub-menu-wrapper{
background-color: #F0F0F0;
width: 100% !important;
height: 100vh;
height: auto;
padding: 0px 10% !important;
margin: auto !important;
margin-bottom: 200px;
float: none !important;
}
......@@ -281,7 +285,8 @@
@media only screen and (max-width: 1000px) {
#mega-menu-wrap-primary{
width: 30%;
width: 100%;
height: auto;
top: 55px;
right: 0px;
position:absolute;
......@@ -300,14 +305,7 @@
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu, #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu.mega-menu-item.mega-toggle-on ul.mega-sub-menu{
display: none !important;
}
.list-wrapper2,
.list-wrapper3 {
max-width: 100%;
overflow-x: hidden;
ul.mega-sub-menu{
display: block !important;
}
}
.sub-mobile-menu .mega-sub-menu{
position: absolute !important;
top: 0 !important;
......@@ -327,22 +325,26 @@
top: 0 ;
left: 0 ;
right: 0 ;
height: auto;
min-height: 100vh ;
height: 100%;
min-height: unset;
transform: translateX(100%) !important;
backface-visibility: hidden !important;
transition: transform 0.5s !important;
background-color: #F0F0F0;
padding: 20px 40px 150px 40px;
display: none;
padding: 20px 40px 50px 40px;
max-width: 100%;
overflow-y: scroll;
overflow-x: hidden;
ul.mega-sub-menu{
display: block !important;
}
}
//.sub-mobile-menu .mega-sub-menu.is-visible,
.list-wrapper2.is-visible,
.list-wrapper3.is-visible {
transform: none !important;
display: block;
}
.mega-menu-item .list-wrapper:nth-child(1) > ul > li > .sub-menu{
......