Radha asks,
how can I get the title-area to float to the left & be smaller (right now it’s getting 1120px from somewhere) & the social icons to float to the right? On mobile the logo should be stacked on top of social icons – all nice & centered.
When it comes to logos and headers in WordPress, inline is the way to go in my opinion, not background images.
Here’s a screencast of the result after implementing the following steps:
Step 1
Upload the logo/header image to child theme’s images directory using a FTP client or cPanel file manager.
Step 2
Edit DailyDish Pro’s functions.php.
Comment out or delete
unregister_sidebar( 'header-right' );
Add this near the end:
| /********************************** | |
| * | |
| * Replace Header Site Title with Inline Logo | |
| * | |
| * Fixes Genesis bug - when using static front page and blog page (admin reading settings) Home page is <p> tag and Blog page is <h1> tag | |
| * | |
| * Replaces "is_home" with "is_front_page" to correctly display Home page wit <h1> tag and Blog page with <p> tag | |
| * | |
| * @author AlphaBlossom / Tony Eppright | |
| * @link http://www.alphablossom.com/a-better-wordpress-genesis-responsive-logo-header/ | |
| * | |
| * @edited by Sridhar Katakam | |
| * @link http://www.sridharkatakam.com/use-inline-logo-instead-background-image-genesis/ | |
| * | |
| ************************************/ | |
| add_filter( 'genesis_seo_title', 'custom_header_inline_logo', 10, 3 ); | |
| function custom_header_inline_logo( $title, $inside, $wrap ) { | |
| $logo = '<img src="' . get_stylesheet_directory_uri() . '/images/siteHeader.jpg" alt="' . esc_attr( get_bloginfo( 'name' ) ) . '" title="' . esc_attr( get_bloginfo( 'name' ) ) . '" width="510" height="130" />'; | |
| $inside = sprintf( '<a href="%s" title="%s">%s</a>', trailingslashit( home_url() ), esc_attr( get_bloginfo( 'name' ) ), $logo ); | |
| // Determine which wrapping tags to use - changed is_home to is_front_page to fix Genesis bug | |
| $wrap = is_front_page() && 'title' === genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : 'p'; | |
| // A little fallback, in case an SEO plugin is active - changed is_home to is_front_page to fix Genesis bug | |
| $wrap = is_front_page() && ! genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : $wrap; | |
| // And finally, $wrap in h1 if HTML5 & semantic headings enabled | |
| $wrap = genesis_html5() && genesis_get_seo_option( 'semantic_headings' ) ? 'h1' : $wrap; | |
| return sprintf( '<%1$s %2$s>%3$s</%1$s>', $wrap, genesis_attr( 'site-title' ), $inside ); | |
| } | |
| // Remove the site description | |
| remove_action( 'genesis_site_description', 'genesis_seo_site_description' ); |
where siteHeader.jpg is the name of logo/header image present in DailyDish Pro’s images directory and 510 x 130 being its dimensions.
Step 3
At Appearance > Widgets, drag Simple Social Icons plugin’s widget into Header Right widget area.
Step 4
Add this in style.css:
| .site-header { | |
| text-align: left; | |
| padding: 40px 0; | |
| } | |
| .title-area { | |
| float: left; | |
| } | |
| .site-title { | |
| margin-bottom: 0; | |
| } | |
| .header-widget-area { | |
| float: right; | |
| padding-top: 30px; | |
| } | |
| @media only screen and (max-width: 768px) { | |
| .site-header { | |
| text-align: center; | |
| } | |
| .title-area, | |
| .header-widget-area { | |
| float: none; | |
| } | |
| .header-widget-area .simple-social-icons ul.alignleft { | |
| text-align: center; | |
| float: none; | |
| } | |
| .header-widget-area .simple-social-icons ul li { | |
| float: none; | |
| display: inline-block; | |
| } | |
| } |
Source: http://www.alphablossom.com/a-better-wordpress-genesis-responsive-logo-header/
