• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

AlphaOmegaDigital

Melbourne Wordpress Developer and digital marketer

  • About Us
    • Terms and Conditions
    • Privacy Policy
  • Services
    • WordPress Development
    • Digital Marketing
    • Content Marketing
    • FAQ
    • Training
    • Free marketing report
  • Portfolio
  • Blog
  • Contact

Mar 05 2021

Add a logo on top of your site title in Genesis

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.

* Title Area
--------------------------------------------- */
.title-area {
float: left;
padding: 25px 0;
width: 360px;
}
.site-header.dark .title-area {
padding: 15px 0;
}
.site-title {
font-size: 24px;
font-weight: 800;
letter-spacing: 2px;
line-height: 1;
margin-bottom: 0;
text-transform: uppercase;
}
.site-title a,
.site-title a:focus,
.site-title a:hover {
color: #fff !important;
}
------------This is the additional code I used to display my logo next to my site title------------------- */
.site-title a:before{
content:"";
background-image:url('https://source.unsplash.com/random');
background-size: contain;
background-repeat: no-repeat;
display: block;
width: 4em;
height: 3em;
}
view raw gistfile1.txt hosted with ❤ by GitHub

Written by alphaomegadigitalau · Categorized: Uncategorized

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Recent Posts

  • Add a logo on top of your site title in Genesis
  • Banyule Business grants round 4 are now open.
  • How to create an XML Sitemap in WordPress
  • 9 Free business and marketing tools for the lean entrepreneur
  • The 4 best plugins you need in 2021 for your WordPress website

Recent Comments

    Archives

    • March 2021
    • February 2021
    • January 2021
    • December 2020
    • August 2020

    Categories

    • Blogging
    • Genesis
    • SEO
    • Uncategorized
    • Wordpress

    Meta

    • Log in
    • Entries feed
    • Comments feed
    • WordPress.org

    Footer

    Get Social

    • Facebook
    • Instagram
    • Twitter
    • YouTube

    Company Vision

    Alpha Omega Digital’s vision is to provide small business owners with the correct workflow and strategies to build their brand and market themselves online. Our mission is to provide you with systematic and easy to implement marketing system and end your frustration once and for all.

    Get in touch

    • Email
    • Phone
    • About Us
    • Contact

    Copyright © 2021 ยท Alpha Omega Digital Pty Ltd