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.
- Photoshop or Illustrator or equivalent
- 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.
All the best,
Affiliate Notice: I have affiliate links all over the place for companies I recommend. By purchasing through these links you help to support my family and to keep my blog going.