OutReach Pro 3.0.1 remove title-area from responsive design

Community Forums Forums Design Tips and Tricks OutReach Pro 3.0.1 remove title-area from responsive design

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  Tom 3 months, 2 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #117650

    giraffeweb
    Participant
    Post count: 10

    The website http://www.greenvillelegal.com has the logo in the center of the header by placing it in the header right widget area. A graphic is in the logo area. On responsive design the client does not want the graphic to show up because it stacks on the top of his logo and he wants his actual logo to be on top.

    We would rather the title-area move below the header widget on responsive, or at least have title-area not display at all on responsive but also not leave the 100 pixel space at the top.

    I have gone to http://blackhillswebworks.com/2013/05/10/how-to-replace-the-studiopress-background-header-image-with-a-real-image-logo/ and the logo doesn’t display at all on any platform.

    I followed these directions http://thepixelista.com/responsive-genesis-child-theme-logo/ and the logo displays all platforms except 240 when viewing it here http://www.studiopress.com/responsive/

    functions.php info commented out so I can choose logo image in genesis setup:
    //* Add support for custom header
    //*add_theme_support( ‘custom-header’, array(
    //* ‘header-selector’ => ‘.site-title a’,
    //* ‘header-text’ => false,
    //* ‘height’ => 100,
    //* ‘width’ => 340,
    //*) );

    here’s the css:
    .wrap .title-area {
    background: url(http://greenvillelegal.com/wp-content/uploads/2014/07/Life-Member-MDAF-Top-Trial-Lawyers.jpg) no-repeat;
    width: 340px;
    height: 100px;

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

    .wrap .title-area
    {
    display:none;
    }
    @media only screen and (max-width: 320px) {

    .wrap .title-area
    {
    display:none;
    }
    @media only screen and (max-width: 480px) {
    .wrap .title-area
    {
    display:none;
    }

    http://www.greenvillelegal.com
    #118139

    Tom
    Participant
    Post count: 991

    There are a couple disadvantages to the image placement in your approach using header right for the logo.

    I put together a quick tutorial that can fix this by using the standard header image setup for your client’s logo. This tucks the affiliation logo away on smaller screens and eliminates the need to try to hide the title area.

    The Black Hills Webworks solution could be layered on top of this if desired.

    Custom header with CSS only


    Choose your next site design from over 350 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

    • This reply was modified 3 months, 2 weeks ago by  Tom. Reason: add image
    • This reply was modified 3 months, 2 weeks ago by  Tom. Reason: add image
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.