Logo that hangs outside the .site-header in Genesis with CSS
Warning: count(): Parameter must be an array or an object that implements Countable in
/home/chris493/public_html/wp-includes/media.php on line
1176
alt="logo-mark-outside-area" width="800" layout="responsive" height="417">
This is a Google AMP optimized post. View the original: Logo that hangs outside the .site-header in Genesis with CSS. Google AMP is new technology and this post may contain tutorials with content you can't see unless you view the original, mobile page.
A week or so ago someone in a Genesis forum had a CSS situation where the client’s logo designer suggested placement outside the .site-header. This example is using Outreach Pro. If you use this in another theme, you may have to make adjustments to the CSS.
View Demo
Software requirements:
- Photoshop or Illustrator or equivalent
- FTP
- Code Editor
Set up the Logo
Get the vector logo and either open it in Illustrator or place it as a smart object in Photoshop on a layer. Make this file size 2x larger than it will be viewed online. You will make two versions of the logo and three total files. The first is for small viewports and the other images are the logo mark and the text for larger viewports. Use the slice tool and slice the logos accordingly. When you save for web, select these slices, make them PNG transparent, and choose “Selected Slices” under the Slices toggle in the save dialog. You can download this PSD.
Add the logo CSS
You’ll need to add the following CSS after all other CSS. You can either paste it in at the end of your child theme’s style.css (using a code editor and ftp) or wp_enqueue another style sheet.
Since this CSS is using the sizes for this demonstration, your particular situation will be different. This is using mobile first CSS. If you need to support IE8, you’ll need the respond.js plugin.
Warning: count(): Parameter must be an array or an object that implements Countable in
/home/chris493/public_html/wp-includes/media.php on line
1176
Warning: count(): Parameter must be an array or an object that implements Countable in
/home/chris493/public_html/wp-includes/media.php on line
1176
Warning: count(): Parameter must be an array or an object that implements Countable in
/home/chris493/public_html/wp-includes/media.php on line
1176
Warning: count(): Parameter must be an array or an object that implements Countable in
/home/chris493/public_html/wp-includes/media.php on line
1176
Warning: count(): Parameter must be an array or an object that implements Countable in
/home/chris493/public_html/wp-includes/media.php on line
1176
Warning: count(): Parameter must be an array or an object that implements Countable in
/home/chris493/public_html/wp-includes/media.php on line
1176
Warning: count(): Parameter must be an array or an object that implements Countable in
/home/chris493/public_html/wp-includes/media.php on line
1176
Warning: count(): Parameter must be an array or an object that implements Countable in
/home/chris493/public_html/wp-includes/media.php on line
1176
Warning: count(): Parameter must be an array or an object that implements Countable in
/home/chris493/public_html/wp-includes/media.php on line
1176
Warning: count(): Parameter must be an array or an object that implements Countable in
/home/chris493/public_html/wp-includes/media.php on line
1176
