Logo gets squashed vertically with sticky header on retina macbook pro

cratexl · July 2014

Hey there, just as the title says, my logo (which is vertically larger than the demo logo) is getting squashed vertically in the sticky header when you scroll down and the logo gets reduced. It's fine on normal screens so it's a bit weird. Which css file has the media queries for the logo element? Or can I take care of this in the custom CSS box in the options?

Thanks

Albert · July 2014

Please make a screenshot of how it looks on your computer and send us url to your website also so we can have a look on it.

cratexl · July 2014

Here's a screenshot.

http://i57.tinypic.com/s336v8.jpg

It's on a local server at the moment so I'd need to know where to make the edits myself at this stage.

Thanks

Albert · July 2014

As we see your logo looks fine. This is how theme works. If you got large original logo, then it must be resized for sticky menu as for sticky section there is not to much place as in regular top because it will look really bad. What you ca try is below css but we can`t guarantee if this will work fine until we won`t see it live on your website.

#Top_bar.is-sticky #logo img { max-height: 65px; }

cratexl · July 2014

No problem. I've had a fiddle with the responsive css and it's looking good. I'll see how I go with your code suggestion as well. Thanks very much, great support.

cratexl · July 2014

Just gave you dudes a 5 star on themeforest.

Cheers

Albert · July 2014

Thanks a lot!

Advancedmodular · July 2014

Can I ask what changes you made to the responsive.css? I have the same issue and am trying to remedy it.

Your code works muffingroup, but I am getting an overhang of the logo beyond the bottom of the top bar.

Albert · July 2014

@Advancedmodular If you will make a screenshot of what you mean with explanation and will give us url to your website then we can have a look on it.

@cratexl We really appreciate if you can share your solution with @Advancedmodular because maybe this will also help in his case.

cratexl · July 2014

Hey no problem. Here's what worked for me, you might need to fiddle with the value for height depending on the dimensions of your logo:

#Top_bar.is-sticky #logo img { max-height: 40px; width:100% !important;}

You can edit your css directly or use the theme options. The latter is the easiest place to enter it.

Logo gets squashed vertically with sticky header on retina macbook pro

Comments