Make the Magazine theme header responsive

[echofoxtrot]

I hope that this is helpful to someone:

I noticed that while most of the theme was responsive, the header was cutting off as the screen size decreased to below the header width. I made this change to the style.css file:

/* Image Header - Full Width
------------------------------------------------------------ */

.header-full-width #title-area,
.header-full-width #title,
.header-full-width #title a {
max-width: 100%;                         /* This was originally  width: 960px */
}

[Susan]

Thanks for the tip!

[Doug]

I wonder if StudioPress will catch this and update the Magazine theme accordingly with this important change.

Thank you, echofoxtrot.

Peace,

Doug

[echofoxtrot]

You're welcome! Seems likely, as Susan, one of the moderators, noted this. Or maybe it'll be a code snippet.

[finalrune]

+1 for this little helper.  My next task is to try and get a 'search' box into the header area of Magazine theme... if anyone has ever successfully done this, let me know!

- Fred

[echofoxtrot]

I just checked and I believe that all you have to do is drag the Search Widget into the Header Right widget area.

[echofoxtrot]

Hmm. I noticed, though, that when I uploaded an image of my own for the header, that code doesn't make the header 'responsive.' It works when you use the default background and just change the text, however.

Working on this!

[echofoxtrot]

Ok, I think I have an answer. This is working for me. Frankly, it seems a little kludgy, but here you are - I would love to hear your comments and/or ways to improve this. The idea is to use an actual img instead of a background image in the header in order to make it shrink as needed when the screen size is reduced.

First, I added this code to the Magazine theme functions.php file to make the header the size I wanted, the same size as my header image. Of course, you would use the height and width of your own image.

add_theme_support( 'genesis-custom-header', array(
'width' => 400,
'height' => 95
) );

Then, I added this to the functions.php file:

add_action ('genesis_header', 'insert_header_image');
function insert_header_image() {
echo '<img src="/wp-content/themes/magazine/images/my-logo-name.png" />';  // This is the path to my header image. Yours may differ.
}

Then, I changed the height of the title area in the style.css file to make the title area sort of disappear:

.header-full-width #title-area
{height:1px;
}

If I had not done that, I would have an extra 115 pixels of empty space on top of my header image.

The above code puts an actual img into the header space instead of having a background image as the header.

[Author]

Posts