Remove menu bar "dropdown" animation

[logoglo]

Hi, I dont know if im describing this well enough…but see here:

iikim asesores | inicio

I have a sticky menu setup in pro.

But there is an animation where the whole nav bar disappears, then drops down again:

If I put the trigger offset to 0, it kinda removes it, but there is still a millisecond flash of the menu disappearing and reappearing:

Any way to fix this?

[ruenel]

Hello @logoglo,

Thanks for writing in! At the moment, there is no option to remove the sticky navbar animation. You may use inline element CSS in your Bar element insert and position it as fixed.

• CSS Layout - The position Property (w3schools.com)

In your Bar element, find the “Customize” tab and insert your custom inline CSS:

.element {
  position: fixed;
}

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Kindly let us know how it goes.

[logoglo]

Thanks, I added that, but the flickering, millisecond blink is still there.

[tristup]

Hi @logoglo,

It seems that a similar problem has been solved by adding the following custom CSS code. I would suggest you add this to the Theme Options > CSS and let us know how it works for you.

.x-dropdown:not(.x-active) 
{
    display: none !important;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[logoglo]

The issue remains. I havnt added custom code or anything, this is actually one of your demo header nav bars.

[tristup]

Hi @logoglo,

I have added code through the Stylebot tool temporarily in the browser and it worked and the issue was resolved. Can you please check once again by adding the code and then check once by clearing all types of cache including the Style Cache from Cornerstone > Settings > System > Clear Style Cache and in the incognito/private mode of the browser.

If that does not help, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[logoglo]

Howdy, yeah, I already cleared the caches…login, in secure note. Thanks.

[tristup]

Hi @logoglo,

I have checked it thoroughly and found that the Content of the page is the reason behind your issue. While assigning the same header to the test page with the same content as Home Page the issue occurs, but when assigning the same header to another page that consists of the same content as your nuestros-servicios page it worked perfectly fine. I suggest you check by deleting the section of the pages one by one till the issue is fixed, and the last one you have deleted before the fix is the actual issue.

Please remember that there might be multiple sections that could be the reason behind your issue.

Thanks

[logoglo]

The issue is still on both pages…I have built the pages in cornerstone, by adding sections, like a normal page, your solution seams a little long winded…I tried it on the homepage, deleting each section as you suggested, only when there was a blank page did the issue stop…is there no way I can just disable the animation? seams like that should be an option, to have your bar animate or not…not all clients wants it animated. If the animation was disabled, there wouldn’t be an issue.

[tristup]

Hi @logoglo,

Unfortunately, there is no animation applied to it. I would suggest you add a Gap element with some Gap Size as shown in the given screenshot and check if that is also creating the problem while scrolling.

If that does not recreate the issue, you add the section one by one and check if the issue is back or not. The last section added before the issue is back is the reason and you need to check it again.

Thanks

[logoglo]

Where would I add the gap?

As I said, the issue only goes away when I delete all of my sections, the same sections created using your cornerstone. So this is an issue you need to look into a little deeper.

There is an animation, if you look further up this page @ruenel says “At the moment, there is no option to remove the sticky navbar animation” this to me says there is an animation.

[ruenel]

Hello @logoglo,

The Sticky Animation is not really an animation. It is a result of the shift from relative position of the navbar towards becoming a sticky navbar. This movement is very visible if you have added a Trigger Offset in your Sticky Options in the Bar elements settings.

If you have a 0 offset, it may or may not notice the movement which you referred as the animation.

Hope this helps.

[logoglo]

I have it set to 0…the issue remains…and I feel the issue isnt getting resolved…

[christian]

Hey @logoglo,

I suspect that the cause of the issue is either coming from your custom section background and/or too much scroll effects in the home page.

If you take a look at the test page (see the secure URL in the secure note) I created which is a modified copy of your home page and using the same header as your home page, the “flicker” or what you’re referring to as animation, disappears.

If you see in the page, I’ve deleted all sections except the 1st section then I added a new section with just a Gap element to allow page scrolling. In the 1st section, if I remove your custom section background, the issue is fixed even with the scroll effects still applied in the 1st section’s elements.

If I add the rest of the sections back but still without the custom background, the issue comes back. That is why I also suspect too much scroll effects might be causing the issue.

With all that said, please try the following:

1. Remove all Custom Backgrounds you have in your sections
2. Disable all Scroll Effects you have in the elements. Please note that Scroll Effects must be used sparingly.

Thanks.

[logoglo]

Ok, rather than re-do my entire site, I think I’m going to have to live with this glitch.

Though, the fact it might be conflicting with your own scroll animations, I would look into fixing it for future releases right? so other people don’t run into the issue.

If its my custom backgrounds, they are lottie files, commonly used, but I do understand if a 3rd party code might be causing the issues.

Thanks.

[marc_a]

Hey @logoglo,

I’ll add this issue on our tracker so that it will be taken into action in the future. If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.