Floating stick menu finishing touches

gribblej

I adapted Pankaj's suggested code to make this work across all devices.
I have to topbar div fixed to always display.
To not overlap it and hide it, the floating mainnav bloc has a top "stop" inserted.
.t3-mainnav.affix {

position: fixed;
top: 65px;
left: 0;

width: 100%;
z-index: 999;
}
This was put at the end of custom.css.
Then this was inserted to replace first line of the mainnav.php block which is stored at TPLS/blocks.
<nav id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav" data-spy="affix" data-offset-top="150">
So it is not all that hard if you know how and take it step-by-step.
I like it a lot. It does work.
However, it's a little "jumpy." When menu bar hits the top of the browser window, it jumps back below the fixed topbar. The effect is jittery. Instead I would like to introduce an ease parameter so that the menu floats down to its final place below the topbar.
I know it can be done because I see it on Joomlart's own business sites.
It's probably just a simple ease parameter used in conjunction with my top stop?
Thanks so much to anyone can assist!
Here is an example page which shows the issue. https://milwaukee-yacht-club.com/banquets-weddings/plan-your-event
-Jim Gribble

Ninja

gribblej
Hi
Our developer added this script code in/js/script.js file

jQuery(window).on('load', function() {
  jQuery('.t3-mainnav').affix({
    offset: {
      top: jQuery('.t3-mainnav').offset().top - 35
      }
  });
  
  var $mainnav = jQuery('.t3-mainnav');
  $mainnav.on('affix.bs.affix', function() {
    $mainnav.next().css('margin-top', '64px');
  });
  
  $mainnav.on('affix-top.bs.affix', function() {
    $mainnav.next().css('margin-top', '');
  });
});

and remove the sticky effect from mainnav.php
Now you have topbar that is sticky and working fine as you needed..

Regards

saguaros

Hi Jim

Just have a look at this site: https://milwaukee-yacht-club.com/banquets-weddings/plan-your-event

The fixed menu works smoothly at my end, it doesn't jump when the menu hits the top of browser.

gribblej

Sorry if I wasn't already clear. I already had got it working. It wasn't not working. It was just jittery. The menu would float to top, cover the topbar for an instant, and then jump back down below it to it's final positioning. This has not solved that problem. Everything looks the same, works the same. It's not a terrible thing, by any means. And this floating menu system does work across all browsers. I'm just a perfectionist who loves a really classy and smooth website.
Thank you,
-Jim G.

Ninja

gribblej
Hi
Kindly clear browser cache to see the new changes, as the new style is not like before and working fine,
if still have any issue kindly post the screencast and explain how you want, as both the solution are working fine.

Regards

gribblej

Thanks, but it's working because I put everything back the way it was before your developer's code addition. That doesn't work in any Microsoft browsers. So nobody should use it and maybe it should be deleted from the forum so that it doesn't get passed around. We all wish Microsoft browsers would go away for good. It is defect-riddled crap software. But even though their clickshare keeps dwindling, for it to dwindle away to nothing is going to take a long, long time.
Best,
-Jim G.

gribblej

I'm pretty happy with how it's working now, so please don't touch anything without asking me first. It would be appreciated.
Thanks,
-Jim G.

Ninja

gribblej I'm pretty happy with how it's working now
Hi
Nothing has been changed on site as you were happy with last change.
Since the topic is closed , I am closing this thread.

Regards