Adam asks,
Do you have a tutorial on how to create the header so that the logo, navigation and social icons are all in-line ?
In this tutorial I share the steps to customize header in Genesis Sample child theme to show an inline logo image at floated to the left and a custom menu widget and Simple Social Icons widget floated to the right.
At medium and smaller screen widths, we are going to make the logo, nav and social icons appear centered and one below the other.
Step 1
Upload your logo image to child theme's images directory. To ensure that it appears crisp on retina displays, you may want to ensure that it's twice the size it should appear at. In this example I've used logo.png that's actually 600 x 120, but set to appear 300 x 60.
Step 2
At Appearance > Widgets, drag a Custom Menu widget into the Header Right widget area and select your desired menu that should appear in the Header.
Drag a Simple Social Icons' widget below the Custom Menu widget. Set the icon border radius to the same value as icon size for circular icons. Enter your desired social networks' URLs.
Step 3
Add the following at the end of child theme's functions.php:
/********************************** | |
* | |
* 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/logo.png" alt="' . esc_attr( get_bloginfo( 'name' ) ) . '" title="' . esc_attr( get_bloginfo( 'name' ) ) . '" width="300" height="60" />'; | |
$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' ); |
Logo file name and dimensions can be set in line 19.
Step 4
Add the following at the end of child theme's style.css:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.