gkMenuWrap issue when scrolling

Hello developers, maybe I'm wrong but the CloudHost needs update to joomal 3.4.8 and latest Chrome.
I'm not sure why, but in Firefox it is working.
Whats the issue?
Well..I put "position:fixed" for "gkMenuWrap" but when scrolling down the menu is "shaking" and "clipping" in Chrome only. you can see my site: https://dbtechlabs.com/ and test in Firefow and Chrome.
I also add to override code:

Code: Select all

#gkMenuWrap.active {
   top: 0;
}


BUT in Chrome it doesnt work and "TOP: 0;" is changeing in 'element.style } top"

Thanks for help.

Please search for similar articles. This behave is caused by fox for ios>8 mobile browsers which had problems with positioning elements.

io8 mobile browsers?? no Iam trying this in Google Chrome desktop!
I searched all this terms and nothing worked for me man, that's why I'm creating new topic for my case.
Hope you help me out.

There are similar topics there. Position is calculated with use of JavaScript. You can remove the JS and bring back position fixed but you will prevent any navigation possibilities on iOs mobile devices.

There are similar topics there.
Link?
Also this in Firefow it works fine, I need you help me to fix this, as it looks ugly man.
90% of my visitors use chrome, and it is clipping like helll there, firefox ok, other i did not test.
please helpppp!

Link? Realy? Is it that hard to click parent subforum and read few threads? Or just use search...
But if it is too hard - right now removing this glitch equals bringing back bug in iOS making the site navigation not working on apple mobile devices. If you want that, let me know, I have already described the process in other thread but I can do it again here.

Link? Realy? Is it that hard to click parent subforum and read few threads? Or just use search...
Is it so hard to explain your customer? or send and POST LINK where i can find it?
There is too many shit on this so I cant see which one is ok for me.
AND WHY you keep talking about IOS? the MENU is clipping NOT in IOS or mobiles but in normal DEsktop PC OMG...seriously??? why did I choose your template..why?
Keep your advice for you sir, i see how polish are..me Im SLOVAK!
Maj sa dovi dopo!

Lol, I see you don't understand what I'm trying to write here.
So here is the solution, but please don't complain if somebody tells you that the site's navigation will not work on iOS.
gk_cloudhost/css/menu/menu.css
change:

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 


Topic closed.