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 { ...@@ -15098,7 +15098,6 @@ body {
15098 #mega-menu-primary { 15098 #mega-menu-primary {
15099 padding-top: 20px !important; 15099 padding-top: 20px !important;
15100 padding-bottom: 130px !important; 15100 padding-bottom: 130px !important;
15101 overflow-x: scroll !important;
15102 height: calc(100vh - 80px) !important; 15101 height: calc(100vh - 80px) !important;
15103 } 15102 }
15104 .admin-bar #mega-menu-primary { 15103 .admin-bar #mega-menu-primary {
...@@ -15108,13 +15107,16 @@ body { ...@@ -15108,13 +15107,16 @@ body {
15108 display: none !important; 15107 display: none !important;
15109 } 15108 }
15110 #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary { 15109 #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
15111 width: 100%; 15110 width: 100vw;
15112 max-width: 100%; 15111 max-width: 100vw;
15113 padding: 0px 34px; 15112 padding: 0px 34px;
15114 margin: auto; 15113 margin: auto;
15115 left: -100%; 15114 left: -100%;
15115 margin-top: 10px;
15116 min-height: 100vh;
15116 background-color: #F0F0F0; 15117 background-color: #F0F0F0;
15117 margin-top: 105px; 15118 position: relative;
15119 overflow: hidden !important;
15118 } 15120 }
15119 #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu { 15121 #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu {
15120 margin-top: 0px; 15122 margin-top: 0px;
...@@ -15220,15 +15222,14 @@ body { ...@@ -15220,15 +15222,14 @@ body {
15220 .sub-menu-wrapper { 15222 .sub-menu-wrapper {
15221 background-color: #F0F0F0; 15223 background-color: #F0F0F0;
15222 width: 100% !important; 15224 width: 100% !important;
15223 height: 100vh; 15225 height: auto;
15224 padding: 0px 10% !important; 15226 padding: 0px 10% !important;
15225 margin: auto !important; 15227 margin-bottom: 200px;
15226 float: none !important; 15228 float: none !important;
15227 } 15229 }
15228 }
15229 @media only screen and (max-width: 1000px) {
15230 #mega-menu-wrap-primary { 15230 #mega-menu-wrap-primary {
15231 width: 30%; 15231 width: 100%;
15232 height: auto;
15232 top: 55px; 15233 top: 55px;
15233 right: 0px; 15234 right: 0px;
15234 position: absolute; 15235 position: absolute;
...@@ -15247,15 +15248,6 @@ body { ...@@ -15247,15 +15248,6 @@ body {
15247 #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 { 15248 #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 {
15248 display: none !important; 15249 display: none !important;
15249 } 15250 }
15250 .list-wrapper2,
15251 .list-wrapper3 {
15252 max-width: 100%;
15253 overflow-x: hidden;
15254 }
15255 .list-wrapper2 ul.mega-sub-menu,
15256 .list-wrapper3 ul.mega-sub-menu {
15257 display: block !important;
15258 }
15259 .sub-mobile-menu .mega-sub-menu { 15251 .sub-mobile-menu .mega-sub-menu {
15260 position: absolute !important; 15252 position: absolute !important;
15261 top: 0 !important; 15253 top: 0 !important;
...@@ -15275,20 +15267,25 @@ body { ...@@ -15275,20 +15267,25 @@ body {
15275 top: 0; 15267 top: 0;
15276 left: 0; 15268 left: 0;
15277 right: 0; 15269 right: 0;
15278 height: auto; 15270 height: 100%;
15279 min-height: 100vh; 15271 min-height: unset;
15280 transform: translateX(100%) !important; 15272 transform: translateX(100%) !important;
15281 -webkit-backface-visibility: hidden !important; 15273 -webkit-backface-visibility: hidden !important;
15282 backface-visibility: hidden !important; 15274 backface-visibility: hidden !important;
15283 transition: transform 0.5s !important; 15275 transition: transform 0.5s !important;
15284 background-color: #F0F0F0; 15276 background-color: #F0F0F0;
15285 padding: 20px 40px 150px 40px; 15277 padding: 20px 40px 50px 40px;
15286 display: none; 15278 max-width: 100%;
15279 overflow-y: scroll;
15280 overflow-x: hidden;
15281 }
15282 .list-wrapper2 ul.mega-sub-menu,
15283 .list-wrapper3 ul.mega-sub-menu {
15284 display: block !important;
15287 } 15285 }
15288 .list-wrapper2.is-visible, 15286 .list-wrapper2.is-visible,
15289 .list-wrapper3.is-visible { 15287 .list-wrapper3.is-visible {
15290 transform: none !important; 15288 transform: none !important;
15291 display: block;
15292 } 15289 }
15293 .mega-menu-item .list-wrapper:nth-child(1) > ul > li > .sub-menu { 15290 .mega-menu-item .list-wrapper:nth-child(1) > ul > li > .sub-menu {
15294 display: none; 15291 display: none;
...@@ -17270,7 +17267,7 @@ ul.sf_date_field .sf-datepicker { ...@@ -17270,7 +17267,7 @@ ul.sf_date_field .sf-datepicker {
17270 } 17267 }
17271 @media only screen and (max-width: 782px) { 17268 @media only screen and (max-width: 782px) {
17272 .home-header .search-box .searchandfilter { 17269 .home-header .search-box .searchandfilter {
17273 width: calc(100% - 40px); 17270 width: calc(100% - 35px);
17274 } 17271 }
17275 } 17272 }
17276 .home-header .search-box .searchandfilter ul { 17273 .home-header .search-box .searchandfilter ul {
...@@ -17287,6 +17284,11 @@ ul.sf_date_field .sf-datepicker { ...@@ -17287,6 +17284,11 @@ ul.sf_date_field .sf-datepicker {
17287 display: inline-block; 17284 display: inline-block;
17288 width: calc(100% - 80px); 17285 width: calc(100% - 80px);
17289 } 17286 }
17287 @media screen and (max-width: 900px) {
17288 .home-header .search-box .sf-field-search {
17289 width: calc(100% - 56px);
17290 }
17291 }
17290 .home-header .search-box .sf-field-search label { 17292 .home-header .search-box .sf-field-search label {
17291 width: 90%; 17293 width: 90%;
17292 position: relative; 17294 position: relative;
...@@ -17297,6 +17299,7 @@ ul.sf_date_field .sf-datepicker { ...@@ -17297,6 +17299,7 @@ ul.sf_date_field .sf-datepicker {
17297 @media screen and (max-width: 900px) { 17299 @media screen and (max-width: 900px) {
17298 .home-header .search-box .sf-field-search label { 17300 .home-header .search-box .sf-field-search label {
17299 width: 100%; 17301 width: 100%;
17302 margin-left: 5%;
17300 } 17303 }
17301 } 17304 }
17302 .home-header .search-box .sf-field-search label:after { 17305 .home-header .search-box .sf-field-search label:after {
...@@ -17324,6 +17327,11 @@ ul.sf_date_field .sf-datepicker { ...@@ -17324,6 +17327,11 @@ ul.sf_date_field .sf-datepicker {
17324 .home-header .search-box .sf-field-submit { 17327 .home-header .search-box .sf-field-submit {
17325 display: inline-block !important; 17328 display: inline-block !important;
17326 } 17329 }
17330 @media screen and (max-width: 900px) {
17331 .home-header .search-box .sf-field-submit {
17332 margin-left: 0px;
17333 }
17334 }
17327 .home-header .search-box .sf-field-submit input[name=_sf_submit] { 17335 .home-header .search-box .sf-field-submit input[name=_sf_submit] {
17328 border-radius: 50%; 17336 border-radius: 50%;
17329 padding: 0; 17337 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 @@ ...@@ -67,7 +67,7 @@
67 .searchandfilter{ 67 .searchandfilter{
68 width: calc(100% - 50px); 68 width: calc(100% - 50px);
69 @media only screen and (max-width: 782px) { 69 @media only screen and (max-width: 782px) {
70 width: calc(100% - 40px); 70 width: calc(100% - 35px);
71 } 71 }
72 display: inline-block; 72 display: inline-block;
73 } 73 }
...@@ -85,6 +85,9 @@ ...@@ -85,6 +85,9 @@
85 .sf-field-search{ 85 .sf-field-search{
86 display: inline-block; 86 display: inline-block;
87 width: calc(100% - 80px); 87 width: calc(100% - 80px);
88 @media screen and (max-width: 900px) {
89 width: calc(100% - 56px);
90 }
88 label{ 91 label{
89 width: 90%; 92 width: 90%;
90 position: relative; 93 position: relative;
...@@ -93,6 +96,7 @@ ...@@ -93,6 +96,7 @@
93 margin-left: 10%; 96 margin-left: 10%;
94 @media screen and (max-width: 900px) { 97 @media screen and (max-width: 900px) {
95 width: 100%; 98 width: 100%;
99 margin-left: 5%;
96 } 100 }
97 &:after { 101 &:after {
98 content: ""; 102 content: "";
...@@ -122,6 +126,9 @@ ...@@ -122,6 +126,9 @@
122 126
123 .sf-field-submit{ 127 .sf-field-submit{
124 display: inline-block !important; 128 display: inline-block !important;
129 @media screen and (max-width: 900px) {
130 margin-left:0px;
131 }
125 input[name="_sf_submit"]{ 132 input[name="_sf_submit"]{
126 border-radius: 50%; 133 border-radius: 50%;
127 padding: 0; 134 padding: 0;
...@@ -141,6 +148,7 @@ ...@@ -141,6 +148,7 @@
141 @media screen and (max-width: 900px) { 148 @media screen and (max-width: 900px) {
142 height: 40px; 149 height: 40px;
143 width:40px; 150 width:40px;
151
144 } 152 }
145 &:hover { 153 &:hover {
146 background:#669999; 154 background:#669999;
......
...@@ -130,7 +130,7 @@ ...@@ -130,7 +130,7 @@
130 #mega-menu-primary{ 130 #mega-menu-primary{
131 padding-top: 20px !important; 131 padding-top: 20px !important;
132 padding-bottom: 130px !important; 132 padding-bottom: 130px !important;
133 overflow-x: scroll !important; 133
134 height: calc(100vh - 80px) !important; 134 height: calc(100vh - 80px) !important;
135 } 135 }
136 .admin-bar #mega-menu-primary{ 136 .admin-bar #mega-menu-primary{
...@@ -140,13 +140,17 @@ ...@@ -140,13 +140,17 @@
140 display: none !important; 140 display: none !important;
141 } 141 }
142 #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary { 142 #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
143 width: 100%; 143 width: 100vw;
144 max-width: 100%; 144 max-width:100vw;
145 padding: 0px 34px; 145 padding: 0px 34px;
146 margin: auto; 146 margin: auto;
147 left: -100%; 147 left: -100%;
148 margin-top: 10px;
149 min-height: 100vh;
148 background-color: #F0F0F0; 150 background-color: #F0F0F0;
149 margin-top: 105px; 151 position: relative;
152 overflow: hidden !important;
153
150 } 154 }
151 155
152 #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu{ 156 #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 @@ ...@@ -267,9 +271,9 @@
267 .sub-menu-wrapper{ 271 .sub-menu-wrapper{
268 background-color: #F0F0F0; 272 background-color: #F0F0F0;
269 width: 100% !important; 273 width: 100% !important;
270 height: 100vh; 274 height: auto;
271 padding: 0px 10% !important; 275 padding: 0px 10% !important;
272 margin: auto !important; 276 margin-bottom: 200px;
273 float: none !important; 277 float: none !important;
274 278
275 } 279 }
...@@ -281,7 +285,8 @@ ...@@ -281,7 +285,8 @@
281 @media only screen and (max-width: 1000px) { 285 @media only screen and (max-width: 1000px) {
282 286
283 #mega-menu-wrap-primary{ 287 #mega-menu-wrap-primary{
284 width: 30%; 288 width: 100%;
289 height: auto;
285 top: 55px; 290 top: 55px;
286 right: 0px; 291 right: 0px;
287 position:absolute; 292 position:absolute;
...@@ -300,14 +305,7 @@ ...@@ -300,14 +305,7 @@
300 #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{ 305 #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{
301 display: none !important; 306 display: none !important;
302 } 307 }
303 .list-wrapper2, 308
304 .list-wrapper3 {
305 max-width: 100%;
306 overflow-x: hidden;
307 ul.mega-sub-menu{
308 display: block !important;
309 }
310 }
311 .sub-mobile-menu .mega-sub-menu{ 309 .sub-mobile-menu .mega-sub-menu{
312 position: absolute !important; 310 position: absolute !important;
313 top: 0 !important; 311 top: 0 !important;
...@@ -327,22 +325,26 @@ ...@@ -327,22 +325,26 @@
327 top: 0 ; 325 top: 0 ;
328 left: 0 ; 326 left: 0 ;
329 right: 0 ; 327 right: 0 ;
330 height: auto; 328 height: 100%;
331 min-height: 100vh ; 329 min-height: unset;
332 transform: translateX(100%) !important; 330 transform: translateX(100%) !important;
333 backface-visibility: hidden !important; 331 backface-visibility: hidden !important;
334 transition: transform 0.5s !important; 332 transition: transform 0.5s !important;
335 background-color: #F0F0F0; 333 background-color: #F0F0F0;
336 padding: 20px 40px 150px 40px; 334 padding: 20px 40px 50px 40px;
337 display: none; 335 max-width: 100%;
336 overflow-y: scroll;
337 overflow-x: hidden;
338 ul.mega-sub-menu{
339 display: block !important;
340 }
338 341
339 } 342 }
340 343
341 //.sub-mobile-menu .mega-sub-menu.is-visible,
342 .list-wrapper2.is-visible, 344 .list-wrapper2.is-visible,
343 .list-wrapper3.is-visible { 345 .list-wrapper3.is-visible {
344 transform: none !important; 346 transform: none !important;
345 display: block; 347
346 } 348 }
347 349
348 .mega-menu-item .list-wrapper:nth-child(1) > ul > li > .sub-menu{ 350 .mega-menu-item .list-wrapper:nth-child(1) > ul > li > .sub-menu{
......