Logo gets squashed vertically with sticky header on retina macbook pro

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?



  • 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.
  • edited July 2014
    Here's a screenshot.

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

  • 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; }
  • 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.
  • Just gave you dudes a 5 star on themeforest. 

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

Sign In or Register to comment.