In the old post on Designody, I have written about adding a logo before site title in Genesis. Today i am going to show you how you can add a logo after the Site Title in Genesis.
We will use the same approach to get this.
So, what we have to to it to make the .title-area:before to .title-area:after
What are you waiting for? Add this to your CSS file.
.title-area { width: 220px; } .title-area:after { background: url(/logo.svg) no-repeat !important; width: 80px; display: inline-flex; float: right; min-height: 45px; margin-top: -35px; margin-bottom: -12px; content: " "; }
and the result be like this:-
Still using .png? no worry. here is the CSS for you.
.title-area { width: 200px; padding-left: 10px; } .title-area:after { background-image: url(/logo.png); no-repeat !important; width: 50px; height: 50px; background-size: contain; display: inline-flex; float: right; margin-top: -35px; margin-bottom: -12px; content: " "; }
The Customization is infinite and you can adjust it accordingly. Let me know if you have any issue setting this up.