Overhang logo

This topic is: not resolved

Tagged: ,

This topic contains 6 replies, has 3 voices, and was last updated by  eamonmoriarty 6 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #94200

    derekalvarez
    Participant
    Post count: 47

    Is it possible to overhang the logo with css?

    I tried overflow: visible and some other code. Not sure what else to do…

    Site Header
    ---------------------------------------------------------------------------------------------------- */
    
    .site-header {
    	overflow: visible;
    	margin: 0 auto;
    	min-height: 100px;
    	width: 100%;
    }
    
    /* Title Area
    --------------------------------------------- */
    
    .title-area {
    	font-weight: 700;
    	float: left;
    	overflow: visible;
    	width: 320px;
    }
    
    .site-title {
    	font-size: 36px;
    	font-size: 3.6rem;
    	line-height: 1.25;
    	margin: 0 0 5px;
    	margin: 0 0 0.5rem;
    }
    
    .site-title a,
    .site-title a:hover {
    	color: #222;
    	display: block;
    	padding: 28px 0 0;
    	padding: 2.8rem 0 0;
    	text-decoration: none;
    }
    
    /* Full width header, no widgets */
    
    .header-full-width .title-area,
    .header-full-width .site-title {
    	width: 100%;
    }
    
    .header-image .site-description,
    .header-image .site-title a {
    	display: block;
    	text-indent: -9999px;
    }
    
    /* Logo, hide text */
    
    .header-image .site-description,
    .header-image .site-title a {
    	display: block;
    	text-indent: -9999px;
    }
    
    .header-image .title-area,
    .header-image .site-title,
    .header-image .site-title a {
    	float: left;
    	clear:left;
    	margin: 0;
    	position:absolute;
    	z-index:99999!important;
    	overflow: visible;
    	max-width: 225px;
    	min-height: 100px;
    	padding: 0;
    	width: 100%;
    	
    }
    http://cortezsanitation.com/
    #94606

    Au Coeur
    Participant
    Post count: 102

    It looks like you might have figured this out?


    Mother. Web & Graphic Designer. Lactation Consultant. Blogging about how it all fits together, most recently from northern Colorado. Visit my blog or my design site.

    #94764

    derekalvarez
    Participant
    Post count: 47

    Yes, I did! Do you need to know how I did it?

    #94767

    eamonmoriarty
    Participant
    Post count: 231

    Yes. Please let us know.


    Eamon Moriarty
    EM Dzine

    #94774

    Au Coeur
    Participant
    Post count: 102

    I was going to help you, but I am sure others would appreciate the Information. :-)


    Mother. Web & Graphic Designer. Lactation Consultant. Blogging about how it all fits together, most recently from northern Colorado. Visit my blog or my design site.

    #94775

    derekalvarez
    Participant
    Post count: 47

    I removed theme support for a custom header in functions.php and added this…

    // Remove Genesis header and and replace with custom two widget header
    
    unregister_sidebar( 'header-right' );
    
    genesis_register_sidebar( array(
        'id'            => 'header-left',
        'name'          => __( 'Left Header', 'theme-name' ),
        'description'   => __( 'Left hand header widget', 'theme-name' ),
    ) );
    
    genesis_register_sidebar( array(
        'id'            => 'header-right',
        'name'          => __( 'Right Header', 'theme-name' ),
        'description'   => __( 'Right hand header widget', 'theme-name' ),
    ) );
    
    remove_action( 'genesis_header', 'genesis_do_header' ); 
    add_action( 'genesis_header', 'genesis_do_new_header' ); 
    function genesis_do_new_header() {
    
        do_action( 'genesis_site_title' ); 
        do_action( 'genesis_site_description' );
        do_action( 'genesis_custom_header' );
    
        if ( is_active_sidebar( 'header-left' ) || has_action( 'genesis_header_left' ) ) { 
            echo '<div class="widget-area header-left">'; 
            do_action( 'genesis_header_left' ); 
            dynamic_sidebar( 'header-left' ); 
            echo '</div><!-- end .widget-area -->'; 
        }
    
        if ( is_active_sidebar( 'header-right' ) || has_action( 'genesis_header_right' ) ) { 
            echo '<div class="widget-area header-right">'; 
            do_action( 'genesis_header_right' ); 
            dynamic_sidebar( 'header-right' ); 
            echo '</div><!-- end .widget-area -->'; 
        }
    }

    Then I added this to the stylesheet…

    .header-left {
    	width:225px !important;
    	float:left!important;
    	clear:left;
    	margin:0 0 0 10px;
    	position:absolute;
    	z-index:99999!important;
    }
    .header-right {
    	width:850px!important;
    	float:right!important;
    	clear:right;margin:0;
    }

    I added this to the header left widget…

    <a href="http://cortezsanitation.com"><img src="http://cortezsanitation.com/wp-content/uploads/2014/03/cortez-san-logo.png" /></a>

    Added the search bar to the header right widget and used some css to move the primary menu to the right…

    .genesis-nav-menu {
    	padding: 0 0 0 300px;
    	float: right;
    }
    #102126

    eamonmoriarty
    Participant
    Post count: 231

    I got this to work on a website I am developing and it looks OK at full size. But it needs some responsive CSS to make it work properly at browser sizes of 480 or less.
    The problem is that the Right Header Widget Area does not drop below the Left Header Widget Area and just goes behind, creating a mess.
    Development site can be seen at http://kerryladies.ciarraiabu.com
    Any help appreciated.


    Eamon Moriarty
    EM Dzine

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

You must be logged in to reply to this topic.