Hi Guys, I have Unwind on a couple of sites. I recently became aware of the main menu becoming animated when the sticky menu is enabled. I have the menu set to below header image and set to sticky. When the menu bar reaches the top of the screen it animates and the whole bar rotates like a windmill before coming to rest. Initially, this was fun but after a few times it “gets old” real quick. It just distracts from the focus of the site. I don’t believe it did this action before a few days ago. I think there was a theme update a few days ago, correct me if I am wrong.I have tried to find a setting for it to no avail. It only animates on the Homepage. I need to turn this off. Hopefully, someone can point me in the right direction.
My site is ….teacherbrendan.com
Chrome browser
Wordpress 4.9.2
Unwind Version: 1.2.5
Regards…Brendan
Hi Brendan,
We’re not too sure what is adding this effect. Can you try disabling all non-SiteOrigin plugins and see if this fixes the issue? You’ll need to clear all your caches after disabling your plugins.
If it does fix the issue, then try re-enabling your plugins one by one until the issue comes back. This procedure will help diagnose which plugin is causing the issue.
Once we know that, we’ll be able to look at what might be causing the conflict and either solve the problem or help you find an alternative plugin.
If that doesn’t help, please try changing to just the parent theme to see if that helps.
Thanks for the reply Alex. I have previously followed each of the steps you mentioned to no avail. Upon reading your reply I retraced each of these steps again but still no joy.
I have tried disabling ALL plugins but no change.
I reverted to Twenty Seventeen Theme at which point the Menu then performs correctly.
I then reverted to Unwind Parent theme and the issue returns.
I have additional .css in the customizer and the Unwind child-theme. I cannot see anything there that might reference an active menu. (I could put the additional .css in the WP additional CSS but chose to install a Child Theme to have the option to make alterations other than CSS)
One further thing I tried was changing Menu location in the Theme Customize-Theme settings-Header. None of the four options stops the rotation but selecting “Menu inline with logo” makes the whole Header rotate with the menu? Does that help?
Can you advise what my next step should be?
Hi Brendan,
Can you please try reinstalling the theme? I ask because we didn’t include this animation effect in a recent update (you can verify this by checking the demo) and I can’t spot where it’s coming from so I’m not too sure how to remove it so I suspect it may have somehow been added to your theme.
To do this, please navigate to WP AdminAppearanceThemes and change to a non-Unwind theme, then delete Unwind. Click Add New and search for and install Unwind.
Can you please send me the custom CSS you’ve added so I can check over it?
Okay, so removed and reinstalled the Unwind Theme and activated. – no change tried with no Additional css or child theme – no change.
Tried with no plugins – no change
Checked all settings in Customizer, nothing seems incorrect.
Checked Header media – seems fine – additional attributes or anything untoward.
Continuously clearing caches and refreshing page/browser at each test.
Checked in both Chrome Browser and Internet Explorer.
Revert to Twenty-Seventeen Theme – Problem is gone.
Makes me think I'm missing something really basic. But I don't know what.
Okay, Alex, I can stop the menu animating. It happens only on Home and Blog pages.
I cloned the front page, named it Copy of Homepage and assigned it to the main menu.
The behavior occurs on this page also.
The home page has two rows each with content in page builder.
Row one used the SiteOrigin Editor Widget. Row two uses the Visual Editor widget.
I deleted row one, saved, refreshed – bingo menu is now static.
Went to the original HomePage in the page editor. Looked at the TEXT tab to see what – if any – code was active that first row.
I cut and removed the code for a Video that displays on the page. The reference link seems clean but removed it to see what happens.
Updated the page went to Frontend. – Problem solved.
I went to the Blog on the frontend and found I had the same video in a post there.
I went to that post in the backend and changed it from Published to Draft status and the problem disappeared on the Blog page.
The problem seems to be the Media Player, it plays well but does not like
Unwind. Its ok in Twenty-Seventeen.
Hi Brendan,
Thanks. We’ve identified the exact CSS causing the spins, but we cannot work out why this CSS is being triggered on your website as we cannot replicate this issue on any other North test site. Can you please run the aforementioned plugin conflict test but disable everything but whatever you’re using to add video player and SiteOrigin North?
For reference, the CSS is:
@-webkit-keyframes a { to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } @keyframes a { to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } }The above CSS is present in a media elements Legacy file – http://teacherbrendan.com/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css
Hi Alex, this apparition is only occurring in "Unwind " theme. (You mentioned North theme – Is North a version or parent of Unwind?)
"ALL" plugins off. Caches cleared. Still happens.
The video is rendered by WordPress core media functions not an subsequently added application of any sort. So no I can't turn that off without messing with the core.
When building that page I used the default "Add Media" button above the
TinyMCE editor. This gives the full-size video window as we see it on my site. If I use the add media from the "Insert" tab of TinyMCE editor – I get a video window one quarter the size and very basic CSS.
I looked at the .css you found. This is part of the 4.9.2 WordPress zip file. Standard WordPress everyone loads or updates with.
It is not added by users plugins/themes or other means.
Seems the conflict is WordPress Core/Unwind. But why is the big question –
thanks for your efforts so far, I do greatly appreciate help.
I have the site currently on Unwind Child with no plugins at all. 3.56pm
Hi Brendan,
Sorry – that was a typo. I had meant to say Unwind, not North. North is a different theme.
Regardless, we still can’t replicate this issue on any of our test websites (we even tried a few fresh 4.9.2 installs – nothing). Are you able to replicate this issue on a different website? If you can, great! What steps did you take to replicate it?
We know the aforementioned CSS is in the WordPress core, but we don’t know what’s causing it to affect the menu on your website (your website as we can’t replicate it on any other site). That one thing triggering is the one thing we need to work out how to resolve this issue.
Does that make sense?
I have just replicated the effect on another WP SITE. (see
https://btrservices.com/)
I added a different video this time at the bottom of Homepage.
It is .mp4 format same as the first sites video but a different video from a different source.
( i have left this published so you can see the same effect taking place on a different site.)
One curious thing I have also now confirmed as probably part of this anomaly.
Editing the Home/ front-page and adding the video – I clicked done –
clicked update – clicked view page – and we see the video there at the bottom and the menu summersault as it hits the sticky at top of the screen.
The curious thing I noticed is that Front/Home page is actually been forced into draft status.
Checking the customizer – Home page Settings – the setting has changed from static page to blog page.
Visiting the site in another window confirms this.
I have to republish the Home page, then reset it to Frontpage.
I have never had a published page revert to Draft in this manner before.
I guess a draft page by default cannot sustain the Static Front page setting so it reverts to the Default Blog page.
The Media in both sites (all my sites) is uploaded by 'Enhanced Media
Library PRO' (http://wpuxsolutions.com/)
I have tested with it disabled in the previous multiple tests. But is it possible that the media uploaded with it has some additional attributes that may have come into play even when the plugin is disabled?
Remembering the issue is not present in other Themes with or without this enabled?
Hi Brendan,
Thanks. I’ve been able to replicate this issue using the instructions you’ve outlined. This will be fixed in the net update, but in the meantime, you can bypass this issue by adding the following CSS to WP AdminAppearanceCustomize, Additional CSS:
.sticky-menu.sticky-bar-out #masthead .sticky-bar { -webkit-animation: .3s ease-in; animation: .3s ease-in; }Thanks for all your time Alex. Yes this has done the trick. I do enjoy working with the SiteOrigin products. They are usually clean, simple and work out of the box. I think it probably is time for me to invest in the
Premium package in respect for all you guys do for the WordPress community.
Thanks again, do I need to mark this as closed/solved? – or do you do this?
Hi Brendan,
Great to hear that helped! :)
This issue was sadly caused by the build process which didn’t affect the version I was using which is why we didn’t pick up on it sooner. We’ve added additional checks to prevent these sort of issues from happening again.
I’ve marked this thread as resolved.
Thanks Alex, also i have purchased a 5 site Premium bundle subscription as a result of your outstanding support. Thanks again.