Skip to content

Jeff Balicki / imagination_library

Go to a project
Toggle navigation
Toggle navigation pinning
531629e6 by Jeff Balicki
Options

mobile menu 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 9c1e0f29
Inline Side-by-side
Showing 8 changed files with 198 additions and 34 deletions
...@@ -15206,7 +15206,7 @@ ol li ol { ...@@ -15206,7 +15206,7 @@ ol li ol {
15206 flex-direction: column-reverse; 15206 flex-direction: column-reverse;
15207 width: 120%; 15207 width: 120%;
15208 margin: -130px -10% 0 -10%; 15208 margin: -130px -10% 0 -10%;
15209 padding: 40px 9% 130px 20%; 15209 padding: 40px 9% 50px 12%;
15210 background-position: 0px 50px; 15210 background-position: 0px 50px;
15211 background-size: 150vw; 15211 background-size: 150vw;
15212 background-repeat: no-repeat; 15212 background-repeat: no-repeat;
...@@ -15217,7 +15217,7 @@ ol li ol { ...@@ -15217,7 +15217,7 @@ ol li ol {
15217 } 15217 }
15218 @media screen and (max-width: 900px) { 15218 @media screen and (max-width: 900px) {
15219 .partner-with-us .wp-block-column:first-of-type p { 15219 .partner-with-us .wp-block-column:first-of-type p {
15220 max-width: 80Vw; 15220 max-width: 90Vw;
15221 } 15221 }
15222 } 15222 }
15223 @media screen and (max-width: 900px) { 15223 @media screen and (max-width: 900px) {
...@@ -15249,7 +15249,7 @@ ol li ol { ...@@ -15249,7 +15249,7 @@ ol li ol {
15249 } 15249 }
15250 @media screen and (max-width: 900px) { 15250 @media screen and (max-width: 900px) {
15251 .half-width { 15251 .half-width {
15252 max-width: 80Vw; 15252 max-width: 90Vw;
15253 } 15253 }
15254 } 15254 }
15255 15255
...@@ -15318,7 +15318,7 @@ ol li ol { ...@@ -15318,7 +15318,7 @@ ol li ol {
15318 } 15318 }
15319 @media screen and (max-width: 600px) { 15319 @media screen and (max-width: 600px) {
15320 .join-callout .wp-block-group__inner-container { 15320 .join-callout .wp-block-group__inner-container {
15321 margin-top: -40px; 15321 margin-top: 120px;
15322 } 15322 }
15323 } 15323 }
15324 .join-callout .wp-block-group__inner-container .wp-block-columns { 15324 .join-callout .wp-block-group__inner-container .wp-block-columns {
...@@ -15365,7 +15365,7 @@ ol li ol { ...@@ -15365,7 +15365,7 @@ ol li ol {
15365 top: -48px; 15365 top: -48px;
15366 height: 50px; 15366 height: 50px;
15367 width: calc(100% + 60px); 15367 width: calc(100% + 60px);
15368 margin: 0 -30px !important; 15368 margin: 120px -30px 0 -30px !important;
15369 } 15369 }
15370 } 15370 }
15371 15371
...@@ -15391,6 +15391,11 @@ ol li ol { ...@@ -15391,6 +15391,11 @@ ol li ol {
15391 .admin-bar .nav-container { 15391 .admin-bar .nav-container {
15392 top: 32px; 15392 top: 32px;
15393 } 15393 }
15394 @media screen and (max-width: 800px) {
15395 .admin-bar .nav-container {
15396 top: 0px;
15397 }
15398 }
15394 15399
15395 #top-nav { 15400 #top-nav {
15396 background-color: #F6FBEF; 15401 background-color: #F6FBEF;
...@@ -15398,19 +15403,55 @@ ol li ol { ...@@ -15398,19 +15403,55 @@ ol li ol {
15398 text-align: right; 15403 text-align: right;
15399 height: 40px; 15404 height: 40px;
15400 } 15405 }
15406 @media screen and (max-width: 800px) {
15407 #top-nav .container {
15408 justify-content: flex-end;
15409 width: 100vw;
15410 max-width: unset;
15411 }
15412 }
15401 #top-nav a { 15413 #top-nav a {
15402 color: #000; 15414 color: #000;
15403 text-decoration: none; 15415 text-decoration: none;
15404 } 15416 }
15405 15417
15418 @media screen and (max-width: 800px) {
15419 #main-nav {
15420 min-height: 82px;
15421 max-width: unset;
15422 }
15423 }
15424 @media screen and (max-width: 800px) {
15425 #main-nav .container {
15426 justify-content: flex-end;
15427 width: 100vw;
15428 max-width: unset;
15429 }
15430 }
15431
15406 #wrapper-navbar .navbar-brand { 15432 #wrapper-navbar .navbar-brand {
15407 position: absolute; 15433 position: absolute;
15408 top: -40px; 15434 top: -40px;
15435 left: 40px;
15436 }
15437 @media screen and (max-width: 800px) {
15438 #wrapper-navbar .navbar-brand {
15439 left: 20px;
15440 top: -20px;
15441 width: 120px;
15442 height: 120px;
15443 }
15409 } 15444 }
15410 15445
15411 #navbarNavDropdown { 15446 #navbarNavDropdown {
15412 height: 66px; 15447 height: 66px;
15413 } 15448 }
15449 @media screen and (max-width: 800px) {
15450 #navbarNavDropdown {
15451 height: auto;
15452 padding-top: 60px;
15453 }
15454 }
15414 #navbarNavDropdown .menu-item:not(.donate) a { 15455 #navbarNavDropdown .menu-item:not(.donate) a {
15415 padding: 28px 32px; 15456 padding: 28px 32px;
15416 font-family: "PT Sans", sans-serif; 15457 font-family: "PT Sans", sans-serif;
...@@ -15419,6 +15460,11 @@ ol li ol { ...@@ -15419,6 +15460,11 @@ ol li ol {
15419 text-decoration: none; 15460 text-decoration: none;
15420 line-height: 1.63rem; 15461 line-height: 1.63rem;
15421 } 15462 }
15463 @media screen and (max-width: 800px) {
15464 #navbarNavDropdown .menu-item:not(.donate) a {
15465 padding: 10px 22px;
15466 }
15467 }
15422 #navbarNavDropdown .menu-item:not(.donate) a:hover { 15468 #navbarNavDropdown .menu-item:not(.donate) a:hover {
15423 color: #FF9119; 15469 color: #FF9119;
15424 text-decoration: underline; 15470 text-decoration: underline;
...@@ -15431,22 +15477,45 @@ ol li ol { ...@@ -15431,22 +15477,45 @@ ol li ol {
15431 color: #231F20; 15477 color: #231F20;
15432 line-height: 1.63rem; 15478 line-height: 1.63rem;
15433 } 15479 }
15480 @media screen and (max-width: 800px) {
15481 #navbarNavDropdown .donate a {
15482 background-color: transparent;
15483 color: #fff;
15484 padding: 10px 22px;
15485 }
15486 }
15434 #navbarNavDropdown .donate a:hover { 15487 #navbarNavDropdown .donate a:hover {
15435 background-color: #FF9119; 15488 background-color: #FF9119;
15436 color: #231F20; 15489 color: #231F20;
15437 text-decoration: none; 15490 text-decoration: none;
15438 } 15491 }
15439 15492
15493 .navbar-toggler {
15494 border: 0px solid transparent !important;
15495 }
15496
15497 .navbar-toggler-icon {
15498 background-image: url("/wp-content/themes/understrap-child/images/menu.png");
15499 width: 56px;
15500 height: 56px;
15501 }
15502
15440 #wrapper-footer-full { 15503 #wrapper-footer-full {
15441 background-color: #3DB5E6; 15504 background-color: #3DB5E6;
15442 } 15505 }
15443 #wrapper-footer-full p { 15506 #wrapper-footer-full p {
15444 color: #000; 15507 color: #000;
15508 font-size: 1rem;
15445 } 15509 }
15446 #wrapper-footer-full .footer-cols { 15510 #wrapper-footer-full .footer-cols {
15447 gap: 7em; 15511 gap: 7em;
15448 justify-content: space-between; 15512 justify-content: space-between;
15449 } 15513 }
15514 @media screen and (max-width: 800px) {
15515 #wrapper-footer-full .footer-cols {
15516 gap: 0em;
15517 }
15518 }
15450 #wrapper-footer-full .footer-cols .footer-col-one { 15519 #wrapper-footer-full .footer-cols .footer-col-one {
15451 padding: 20px 0; 15520 padding: 20px 0;
15452 max-width: 500px; 15521 max-width: 500px;
...@@ -15477,6 +15546,11 @@ ol li ol { ...@@ -15477,6 +15546,11 @@ ol li ol {
15477 #wrapper-footer-full .menu { 15546 #wrapper-footer-full .menu {
15478 list-style-type: none; 15547 list-style-type: none;
15479 } 15548 }
15549 @media screen and (max-width: 800px) {
15550 #wrapper-footer-full .menu {
15551 padding-left: 0px;
15552 }
15553 }
15480 #wrapper-footer-full .menu .menu-item { 15554 #wrapper-footer-full .menu .menu-item {
15481 margin: 15px 3px; 15555 margin: 15px 3px;
15482 } 15556 }
...@@ -15502,6 +15576,13 @@ ol li ol { ...@@ -15502,6 +15576,13 @@ ol li ol {
15502 margin: 0; 15576 margin: 0;
15503 margin-left: 33px; 15577 margin-left: 33px;
15504 } 15578 }
15579 @media screen and (max-width: 800px) {
15580 #menu-social,
15581 #menu-social-1 {
15582 padding-left: 0px;
15583 margin-left: 0px;
15584 }
15585 }
15505 #menu-social li, 15586 #menu-social li,
15506 #menu-social-1 li { 15587 #menu-social-1 li {
15507 margin-top: 0px !important; 15588 margin-top: 0px !important;
......
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.
...@@ -233,7 +233,7 @@ ul:not(.navbar-nav):not(.menu){ ...@@ -233,7 +233,7 @@ ul:not(.navbar-nav):not(.menu){
233 flex-direction: column-reverse; 233 flex-direction: column-reverse;
234 width: 120%; 234 width: 120%;
235 margin: -130px -10% 0 -10%; 235 margin: -130px -10% 0 -10%;
236 padding: 40px 9% 130px 20%; 236 padding: 40px 9% 50px 12%;
237 background-position: 0px 50px; 237 background-position: 0px 50px;
238 background-size: 150vw; 238 background-size: 150vw;
239 background-repeat: no-repeat; 239 background-repeat: no-repeat;
...@@ -242,7 +242,7 @@ ul:not(.navbar-nav):not(.menu){ ...@@ -242,7 +242,7 @@ ul:not(.navbar-nav):not(.menu){
242 p{ 242 p{
243 max-width: 550px; 243 max-width: 550px;
244 @media screen and (max-width: 900px) { 244 @media screen and (max-width: 900px) {
245 max-width: 80Vw; 245 max-width: 90Vw;
246 } 246 }
247 } 247 }
248 } 248 }
...@@ -276,7 +276,7 @@ ul:not(.navbar-nav):not(.menu){ ...@@ -276,7 +276,7 @@ ul:not(.navbar-nav):not(.menu){
276 .half-width{ 276 .half-width{
277 max-width: 550px; 277 max-width: 550px;
278 @media screen and (max-width: 900px) { 278 @media screen and (max-width: 900px) {
279 max-width: 80Vw; 279 max-width: 90Vw;
280 } 280 }
281 } 281 }
282 282
...@@ -338,7 +338,7 @@ ul:not(.navbar-nav):not(.menu){ ...@@ -338,7 +338,7 @@ ul:not(.navbar-nav):not(.menu){
338 margin-top: -75px; 338 margin-top: -75px;
339 } 339 }
340 @media screen and (max-width: 600px) { 340 @media screen and (max-width: 600px) {
341 margin-top:-40px; 341 margin-top:120px;
342 } 342 }
343 .wp-block-columns{ 343 .wp-block-columns{
344 margin-bottom: 0px; 344 margin-bottom: 0px;
...@@ -382,7 +382,7 @@ ul:not(.navbar-nav):not(.menu){ ...@@ -382,7 +382,7 @@ ul:not(.navbar-nav):not(.menu){
382 top: -48px; 382 top: -48px;
383 height: 50px; 383 height: 50px;
384 width: calc(100% + 60px); 384 width: calc(100% + 60px);
385 margin: 0 -30px !important; 385 margin:120px -30px 0 -30px !important;
386 } 386 }
387 387
388 } 388 }
......
1 #wrapper-footer-full{ 1 #wrapper-footer-full{
2 p{ 2 p{
3 color: #000; 3 color: #000;
4 font-size: 1rem;
4 } 5 }
5 background-color: #3DB5E6; 6 background-color: #3DB5E6;
6 .footer-cols{ 7 .footer-cols{
7 gap: 7em; 8 gap: 7em;
8 justify-content: space-between; 9 justify-content: space-between;
10 @media screen and (max-width: 800px) {
11 gap: 0em;
12 }
9 .footer-col-one{ 13 .footer-col-one{
10 padding: 20px 0; 14 padding: 20px 0;
11 max-width: 500px; 15 max-width: 500px;
...@@ -38,6 +42,9 @@ ...@@ -38,6 +42,9 @@
38 } 42 }
39 .menu{ 43 .menu{
40 list-style-type: none; 44 list-style-type: none;
45 @media screen and (max-width: 800px) {
46 padding-left: 0px;
47 }
41 .menu-item{ 48 .menu-item{
42 margin: 15px 3px; 49 margin: 15px 3px;
43 a{ 50 a{
...@@ -65,6 +72,10 @@ ...@@ -65,6 +72,10 @@
65 display: flex; 72 display: flex;
66 margin:0; 73 margin:0;
67 margin-left: 33px; 74 margin-left: 33px;
75 @media screen and (max-width: 800px) {
76 padding-left: 0px;
77 margin-left: 0px;
78 }
68 79
69 li { 80 li {
70 margin-top: 0px !important; 81 margin-top: 0px !important;
......
1 .nav-container{ 1 .nav-container {
2 position: sticky; 2 position: sticky;
3 top: 0; 3 top: 0;
4 z-index: 999; 4 z-index: 999;
5 } 5 }
6 .admin-bar .nav-container{ 6
7 top: 32px; 7 .admin-bar .nav-container {
8 top: 32px;
9
10 @media screen and (max-width: 800px) {
11 top: 0px;
12 }
8 } 13 }
9 14
10 #top-nav{ 15 #top-nav {
11 background-color: #F6FBEF; 16 background-color: #F6FBEF;
12 color: #000; 17 color: #000;
13 text-align: right; 18 text-align: right;
14 height: 40px; 19 height: 40px;
20
21 .container {
22
23 @media screen and (max-width: 800px) {
24 justify-content: flex-end;
25 width: 100vw;
26 max-width: unset;
27 }
28 }
29
15 30
16 a{ 31
17 color: #000; 32
18 text-decoration: none; 33 a {
19 34 color: #000;
35 text-decoration: none;
36
37 }
38 }
39
40 #main-nav {
41 @media screen and (max-width: 800px) {
42 min-height: 82px;
43 max-width: unset;
44 }
45
46 .container {
47
48 @media screen and (max-width: 800px) {
49 justify-content: flex-end;
50 width: 100vw;
51 max-width: unset;
20 } 52 }
53 }
21 } 54 }
22 55
23 #wrapper-navbar{ 56 #wrapper-navbar {
24 .navbar-brand{ 57 .navbar-brand {
25 position: absolute; 58 position: absolute;
26 top: -40px; 59 top: -40px;
60 left: 40px;
61
62 @media screen and (max-width: 800px) {
63 left: 20px;
64 top: -20px;
65 width: 120px;
66 height: 120px;
67 }
27 } 68 }
28 69
29 } 70 }
30 #navbarNavDropdown{ 71
72 #navbarNavDropdown {
31 height: 66px; 73 height: 66px;
32 .menu-item:not(.donate){ 74
33 75 @media screen and (max-width: 800px) {
34 a{ 76 height: auto;
35 padding:28px 32px; 77 padding-top: 60px;
78 }
79
80 .menu-item:not(.donate) {
81
82 a {
83 padding: 28px 32px;
36 font-family: "PT Sans", sans-serif; 84 font-family: "PT Sans", sans-serif;
37 font-size: 1.25rem; 85 font-size: 1.25rem;
38 color: #fff; 86 color: #fff;
39 text-decoration: none; 87 text-decoration: none;
40 line-height: 1.63rem; 88 line-height: 1.63rem;
89
90 @media screen and (max-width: 800px) {
91 padding: 10px 22px;
92 }
41 } 93 }
42 a:hover{ 94
95 a:hover {
43 color: #FF9119; 96 color: #FF9119;
44 text-decoration: underline; 97 text-decoration: underline;
45 } 98 }
46 } 99 }
47 .donate{ 100
48 101 .donate {
49 a{ 102
50 padding:28px 32px; 103 a {
104 padding: 28px 32px;
51 font-family: "PT Sans", sans-serif; 105 font-family: "PT Sans", sans-serif;
52 font-size: 1.25rem; 106 font-size: 1.25rem;
53 background-color: #3DB5E6; 107 background-color: #3DB5E6;
54 color: #231F20; 108 color: #231F20;
55 line-height: 1.63rem; 109 line-height: 1.63rem;
110
111 @media screen and (max-width: 800px) {
112 background-color: transparent;
113 color: #fff;
114 padding: 10px 22px;
115 }
56 } 116 }
57 a:hover{ 117
58 background-color: #FF9119; 118 a:hover {
119 background-color: #FF9119;
59 color: #231F20; 120 color: #231F20;
60 text-decoration: none; 121 text-decoration: none;
61 } 122 }
62 } 123 }
63 } 124 }
64 125
126 .navbar-toggler {
127 border: 0px solid transparent !important;
128
129 }
130
131 .navbar-toggler-icon {
132 background-image: url("/wp-content/themes/understrap-child/images/menu.png");
133 width: 56px;
134 height: 56px;
135
136 }
...\ No newline at end of file ...\ No newline at end of file
......