Overhang logo

[derekalvarez]

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/

[Au Coeur]

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.

[derekalvarez]

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

[eamonmoriarty]

Yes. Please let us know.

---

Eamon Moriarty
EM Dzine

[Au Coeur]

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.

[derekalvarez]

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;
}

[eamonmoriarty]

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

[Author]

Posts