Genesis Responsive Menu & Header not showing correctly

[pixiegrl]

I am a one week old Genesis newbie and love it. I'm stuck as far as creating a responsive menu. I am using the Genesis Sample as my child theme and have tried different variations of coding, but I can not seem to get my header and menu to show correctly on my phone. I have made header images in all the sizes I might need for mobile, but I do not know what code to put it to make it look the right way. If I use Jetpack for mobile, my site goes from customized to ugly, boring, any site. Thank you in advance!

http://www.mamamouse.com

http://hhttp://www.mamamouse.com

[Tom]

Jessica Barnard has a good tutorial for this:
http://thepixelista.com/responsive-genesis-child-theme-logo/

(nice work on building your site from Sample)

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[pixiegrl]

Thank you. I tried to do what Jessica said, but for some reason it is not working for me. I have the menus responsive, only bc I added a plugin that created them, but my header will not shrink to the size of devices, no matter what I do. I feel like I must be missing something!

[Tom]

Good effort, pg! There's a couple things to fix up. Your media queries are 'inverted' and 'unclosed', for lack of a better description. The query statement is a CSS rule on it's own and must wrap the CSS rule that effects the style change, so each has a closing curly brace " } ". Each of these statements are typically listed in descending order, so that the upper statement has effect and then is modified by the next, lower statement. Try this for the image series:

@media only screen and (max-width: 768px) {

    .header-image .site-header .wrap {
        background: url(http://mamamouse.com/wp-content/uploads/2014/03/logo7681.png) no-repeat center top;
        margin-top: 60px;
        }
}

@media only screen and (max-width: 480px) {

    .header-image .site-header .wrap {
        background: url(http://mamamouse.com/wp-content/uploads/2014/03/logo4801.png) no-repeat center top;
        }
}

@media only screen and (max-width: 320px) {

    .header-image .site-header .wrap {
        background: url(http://mamamouse.com/wp-content/uploads/2014/03/logo3201.png) no-repeat center top;
        }
}

@media only screen and (max-width: 240px) {

    .header-image .site-header .wrap {
        background: url(http://mamamouse.com/wp-content/uploads/2014/03/logo2401.png) no-repeat center top;
        }
}

With that under your belt, you need to consider the actual image used w.r.t. the transparent piece hanging out to the right. It appears that you're using this to fill the header yet not obscure the mailing list input form/Call-To-Action, but they don't work well together, especially at the smaller sizes. If you size the image to be the size of the visible artwork+whitespace, you can position it exactly where you want it and place objects around it, spacing with CSS margins and/or padding.

This then allows you to properly center the logo and tuck the CTA underneath it at smaller screen widths using the media queries (either that or consider placing it in the top of the sidebar widget) - try this snippet in the 768 px media query:

.enews {
    width: 100%;
    float: left;
    margin-top: 30px;
}

.enews p,
#subscribe {
    text-align: center;
}

.enews-widget input {
    margin-bottom: 30px;
    margin-bottom: 3rem;
    width: 50%;
}

A last thing you might want to consider is preventing the CTA "Go" button from disappearing on hover:

#subbutton:hover {
    border: 2px solid #ffd9ea;
}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[pixiegrl]

Thank you for your patience and help. It is getting there, although when I looked at it on Bing on my phone, it was all jumbled in terms of header and enews box. I shrunk down my header file to 768 by getting rid of all the extra transparent background around it. I thought that might help, but the images for the media queries still have that extra space. Could that be what is still causing the space to show up on my phone? I hate to ask so many questions, but I am really trying to learn. Thanks again for your help!

[Tom]

Bing on your phone? Your images seem to be just as they were. Lets try this for one last go at it..

Backup your style.css and make copies of your logo files.
(If this doesn't work/for you, you can return to the prior state.)

Upload these images to use as your logo

    http://www.tiikoni.com/tis/view/?id=37f96da     685px
    http://www.tiikoni.com/tis/view/?id=4492ce1     460px
    http://www.tiikoni.com/tis/view/?id=e5bcebf     280px
    http://www.tiikoni.com/tis/view/?id=7637be6     200px

1. Replace the existing logo file with mmlogo685.png to to use as default.

2. in style.css, delete everything below line 1624.

3. Add this css at line 1624

@media only screen and (max-width: 1024px) {

    .header-image .site-header .wrap {
        background-position: center 10%;
    }

    .title-area {
        width: 100%;
    }

    .site-header .widget-area {
        width: 100%;
    }

    enews {
        width: 100%;
        float: left;
    }

    .enews p,
    #subscribe {
        text-align: center;
    }

    .enews-widget input {
        margin-bottom: 30px;
        width: 50%;
    }
}

@media only screen and (max-width: 480px) {

    .header-image .site-header .wrap {
        background: url(http://mamamouse.com/wp-content/uploads/2014/03/mmlogo460.png) no-repeat center top;
    }
}

@media only screen and (max-width: 320px) {

    .header-image .site-header .wrap {
        background: url(http://mamamouse.com/wp-content/uploads/2014/03/mmlogo280.png) no-repeat center top;
    }
}

@media only screen and (max-width: 240px) {

    .header-image .site-header .wrap {
        background: url(http://mamamouse.com/wp-content/uploads/2014/03/mmlogo200.png) no-repeat center top;
    }

    .enews-widget input[type="submit"] {
        width: 100%;
    }

}

#subbutton:hover {
    border: 2px solid #ffd9ea;
}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[pixiegrl]

Thank you for doing all of that work! It looks so much better than before. Still not perfect for some reason, but better. I was using the Bing app on my phone and it still looks weird, but I'm not going to worry about it. I don't even know if anyone uses it. 🙂

[Author]

Posts