• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Add Logo Image Next To Title In StudioPress Themes

There’s different ways you can add a logo or any other image inline with your sites title.

You can filter the default function for the title using PHP code and then add styling for your new title and image.

Or you can simply add a background image to your existing title and modify the default CSS code.

In this tutorial, we’ll use the CSS method and the Metro Pro theme by StudioPress as an example:

Here’s the result of what this solution produces using an image which is 200px width by 100px height:

Image Next To Title

And here’s an example of what the default text title looks like without the image.

default site title

Default Site Title CSS

Here’s the default CSS code we need to modify in your child themes style.css file starting at Line 935:

.site-title {
    font-family: 'Oswald', sans-serif;
    font-size: 48px;
    font-size: 4.8rem;
    line-height: 1;
    margin: 0 0 16px;
    margin: 0 0 1.6rem;
    text-transform: uppercase;
}

.site-title a,
.site-title a:hover {
    background-color: #f96e5b;
    color: #fff;
    display: inline-block;
    padding: 16px;
    padding: 1.6rem;
    text-decoration: none;
}

Customized CSS Code

After uploading the logo image to your child themes images folder and adding CSS code, here’s the working CSS you can add at the end of your child themes style.css file or replace with the default.

.site-title {
        background-image: url(images/image.png);
    background-repeat: no-repeat;
    font-family: 'Oswald', sans-serif;
    font-size: 68px;
    font-size: 6.8rem;
    line-height: 1;
    margin: 0 0 16px;
    margin: 0 0 1.6rem;
    text-transform: uppercase;
    float: left;
}

.site-title a {
    background-color: #f96e5b;
    color: #fff;
    display: inline-block;
    padding: 16px;
    padding: 1.6rem;
    text-decoration: none;
    float: none;
    margin-left: 200px;
}

CSS For Hover Effect

You could also add this code and modify the values for the background color and text color when the title is hovered:

.site-title a:hover {
    background-color: #E4E4E4;
    color: #2A93C2;
    display: inline-block;
    padding: 16px;
    padding: 1.6rem;
    text-decoration: none;
    float: none;
    margin-left: 200px;
}

And here’s the hover view.

site title hover

To make the title area the same height as your image, simply change the font size for the site-title.

Mobile Responsiveness?

This will depend on the dimensions of your image however its not difficult to add a class for your image with different values when viewed on different sized screens/devices to the existing Media Queries included in all Pro themes.

Related Tutorials

  • Add Site Title After & Inline With Logo In Genesis Sample Child Theme
  • Add Image Inline & Before Site Title in Genesis
  • Add Avatar Inline & Before Site Title in Genesis

Header Image

Reader Interactions

Comments

  1. Tom says

    January 18, 2014 at 11:58 am

    is there a chance to get the logo clickable ?

    Log in to Reply
  2. Paul says

    January 2, 2014 at 8:12 pm

    Hey there – I can’t get this to work with the new Outreach Pro – can you give it a shot and let me know if i’m missing something. thanks so much – yours is my Favorite tuts site for genesis!

    Log in to Reply
    • Brad Dalton says

      January 2, 2014 at 8:28 pm

      Just tested on the new Outreach Pro theme and works perfectly.

      logo in primary nav

      Log in to Reply
      • Paul says

        January 2, 2014 at 9:16 pm

        hey Brad – thanks for the speedy reply – your graphic above is showing the logo in the Nav Gar – the tutorial above is for Next to Site Title – this is what I’m hoping to do. can you give me an example of that? thx again!!

        Log in to Reply
        • Brad Dalton says

          January 2, 2014 at 9:31 pm

          Sorry. Confused there for a minute.

          I will need to test the solution with the new theme to make sure it works but i think its going to be pretty much the same.

          Make sure your image path and file name are correct.

          Log in to Reply
          • Paul says

            January 2, 2014 at 9:57 pm

            the image path / file name is correct – the logo shows up, but sits behind the Site Title text, not next to it. thx

          • Paul says

            January 4, 2014 at 1:33 am

            hey there Brad – any luck on this yet? thx so much – your site is great!

          • Brad Dalton says

            January 4, 2014 at 5:21 pm

            Hard to say Paul.

            Would need to look at all your code and test it locally using the same theme you’re using.

            When i tested it and took the screenshots, i was using Metro Pro. May need tweaking for other themes.

  3. Zimbrul says

    November 3, 2013 at 4:41 pm

    This is a brilliant idea! My company intranet’s website uses this technique to place announcements and they are always clicked.

    Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.