Genesis Sample Theme – Full Width Header Image

Community Forums Forums General Discussion Genesis Sample Theme – Full Width Header Image

This topic is: resolved

This topic contains 9 replies, has 2 voices, and was last updated by  Marcy 7 months, 1 week ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #91354

    Genesis
    Member
    Post count: 16

    Hi,

    I tried following this website to make my header full width:

    http://wpsites.net/web-design/add-header-image-logo-to-genesis-2-0-sample-theme/

    But as soon as I add the following code listed, my header image disappear and instead only text displayed with greater height.

    add_theme_support( 'custom-header', array(
    	'default-text-color'     => 'ffffff',
    	'height'                 => 164,
    	'width'                  => 1600,
    ) );

    Can someone please guide one how can I make my header image full width?

    Thanks!

    P/S: Still developing offline, no URL.

    #91509

    Marcy
    Participant
    Post count: 381

    That tutorial discusses two ways to add a logo to the Genesis Sample.

    1. The first part of the tutorial:
    If you want to use a background image, then you need to use:
    /* Logo, hide text */
    .header-image .site-header .wrap {
    background: url(images/logo.png) no-repeat left;
    padding: 0;
    }
    And then name your logo, logo.png and add it to the /images folder.

    2. For the second part of the tutorial, it adds a custom upload of the header image in your WordPress under Appearance > Header.
    So you add the code to your functions.php

    add_theme_support( 'custom-header', array(
    	'default-text-color'     => 'ffffff',
    	'header-selector'        => '.header-image .site-header .wrap',
    	'height'                 => 164,
    	'width'                  => 320,
    ) );

    and then login to WordPress and upload the logo under Appearance > Header


    #92097

    Genesis
    Member
    Post count: 16

    I tried the second one by adding height: 320 and width 2520 but both left and right side is still white background. Any ideas?

    #92426

    Marcy
    Participant
    Post count: 381

    It would be a bit easier to help, if you provided a link to your site. But here goes…

    Find this selector in your style.css:
    .site-header .wrap {
    padding: 40px 0;
    padding: 4rem 0;
    }
    and add max-width: 100%; to it, so it looks like:

    .site-header .wrap {
    	padding: 40px 0;
    	padding: 4rem 0;
            max-width: 100%; 
    }

    And then you may want to change this section (change left to center) so that it centers the header:

    .header-image .site-header .wrap {
    	background: url(images/logo.png) no-repeat center;
    	padding: 0;
    }

    #92437

    Genesis
    Member
    Post count: 16

    Hi Marcy,

    Many thanks!

    Now, I’m able to view it right in the browser.

    There’s one problem left though. When resizing the browser, it header can be viewed on the center part.

    Here’s the screenshot of different sizes of browser:

    Full Screen: Full Screen
    50% Screen: 50% Screen
    Smallest Screen: Smallest Screen

    Is there any way that I can make the entire header viewable lihe slider does?

    Thanks!

    • This reply was modified 7 months, 3 weeks ago by  Genesis.
    • This reply was modified 7 months, 3 weeks ago by  Genesis. Reason: Editing image url
    • This reply was modified 7 months, 3 weeks ago by  Genesis.
    • This reply was modified 7 months, 3 weeks ago by  Genesis.
    • This reply was modified 7 months, 3 weeks ago by  Genesis. Reason: Editing image url
    • This reply was modified 7 months, 3 weeks ago by  Genesis.
    #92489

    Marcy
    Participant
    Post count: 381

    Again I can’t really help without a link to your site. There are no links to your images, so I’m guessing again.

    You need to add a contain or cover properties to your image size to see which you like best, but since your image is so large, I’m not sure how that’s really going to work for you. It may be best to actually size the image yourself for different screen sizes and add that to you @media query sections.

    To add cover or contain properties, you have to write the entire background image CSS on separate line to do it, so you would now have:
    .header-image .site-header .wrap {
    background-image: url(images/logo.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain; /* or you can try background-size: cover; instead */
    padding: 0;
    }


    #92600

    Genesis
    Member
    Post count: 16

    Hi Marcy,

    Sorry that I don’t have a link now as I’m doing it offline for now.

    The code managed to put the image viewable in full-width but the part under it is having space when resize to smaller window:

    Space Below Header
    This is smallest browser window. Link to the image: http://postimg.org/image/cqmegarqn/

    This is the code following the header:

    .header-image .site-title a {
    	float: left;
    	min-height: 245px;
    	width: 100%;
    }
    

    Thanks again! Appreciate! :)

    • This reply was modified 7 months, 3 weeks ago by  Genesis. Reason: For better description
    • This reply was modified 7 months, 3 weeks ago by  Genesis. Reason: For better description
    #92714

    Marcy
    Participant
    Post count: 381

    You need to add some extra @media sections at the bottom of style.css to reduce the height of the header. I don’t know the height you need, so you will have to look at your site for different screen sizes yourself to see what height you need.

    For instance

    @media only screen and (max-width: 480px) {
    .header-image .site-title a {
    min-height: 100px;
    }
    }

    @media only screen and (max-width: 320px) {
    .header-image .site-title a {
    min-height: 75px;
    }
    }


    #94365

    Genesis
    Member
    Post count: 16

    @Marcy,

    Thank you so much! I was able to get it done. ;)

    #94366

    Marcy
    Participant
    Post count: 381

    You’re welcome! I’m glad it worked for you.


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

You must be logged in to reply to this topic.