Align site-logo to left of site-title

jcoonrod · Member · Sep 7, 2016 at 11:13 pm
Copy link

Add topic to favorites
I use the Edin theme, which places the site-logo above the site-title. How can I customize css so that they are in-line?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Sep 8, 2016 at 8:50 pm
Copy link
Hi, this took a bit more work and futzing than I though. What I have done is to hide the existing site logo down to a width of 800px and added that image to the site title div. The reason I had to limit this to 800px and wider screens is that Community-Led can’t be broken into two words due to the dash between them and that causes the it to be broken within the words below 800px, which isn’t at all desirable. At 799px and narrower, things return to the original design. Add this to the bottom of your custom CSS and see what you think.
```
@media screen and (min-width: 800px) {
	.site-title {
		background: url("https://communitydevblog.files.wordpress.com/2016/09/cld-logo-180.png?w=188") no-repeat scroll left top / auto 100px;
		padding-left: 120px;
		height: 130px
	}
	.site-logo {
		display: none;
	}
	.site-logo-link {
		margin: 0;
	}
	.has-header-search .site-branding {
		max-width: 70% !important;
	}
}
```
jcoonrod · Member · Sep 8, 2016 at 9:00 pm
Copy link
Wow! Wonderful solution! Thank you!
thesacredpath · Member · Sep 9, 2016 at 2:19 am
Copy link
Awesome, and you are welcome!

No items found.