Hi everyone, I wanted to share how I fixed an issue I was having trying to add my logo alongside my site title in Genesis. Out of the box, Genesis gives you the option to edit both your site title and your header image, and it looks easy enough from the customiser:
In theory, you would upload your logo to your header image, and Genesis would call in both the Title title AND the header image and display both. Except in Genesis it doesn’t.
I searched far and wide for a solution, and couldn’t find one so after some time playing around with my dev tools, I came up with a workable solution and that is using a pseudo element in CSS.
A Pseudo element is used to style specified parts off an element, eg. Before, first-line, first-child and so on.
Using pseudo elements in CSS allows us to further customise our Genesis theme without having to copy markup in the parent theme files, altering it, and adding a copy of that file to our child theme.
The specific pseudo element that I used to add my logo to my site title in Genesis, was the ::before selector. I targeted my .site-title a element, and added a ::before pseudo class to add an image above my site title.
You can see the result at the top of my page, and you can copy the markup on Github. Whilst I could have only shared the site-title a with the pseudo element, I added all my site-title CSS in as well in case it is different from yours, depending on which theme you are using.
I hope this solution works for you, and please leave a comment and let me know if you need any help.
Leave a Reply