Genesis Lifestyle Pro Custom Responsive Header
-
I cannot seem to get my header to become mobile responsive. I have tried all the tutorials I’ve found via google search with no luck. Here is my code. Can anyone tell me what’s missing. This is what’s in my media queries. I`/*
Media Queries
—————————————————————————————————- */@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {.search-form input[type=”search”] {
background-image: url(images/[email protected]);
}}
@media only screen and (max-width: 1139px) {
.footer-widgets,
.site-container,
.wrap {
max-width: 960px;
}.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
width: 688px;
}.content {
width: 580px;
}.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content,
.sidebar-sidebar-content .content,
.site-header .widget-area {
width: 380px;
}.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.home-bottom-left,
.home-bottom-right,
.sidebar-primary {
width: 272px;
}}
@media only screen and (max-width: 1023px) {
.footer-widgets,
.site-container,
.wrap {
max-width: 772px;
}.content-sidebar-sidebar .content-sidebar-wrap,
.content-sidebar-sidebar .content,
.content,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content,
.sidebar-primary,
.sidebar-secondary,
.sidebar-sidebar-content .content-sidebar-wrap,
.sidebar-sidebar-content .content,
.site-header .widget-area,
.title-area {
width: 100%;
}.site-header {
padding: 20px 0;
}.site-header .title-area,
.site-header .widget {
padding: 0 20px;
}.site-header .widget_nav_menu {
padding: 0;
}.header-image .site-title a {
background-position: center !important;
margin: 0 0 16px;
margin: 0 0 1.6rem;
}
.site-header {
padding: 0px;
padding: 0rem;
}.site-header .widget-area {
margin-top: 16px;
margin-top: 1.6rem;
}.site-header .search-form {
margin: 16px auto ;
margin: 1.6rem auto;.genesis-nav-menu li,
.site-header ul.genesis-nav-menu,
.site-header .search-form {
float: none;
}.genesis-nav-menu,
.site-description,
.site-footer p,
.site-header hgroup,
.site-header .search-form,
.site-title {
text-align: center;
}.genesis-nav-menu a {
padding: 20px 16px;
}.site-header .widget-area {
margin-top: 16px;
}.site-header .search-form {
margin: 16px auto ;
}.genesis-nav-menu li.alignleft,
.genesis-nav-menu li.right {
display: none;
}.entry-footer .entry-meta {
margin: 0;
padding-top: 12px;
}.home-bottom-left,
.home-bottom-right {
width: 332px;
}.footer-widgets-1 {
margin: 0;
}.site-footer {
padding: 20px;
}}
@media only screen and (max-width: 768px) {
.header-image .site-title a {
padding: 0;
margin: 0;
}.header-full-width.header-image .site-title a {
background-position: 0;
margin: 0;
}.site-header {
background-color: #fff;
overflow: hidden;
padding: 0;
}.site-container {
background-color: #FFFFFF;
box-shadow: 0 0 5px #DDDDDD;
margin: 0 auto;
max-width: 1140px;
overflow: hidden;
padding: 0;
}.site-inner {
clear: both;
padding: 0;
}body {
font-size: 14px;
}.site-container {
padding: 20px 5%;
width: 94%;
}.five-sixths,
.four-sixths,
.home-bottom-left,
.home-bottom-right,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}.site-title {
font-size: 32px;
}
}.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu,
.genesis-nav-menu.responsive-menu {
display: none;
}.genesis-nav-menu.responsive-menu .menu-item,
.responsive-menu-icon {
display: block;
}.genesis-nav-menu.responsive-menu .menu-item {
margin: 0;
}.genesis-nav-menu.responsive-menu .menu-item:hover {
position: static;
}.genesis-nav-menu.responsive-menu li.current-menu-item > a,
.genesis-nav-menu.responsive-menu .sub-menu li.current-menu-item > a:hover,
.genesis-nav-menu.responsive-menu li a,
.genesis-nav-menu.responsive-menu li a:hover {
background: none;
border: none;
display: block;
line-height: 1;
padding: 20px;
text-transform: none;
}.genesis-nav-menu.responsive-menu .current-menu-item > a,
.genesis-nav-menu.responsive-menu .sub-menu a,
.genesis-nav-menu.responsive-menu > li:hover .sub-menu a,
.genesis-nav-menu.responsive-menu a:hover,
.genesis-nav-menu.responsive-menu li:hover > a {
color: #fff;
}.genesis-nav-menu.responsive-menu .menu-item-has-children {
cursor: pointer;
}.genesis-nav-menu.responsive-menu > .menu-item-has-children > a {
margin-right: 60px;
}.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
content: “\f140”;
float: right;
font: normal 20px/1 ‘dashicons’;
height: 20px;
padding: 16px 20px;
right: 0;
text-align: right;
z-index: 9999;
}.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
content: “\f142”;
}.genesis-nav-menu.responsive-menu .sub-menu {
background-color: rgba(0, 0, 0, 0.025);
border: none;
left: auto;
opacity: 1;
position: relative;
-moz-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
-webkit-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
width: 100%;
z-index: 99;
}.genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
background-color: transparent;
margin: 0;
padding-left: 25px;
}.genesis-nav-menu.responsive-menu > li:hover .sub-menu a:hover,
.genesis-nav-menu.responsive-menu > li:hover .sub-menu a,
.genesis-nav-menu.responsive-menu .sub-menu li a,
.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
background: none;
border: none;
padding: 12px 20px;
position: relative;
text-transform: none;
width: 100%;
}.nav-primary .genesis-nav-menu.responsive-menu .current-menu-item > a,
.nav-primary .genesis-nav-menu.responsive-menu .sub-menu a,
.nav-primary .genesis-nav-menu.responsive-menu > li:hover .sub-menu a,
.nav-primary .genesis-nav-menu.responsive-menu a:hover,
.nav-primary .genesis-nav-menu.responsive-menu li:hover > a {
color: #222;
}.genesis-nav-menu a {
font-size: 12px;
}.entry-meta .entry-tags {
clear: both;
float: left;
}.entry-meta .entry-comments a {
margin: 0 0 10px;
}.lifestyle-pro-home .featuredpost .alignleft,
.lifestyle-pro-home .featuredpost .alignright {
float: none;
margin: 0 auto;
}
@media only screen and (max-width: 480px) {.header-image .site-title a {
background: url(https://www.wonderfulhealthyhabits.com/wp-content/uploads/2014/10/julieg-header-4801.jpeg) no-repeat;
max-height: 80px;
width: 100%;
}
}`
- The topic ‘Genesis Lifestyle Pro Custom Responsive Header’ is closed to new replies.