Community Forums › Forums › Archived Forums › Design Tips and Tricks › Overhang logo
- This topic has 6 replies, 3 voices, and was last updated 10 years, 9 months ago by
eamonmoriarty.
-
AuthorPosts
-
March 10, 2014 at 2:45 pm #94200
derekalvarez
MemberIs it possible to overhang the logo with css?
I tried overflow: visible and some other code. Not sure what else to do...
http://cortezsanitation.com/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%; }
March 13, 2014 at 2:06 am #94606Au Coeur
MemberIt 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.
March 13, 2014 at 3:18 pm #94764derekalvarez
MemberYes, I did! Do you need to know how I did it?
March 13, 2014 at 3:32 pm #94767eamonmoriarty
ParticipantMarch 13, 2014 at 4:01 pm #94774Au Coeur
MemberI 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.
March 13, 2014 at 4:07 pm #94775derekalvarez
MemberI 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; }
April 24, 2014 at 6:05 am #102126eamonmoriarty
ParticipantI 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 -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.