Make the Magazine theme header responsive

Community Forums Forums Design Tips and Tricks Make the Magazine theme header responsive

This topic is: not resolved

This topic contains 7 replies, has 4 voices, and was last updated by  echofoxtrot 1 year, 7 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #22513

    echofoxtrot
    Participant
    Post count: 33

    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 */
    }

    #22518

    Susan
    Moderator
    Post count: 9255

    Thanks for the tip!


    Susan @ Graphically Designing I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #23509

    Doug
    Participant
    Post count: 81

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

    Thank you, echofoxtrot.

    Peace,

    Doug

    #23520

    echofoxtrot
    Participant
    Post count: 33

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

    #23579

    finalrune
    Participant
    Post count: 4

    +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

    #23580

    echofoxtrot
    Participant
    Post count: 33

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

    #26877

    echofoxtrot
    Participant
    Post count: 33

    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!

    #26944

    echofoxtrot
    Participant
    Post count: 33

    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.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.