• 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.