Logo gets squashed vertically with sticky header on retina macbook pro

cratexl

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

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

cratexl

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

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; }

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

cratexl

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

Just gave you dudes a 5 star on themeforest. 

Cheers

Albert

Thanks a lot!

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Advancedmodular

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

@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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

cratexl

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.