Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to Make Genesis Header Responsive?
- This topic has 5 replies, 3 voices, and was last updated 8 years, 2 months ago by Brad Dalton.
-
AuthorPosts
-
January 1, 2016 at 6:13 am #175313CathyMember
Hi,
I am using Genesis Sample Theme and I am wondering how do you make the header image responsive? I've created a dummy WordPress website here;
http://h133.direct.testsitewordpress.siterubix.com/
I have tried various codes gathered from Google Search and have no success after 4 hours.
This is the code that I am using right now;
.header-image .site-title > a {
background: url(http://testsitewordpress.siterubix.com/wp-content/uploads/2016/01/My-Logo-1025-X-154.png) no-repeat left;
float: left;
min-height: 154px;
width: 100%;What's missing? I would appreciate any help. Thank you!
http://h133.direct.testsitewordpress.siterubix.com/January 3, 2016 at 11:04 am #175461GingerParticipantHi there,
Your image and width settings in your mobile CSS area is wider than the max-width allowed so it's not going to look right. I would follow this tutorial here:
http://thepixelista.com/responsive-genesis-child-theme-logo/
And change the width to 100% and have a different image referenced for each mobile break-point.
Hope that helps!
@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options
January 4, 2016 at 5:34 pm #175594CathyMemberHi Ginger,
My preexisting media queries are;
@media only screen and (max-width: 1200px)
@media only screen and (max-width: 960px)
@media only screen and (max-width: 800px)Question - Do I still need to add/create other width like
@media only screen and (max-width: 1024px)
@media only screen and (max-width: 768px)??
So I have created additional media queries and created separate width logos and change the height accordingly, for example;
@media only screen and (max-width: 480px).header-image .site-title > a {
background: url(http://testsitewordpress.siterubix.com/wp-content/uploads/2016/01/480x.png) no-repeat left;
float: left;
min-height: 135px;
width: 100%;It's starting to look more responsive but doesn't fit very 'snugly' into 240x, 320x and 480x screen as shown here;
http://testsitewordpress.siterubix.com/
Is that normal?
Thank you so much for your help.
January 5, 2016 at 8:01 am #175629Brad DaltonParticipantI would use the custom header function included in WordPress and supported by Genesis
//* Add support for custom header add_theme_support( 'custom-header', array( 'flex-height' => true, 'width' => 1025, 'height' => 154, 'header-selector' => '.site-title a', 'header-text' => false, ) );
You'll still need to change the image dimensions in your CSS.
Also, if you do use CSS, i would add the image to your child themes images folder, not your WordPress Media Library.
January 5, 2016 at 9:04 am #175636CathyMemberJanuary 6, 2016 at 5:42 am #175730Brad DaltonParticipantI couldn't access your site but wanted to add another solution using PHP.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.