How to disable logo animation

  • Resolved TrishaM

    (@trisham)


    3 years, 2 months ago

    I posted this in the support for our current Theme (Pique Café) but it occurred to me that this seems to be a Jetpack function so I thought it best to repost here.

    Is there a way to keep the site logo feature but disable the animation on hover? Client initially liked this effect but now hates it and wants the logo to remain static even when hovered over.

    We love the Theme and don’t really want to have to find a new (similar) Theme, this is the *only* aspect of this Theme they don’t like. We only use Jetpack to enable the custom site logo, without Jetpack there is no option to customize/display a site logo.

    I know I can simply photoshop all the post/page featured images to include the logo, but that’s far from ideal as it’s a lot of work to do every time they want to upload a new featured image, and if they ever change the logo all images would need changing.

    If there is simply a script that handles the animation that I can de-register in a Child Theme functions.php file I can do that, just need a bit of guidance.

    Thanks for any help you can offer!

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi @trisham

    Could you please post your site URL here so that we can have a look?

    If you want it to remain private, you can also contact us via this contact form. If you choose to reach out directly, please include a link to this thread.

    Thanks!

    Thread Starter TrishaM

    (@trisham)

    Hi @deathlynotes thank you, I don’t mind posting publicly, it’s just a small website for an independent feature film that’s in pre-pre-production. I got an answer in the Theme support forum, they don’t think it’s a Theme feature so best guess is it’s something in Jetpack.

    The site is here: https://somewheretorun.com/

    Fingers crossed….seems like it *should* be simple to override the hover behavior, where the logo bounces between tiny and normal size…

    UPDATE: VERY weird, I just clicked on the link I posted to be sure it worked, and it opens in Safari but does NOT do the hover behavior, it only appears to happen in Firefox, Brave browser, and Cocoon…..but oddly not Safari….hmmm.

    • This reply was modified 3 years, 2 months ago by TrishaM.

    Hi @trisham

    I made the tests in Firefox and Chrome, and I wasn’t able to reproduce this hover behavior on my end.

    Could you send a screenshot showing what you see on your end, please?

    I recommend https://snipboard.io/ for easily sharing screenshots – please follow the instructions on the page, then paste the URL in this email. It works with Chrome and Firefox.

    Let me know if you have any questions.

    Thread Starter TrishaM

    (@trisham)

    Hi @deathlynotes I made a short (11 seconds) screen video because I think it will show you the hover behavior better than just a static screenshot can do, here’s a link to that short video:

    https://www.loom.com/share/af39f8ef9e574c59bb115a40d6eb0cbc

    After activating the Loom video tool I had to click on the Firefox browser page, then when I move my mouse to the Logo you can see how it changes.

    In the Pique Theme’s stylesheet I found this section:

    .site-branding .site-logo-link:hover {
	-webkit-transform: scale(5%);
	    -ms-transform: scale(5%);
	        transform: scale(5%);
}

    But commenting it out didn’t make any difference, so I honestly don’t know if it’s in the Theme or the Jetpack plugin, nor why it works in other browsers but not Safari, nor how to disable it.

    Thread Starter TrishaM

    (@trisham)

    UPDATE: I believe I have this resolved now, but it took a lot of sleuthing.

    I’m sure now that the hover effect is added by the Theme, not Jetpack. I did have to actually ADD some CSS to my Child Theme, commenting out the CSS of the Parent Theme (for the site branding) did not work.

    SO I added the same snippet of CSS to the Child-Theme stylesheet but changed the “transform” to ‘none’ and added !important.

    It’s no longer animated and my client is happy. Marking this as resolved. Thank you for looking at this, I do appreciate it.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to disable logo animation’ is closed to new replies.