Solution to Logo Issues

I've had the same issues as lots of people here with the logo. I liked the way the CSS logo moved from the centre to the left on scroll but was suffering with the issue of it becoming distorted when it had moved to the left. I also had no way of editing the svg file. So here is a solution that works;

Create your logo to the same dimensions as the original Events logo and save it as a png file.
Replace the svg image with your png image and edit the relevant CSS to use your new png file.

Here's where you solve the distortion problem;
In the Template CSS go to line 275 and change the background-size from 188px 152px to 140px 152px

#gkLogoSmall.cssLogo {
background: url('../images/logo.png') no-repeat center center;
background-size: 140px 152px;
background-position: center bottom;
/* You can specify there logo size and background */
height: 90px;
width: 152px;

Problem solved!

Hello,

Thank you for your post - I've make it sticky

With the solution you have provided, the logo does not appear in Google Chrome and Safari. In fact, the logo does not appear in the quickstart pack as well. This seems to be very frustrating

@bihuboliya - did you added closing "}" at the end of the provided code?

Hi Dziudek, yes ofcourse I did... Anywys, I did some other trick to get what I wanted. Thank you.

Can I do using CSS Override?