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 189 additions and 25 deletions
......@@ -15206,7 +15206,7 @@ ol li ol {
flex-direction: column-reverse;
width: 120%;
margin: -130px -10% 0 -10%;
padding: 40px 9% 130px 20%;
padding: 40px 9% 50px 12%;
background-position: 0px 50px;
background-size: 150vw;
background-repeat: no-repeat;
......@@ -15217,7 +15217,7 @@ ol li ol {
}
@media screen and (max-width: 900px) {
.partner-with-us .wp-block-column:first-of-type p {
max-width: 80Vw;
max-width: 90Vw;
}
}
@media screen and (max-width: 900px) {
......@@ -15249,7 +15249,7 @@ ol li ol {
}
@media screen and (max-width: 900px) {
.half-width {
max-width: 80Vw;
max-width: 90Vw;
}
}
......@@ -15318,7 +15318,7 @@ ol li ol {
}
@media screen and (max-width: 600px) {
.join-callout .wp-block-group__inner-container {
margin-top: -40px;
margin-top: 120px;
}
}
.join-callout .wp-block-group__inner-container .wp-block-columns {
......@@ -15365,7 +15365,7 @@ ol li ol {
top: -48px;
height: 50px;
width: calc(100% + 60px);
margin: 0 -30px !important;
margin: 120px -30px 0 -30px !important;
}
}
......@@ -15391,6 +15391,11 @@ ol li ol {
.admin-bar .nav-container {
top: 32px;
}
@media screen and (max-width: 800px) {
.admin-bar .nav-container {
top: 0px;
}
}
#top-nav {
background-color: #F6FBEF;
......@@ -15398,19 +15403,55 @@ ol li ol {
text-align: right;
height: 40px;
}
@media screen and (max-width: 800px) {
#top-nav .container {
justify-content: flex-end;
width: 100vw;
max-width: unset;
}
}
#top-nav a {
color: #000;
text-decoration: none;
}
@media screen and (max-width: 800px) {
#main-nav {
min-height: 82px;
max-width: unset;
}
}
@media screen and (max-width: 800px) {
#main-nav .container {
justify-content: flex-end;
width: 100vw;
max-width: unset;
}
}
#wrapper-navbar .navbar-brand {
position: absolute;
top: -40px;
left: 40px;
}
@media screen and (max-width: 800px) {
#wrapper-navbar .navbar-brand {
left: 20px;
top: -20px;
width: 120px;
height: 120px;
}
}
#navbarNavDropdown {
height: 66px;
}
@media screen and (max-width: 800px) {
#navbarNavDropdown {
height: auto;
padding-top: 60px;
}
}
#navbarNavDropdown .menu-item:not(.donate) a {
padding: 28px 32px;
font-family: "PT Sans", sans-serif;
......@@ -15419,6 +15460,11 @@ ol li ol {
text-decoration: none;
line-height: 1.63rem;
}
@media screen and (max-width: 800px) {
#navbarNavDropdown .menu-item:not(.donate) a {
padding: 10px 22px;
}
}
#navbarNavDropdown .menu-item:not(.donate) a:hover {
color: #FF9119;
text-decoration: underline;
......@@ -15431,22 +15477,45 @@ ol li ol {
color: #231F20;
line-height: 1.63rem;
}
@media screen and (max-width: 800px) {
#navbarNavDropdown .donate a {
background-color: transparent;
color: #fff;
padding: 10px 22px;
}
}
#navbarNavDropdown .donate a:hover {
background-color: #FF9119;
color: #231F20;
text-decoration: none;
}
.navbar-toggler {
border: 0px solid transparent !important;
}
.navbar-toggler-icon {
background-image: url("/wp-content/themes/understrap-child/images/menu.png");
width: 56px;
height: 56px;
}
#wrapper-footer-full {
background-color: #3DB5E6;
}
#wrapper-footer-full p {
color: #000;
font-size: 1rem;
}
#wrapper-footer-full .footer-cols {
gap: 7em;
justify-content: space-between;
}
@media screen and (max-width: 800px) {
#wrapper-footer-full .footer-cols {
gap: 0em;
}
}
#wrapper-footer-full .footer-cols .footer-col-one {
padding: 20px 0;
max-width: 500px;
......@@ -15477,6 +15546,11 @@ ol li ol {
#wrapper-footer-full .menu {
list-style-type: none;
}
@media screen and (max-width: 800px) {
#wrapper-footer-full .menu {
padding-left: 0px;
}
}
#wrapper-footer-full .menu .menu-item {
margin: 15px 3px;
}
......@@ -15502,6 +15576,13 @@ ol li ol {
margin: 0;
margin-left: 33px;
}
@media screen and (max-width: 800px) {
#menu-social,
#menu-social-1 {
padding-left: 0px;
margin-left: 0px;
}
}
#menu-social li,
#menu-social-1 li {
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){
flex-direction: column-reverse;
width: 120%;
margin: -130px -10% 0 -10%;
padding: 40px 9% 130px 20%;
padding: 40px 9% 50px 12%;
background-position: 0px 50px;
background-size: 150vw;
background-repeat: no-repeat;
......@@ -242,7 +242,7 @@ ul:not(.navbar-nav):not(.menu){
p{
max-width: 550px;
@media screen and (max-width: 900px) {
max-width: 80Vw;
max-width: 90Vw;
}
}
}
......@@ -276,7 +276,7 @@ ul:not(.navbar-nav):not(.menu){
.half-width{
max-width: 550px;
@media screen and (max-width: 900px) {
max-width: 80Vw;
max-width: 90Vw;
}
}
......@@ -338,7 +338,7 @@ ul:not(.navbar-nav):not(.menu){
margin-top: -75px;
}
@media screen and (max-width: 600px) {
margin-top:-40px;
margin-top:120px;
}
.wp-block-columns{
margin-bottom: 0px;
......@@ -382,7 +382,7 @@ ul:not(.navbar-nav):not(.menu){
top: -48px;
height: 50px;
width: calc(100% + 60px);
margin: 0 -30px !important;
margin:120px -30px 0 -30px !important;
}
}
......
#wrapper-footer-full{
p{
color: #000;
font-size: 1rem;
}
background-color: #3DB5E6;
.footer-cols{
gap: 7em;
justify-content: space-between;
@media screen and (max-width: 800px) {
gap: 0em;
}
.footer-col-one{
padding: 20px 0;
max-width: 500px;
......@@ -38,6 +42,9 @@
}
.menu{
list-style-type: none;
@media screen and (max-width: 800px) {
padding-left: 0px;
}
.menu-item{
margin: 15px 3px;
a{
......@@ -65,6 +72,10 @@
display: flex;
margin:0;
margin-left: 33px;
@media screen and (max-width: 800px) {
padding-left: 0px;
margin-left: 0px;
}
li {
margin-top: 0px !important;
......
.nav-container{
.nav-container {
position: sticky;
top: 0;
z-index: 999;
}
.admin-bar .nav-container{
.admin-bar .nav-container {
top: 32px;
@media screen and (max-width: 800px) {
top: 0px;
}
}
#top-nav{
#top-nav {
background-color: #F6FBEF;
color: #000;
text-align: right;
height: 40px;
a{
.container {
@media screen and (max-width: 800px) {
justify-content: flex-end;
width: 100vw;
max-width: unset;
}
}
a {
color: #000;
text-decoration: none;
}
}
#wrapper-navbar{
.navbar-brand{
#main-nav {
@media screen and (max-width: 800px) {
min-height: 82px;
max-width: unset;
}
.container {
@media screen and (max-width: 800px) {
justify-content: flex-end;
width: 100vw;
max-width: unset;
}
}
}
#wrapper-navbar {
.navbar-brand {
position: absolute;
top: -40px;
left: 40px;
@media screen and (max-width: 800px) {
left: 20px;
top: -20px;
width: 120px;
height: 120px;
}
}
}
#navbarNavDropdown{
#navbarNavDropdown {
height: 66px;
.menu-item:not(.donate){
a{
padding:28px 32px;
@media screen and (max-width: 800px) {
height: auto;
padding-top: 60px;
}
.menu-item:not(.donate) {
a {
padding: 28px 32px;
font-family: "PT Sans", sans-serif;
font-size: 1.25rem;
color: #fff;
text-decoration: none;
line-height: 1.63rem;
@media screen and (max-width: 800px) {
padding: 10px 22px;
}
}
a:hover{
a:hover {
color: #FF9119;
text-decoration: underline;
}
}
.donate{
a{
padding:28px 32px;
.donate {
a {
padding: 28px 32px;
font-family: "PT Sans", sans-serif;
font-size: 1.25rem;
background-color: #3DB5E6;
color: #231F20;
line-height: 1.63rem;
@media screen and (max-width: 800px) {
background-color: transparent;
color: #fff;
padding: 10px 22px;
}
}
a:hover{
a:hover {
background-color: #FF9119;
color: #231F20;
text-decoration: none;
......@@ -62,3 +123,14 @@
}
}
.navbar-toggler {
border: 0px solid transparent !important;
}
.navbar-toggler-icon {
background-image: url("/wp-content/themes/understrap-child/images/menu.png");
width: 56px;
height: 56px;
}
\ No newline at end of file
......