Main menu jumps when scrolling

Dear Support,
I've noted that the main menu is keeping jumping when the user scrolls. This behaviour is weird, beacause in your demo the main menu looks stable when scrolling. How can I fixed?

Best,

Roberto

Could you please post an url to your site?

I send you in PM details

I also have the same problem with Chrome and i.e.
My site is istitutolagioiosa.it
You help me? thank you

@robertobaggio video is not enough I need to see a live site.

It seems like one of our latest updates introduced a fix for iPhones with iOS >=8 but now it behaves this way.
I'll report that to our devteam.

Hi Ciberek,
you can check the link provided by @lagioiosa here: istitutolagioiosa.it
Can you see that the menu jumps when scrolling?
I recorded the video for you just in case you might not be able to see this behaviour in my and @lagioiosa's website by your pc,
Please let us know how to fix it,
Best
Baggio

I'm waiting for our devteam response.

Dear Cyberek,
have you got some news?
A month is almost gone from the latest post,
Best,
Baggio

I have bumped the question. I'll let you know as soon as possible if there is any fix or a change is being planned for this element.

I guess the only solution is to revert the patch which fixes ios issue, but it will introduce the bug on ios mobile devices. Are you interested in such solution?

We will try with another menu style in one of next releases as this one seems to bother our users more and more. Sadly,if you revert you will disable menu usage on iOS (due to a bug in the way Mobile Safari renders some elements).

I think this template cannot considered a product until this issues will be fixed. We are talking about two serious issues.
Are you 100% sure Cyberek that there is no way to stop the "jumping behaviour" in desktop resolution?
We might allow the patch in mobile resolution and disable it in desktop resolution?
or fix the jumping behaviour with css just in desktop resolution?
Rob

The issue is basically connected with sticky header. If the sticky header has position:fixed, it will introduce problems to iOs (mobile menu), so we modified it and created position:absolute where JavaScript counts top offset and modifies it. But while JS is slow, so the "jumping behavior" can be seen. If you would like to resign from sticky menu, then there should be no problem at all.

Where is support on this? I am also having this issue and it needs to be addressed or the template really isn't usable.

Support!!!!! Please advise.

We will try with another menu style in one of next releases as this one seems to bother our users more and more. Sadly,if you revert you will disable menu usage on iOS (due to a bug in the way Mobile Safari renders some elements).

Why does this work fine in the demo and not work when we install it? Also, why would this not be fixed. Fix and release an update to the template so we can get on with building our websites!

@1option I have already replied.
Demo uses old way of displaying sticky header which has a bug on ios. Please read carefully what I have described above.

So when will a patch be released to fix this error that everyone is having??

All your customers are stuck now with lots of wasted time designing around this template. Its not usable like this.

Not all, just few that finds this annoying, it's also only a bug in this template. Fix will not be released today, not tomorrow. It is also not up to me to decide when.
You can try to revert the iOS fixing by editing:
gk_cloudhost/css/menu/menu.css
and changing:

Code: Select all

#gkMenuWrap {
   background: #fff;
   -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .26);
   -moz-box-shadow: 0 0 6px rgba(0, 0, 0, .26);
   box-shadow: 0 0 6px rgba(0, 0, 0, .26);
   min-height: 70px;
   left: 0;
   position: absolute;
   -webkit-transition: top .2s ease-out;
   -moz-transition: top .2s ease-out;
   -ms-transition: top .2s ease-out;
   -o-transition: top .2s ease-out;
   transition: top .2s ease-out;
   top: -150px;
   width: 100%;
   z-index: 1001;
}


to

Code: Select all

#gkMenuWrap {
   background: #fff;
   -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .26);
   -moz-box-shadow: 0 0 6px rgba(0, 0, 0, .26);
   box-shadow: 0 0 6px rgba(0, 0, 0, .26);
   min-height: 70px;
   left: 0;
   position: fixed;
   -webkit-transition: top .2s ease-out;
   -moz-transition: top .2s ease-out;
   -ms-transition: top .2s ease-out;
   -o-transition: top .2s ease-out;
   transition: top .2s ease-out;
   top: -150px;
   width: 100%;
   z-index: 1001;
}


remove this part (same file):

Code: Select all

.imageBg #gkMenuWrap {
    -webkit-transition: top .2s ease-out;
    -moz-transition: top .2s ease-out;
    -ms-transition: top .2s ease-out;
    -o-transition: top .2s ease-out;
    transition: top .2s ease-out;
}


and finally edit this file:
gk_cloudhost/js/gk.menu.js
and remove this part:

Code: Select all

   // Fix for iOS devices with iOS >= 8.0
   var menuWrap = jQuery('#gkMenuWrap');
   
   if(menuWrap.length) {
      jQuery(window).on('scroll', function(e) {
         if(menuWrap.hasClass('active')) {
            menuWrap.css('top', jQuery(window).scrollTop());
         } else {
            menuWrap.css('top', '-100px');
         }
      });
   }
     // fix for the iOS devices 


Btw, this is a pretty old template and such bug was not discovered for long time. Sadly, we cannot take responsibility for browser bugs and quirks. We can only try to make it work, but the best and most beautiful solution is not always possible.

Gavick IS responsible for fixing these things if they wish to retain customers long term. I am uninterested in moderator opinions of what templates are old and what should and should not be fixed. As paying members, we are looking for functional templates and helpful support- this is what we have paid for.

BTW, the solution you offered does not match the existing code in menu.css so confusion is likely as to which code to replace.

As a moderator, you need to leave the attitude at the door when you come to work. Govern yourself accordingly.

1option, one of your topics was already closed due to your bad behave. If you are not happy with template you can always claim refund and switch to other solution.

Dear Cyberek,
I won't join anymore this topic but I've to say a few words before leave it:
- I worked 3 weeks on this template for a customer, before notice this serious issue on Chrome. So I wasted 3 weeks of work, I will lose the customer because I won't be able to delivery the site in this conditions and I lost all the time I spent to customise the template.
- I don't understand why, the gavick developer team is not working for a fix right now to help all customers that downloaded the template to own a good product, or better an usable product.
Cloudhost template, in this conditions, has serious usability problems and should be removed from download section for respect of customers if you don't plan a fix. Nevertheless, I wonder... Why!? It should be a really good template!
- I always thank the Gavick Team when provide help, even when they don't, and I do it publicly, please look at last tweet on the Gavick Twitter Page and around on Forum. Nevertheless, today we're not receiving help to fix a seroius issue that is coming with a gavick template.

I hope that the developer team will help us to use this template, otherwise no one will be able to provide to their customer a usable product and use the cloudhost template.
Thank you Cyberek if you will really try to help us,
Baggio

@robertobaggio you are terribly wrong, I didn't say there will be no fix, I just say that it was not being done at the moment of writing the post.
Fix is already there, but it is to much to post it here so please wait till template update which should be delivered in next few days.

I also doesn't understand some of your statements. Fixed menu is a feature. Small visual glitch in one of the browsers will never make you lost your clients. Its just a small bug. It doesn't block site functionality. It could also be easily changed by disabling sticky menu (then navigation would be only accessible on top of the page like on many other pages). So basically in my opinion you are little overreacting. But that is just my opinion and as a customer of payed product you have 100% right to request a fix - which as I have said is already deployed to our source code and will be released soon.

Hy, Cyberek.
It's been 4 months since was written the first post in this topic. It's been 3 months since was written the last post in this topic. I work with the template and see the jumping menu in Chrome and Internet Exlorer. In Firefox the menu appears as expected. Is there currently a solution to this problem?
Thanks in advance

Hi

I'll take over this thread, but I'm afraid nothing jumps for me. Please here is a video:



I think problems like that may be caused by browser itself, so please make sure browser is updated to the latest version.

OR

It was the template which got a fix for this issue and than You got to make sure it's using a latest version.

Teitbite, please read all posts. And if you seach this problem at forum, you will find more... Its not my problem, not a problem of browser... And demo is fine... It works at Mozzila, but not at Chrome and some mobile browsers - it jumps... And Cyberek was see this problem. Does the problem was solved?

Hi

I know this problem. And it is because of a browser performance. While the code for menu was created all browsers were tested and were fine back then, but over time a changes to some browsers changes were made which wasn't rendering this code as it was before. A fix for this problem was to eliminate the slide of the menu animation and simply just appear it when screen is moved. As I can see in our demo menu is acting like that already which means that this change in code was already implemented in packages.

Please notice that my video was made while using Chrome browser and issue described in this post is not visible there anymore.

Hi
Please, read all posts and find other topics about this problem.
Your demo is fine. Yes. Like was fine this template half of a year ago...
But downloading template is not.
Because of last update, that was fix iOS8 view, but broke Chrome and others... except Mozzila
That was Cyberek saying. And all that he can recommend is to delete iOS fix to fix other browsers
And I think (and i sure ALL! your clients too) that fixing iOS bug you must fix all other browsers... But may be we all wrong It's been 4 months

Hi

Try add this to override.css and make sure override is enabled in template settings:

Code: Select all

#gkMenuWrap.active {
    position: fixed !important;
    top: 0 !important;
}


Thanks, man!
You fix it!

I dont find the solution. Is possible disable the scrolling? A fixed menù is more simple and i dont have problems.

Hi

Solution to this was confirmed, so it has to work. Just make sure You are copying:

Code: Select all

#gkMenuWrap.active {
    position: fixed !important;
    top: 0 !important;
}


to override.css and that override is activated in template settings.

I'm sorry for this stupid question. Override template.css? or menù.css

Override override.css.
templates/gkcloudhost/css/override.css
And dont forget to enable override at the template settings in joomla admin pannel

Hi

Yes, override.css and make sure override is enabled in template configuration.