• Academy
  • Blog
  • Tools
  • About + Contact
image/svg+xml image/svg+xml
  • Academy
  • Blog
  • Tools
  • About + Contact
Log in
Register

Suggestion for smoother scaling of logo in sticky header

New Front EN › Support Forums › Shogun Theme Support › Suggestion for smoother scaling of logo in sticky header

Tagged: Logo, Sticky header

  • This topic has 2 replies, 2 voices, and was last updated 5 years, 9 months ago by satoristudio.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • May 26, 2015 at 4:37 pm #6801
    skafte
    Participant

    Hi Andrii (and everyone else),

    Hope you are well.

    Just discovered a solution to the scaling of the sticky header logo that I thought would be worth sharing here in case you’d want to implement it in the theme OR in case someone else in the forum should be interested.

    The scaling of the logo in the sticky header hasn’t been great in Safari (although fine in Firefox and in Chrome). Here’s an example: https://goo.gl/C9639B – you’ll notice that the image kind of blinks and reloads when minimised.

    I had added this additional CSS to make it work as I wanted it to:

    #logo img {
    width: 300px;
    height: auto;
    max-width: 90% !important;
    }

    .fixed-header #logo img {
    max-height: inherit !important;
    width: 150px;
    height: auto;
    max-width: inherit !important;
    }

    However, with the properties of CSS3 3D Transform the ‘animation’ becomes more smooth, also in Safari. Here’s an example: https://goo.gl/qCqsWH

    I achieved this by changing the CSS as follows:

    #logo img {
    width: 300px;
    height: auto;
    max-width: 90% !important;
    }

    .fixed-header #logo img {
    max-height: inherit !important;
    -webkit-transform: scale(.5) scale3d(1, 1, 1);
    -moz-transform: scale(.5) scale3d(1, 1, 1);
    -o-transform: scale(.5) scale3d(1, 1, 1);
    -ms-transform: scale(.5) scale3d(1, 1, 1);
    transform: scale(.5) scale3d(1, 1, 1);
    }

    Now I’m not yet sure if this is a bullet proof solution, but so far it’s working great for me! I’ll let you know if I experience any issues.

    Thanks,

    Jonas

    May 26, 2015 at 5:03 pm #6802
    skafte
    Participant

    Oh, forgot that this feature doesn’t actually exist anymore in the theme! (which I think is a good idea by the way!) – my client just really wanted it back, and so I added it manually. Anyway, I hope this scaling method might be useful to other layout types such as the left-aligned menu, which I believe still resizes on scroll(?)… :-)

    May 28, 2015 at 8:00 am #6803
    satoristudio
    Member

    Thanks for posting this, Jonas! That does look nice :)

    Best,
    Andrii / Satori Studio

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.
Log In

Search the blog:

Recent Posts:

  • Avast Secureline VPN Review 2021: Do Size and Reputation Matter? February 5, 2021
  • Warpgate Review 2021: Reimagining Hosting, or Just Showing Off? January 30, 2021
  • Paperform Review: Should You Choose This Form Builder in 2021? January 20, 2021
  • Udemy Coupon Codes 2021: Find the Best Courses on Sale on March 4th November 8, 2020
  • How to Get Google to Index Your New Website Instantly November 3, 2020
© Satori Studio 2012 - 2021
  • Privacy Policy
  • Refund Policy
  • Terms and Conditions