Magazine Pro – logo to the left of site title

[morand13]

Hi,
I want to put a logo to the left of the site title. However, it seems you can only put in a header image or a title. You can do both. Can this be done? Any help really appreciated..... Please help...

http://www.onlinetoad.com

[Brad Dalton]

You can filter the title and add both.

Or use CSS http://wpsites.net/web-design/add-logo-image-next-to-title-in-studiopress-themes/

---

Tutorials for StudioPress Themes.

[morand13]

Hi Brad,

Thanks a million, that actually worked for me and I still can't believe it..... I am super duper happy with it....
D.

[morand13]

Hi Brad,

This works with a logo image size of 100px x 100px. When I change the size of my logo to 120px x 120px, it won't work. It cuts off the bottom part of the logo. Just wondering is there some other piece of code I need to change. I did change the min height to 120 etc and changed it in the functions file aswell. Code from CSS below is working for the 100px logo.

.site-title {
background-image: url(http://www.onlinetoad.com/wp-content/uploads/2014/03/plogo100.png); /* added this line */
background-repeat: no-repeat; /* added this line*/
font-family: 'Raleway', sans-serif;
font-size: 36px;
line-height: 1;
margin-bottom: 0;
float: left; /* added this line*/

}

.site-title a,
.site-title a:hover {
color: #222;
font-weight: 700;

/*added the following for logo and text together */

display: inline-block;
padding: 16px;
padding: 1.6rem;
text-decoration: none;
float: none;
margin-left: 100px;

}

.site-description {
display: block;
height: 0;
margin-bottom: 0;
text-indent: -9999px;
}

/* Full width header, no widgets */

.header-full-width .title-area,
.header-full-width .site-title {
width: 100%;
}

.header-image .site-description,
.header-image .site-title a {
display: block;
height: 0;
margin-bottom: 0;
text-indent: -9999px;
}

/* Logo, hide text */

.header-image .site-header .wrap {
padding: 0;
}

.header-image .site-title a {
background-position: center !important; /*was center*/
background-size: contain !important;
float: left;
display: block;
min-height: 100px; /* was90px*/
text-indent: -9999px;
width: 100%;
}

[Author]

Posts