smooth sticky menu transition

gribblej

In T3/Ja Company, we were able to achieve a floating sticky menu with your help. This is based on a code solution supplied by you. It does work but the transition is jumpy, as you will see if you check the site. What can be done to fix this? I think it's something in the javascript. I would like to know how to do it myself going forward because it's very popular with customers. Found some solutions online but they were generic, not specific to JA/T3.
Can it be addressed with a CSS transition?
Many thanks if I could get a hand with this.
-Jim G.
The formula I am using now:
Via custom.css:
.t3-mainnav.affix {
position: fixed;
top: 65px;
left: 0;
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">

saguaros

gribblej Hi Jim,

Let me see if it can be done.

gribblej

Yes, thanks, I am sure it can be done. Pretty much all new WP themes come this way, and it's also included with many Joomla templates and flexbox builders like Yootheme and SP. Your code is very solid in that it always, always works. I think though there's a way to have a smoother transition with the aid of a script. I've seen the basics of how it works but need some help implementing it on a JA T3 website. I appreciate that you are taking an interest. We will be using this quite a bit going forward.
-Jim Gribble

gribblej

Just wondering if anybody is looking at this. It can't be too hard. Joomlart has perfected it for its own company websites. I see it in use on this very page. I would like to implement the same code being used to make a stick a menu on this very page. Just am having a hard time scoping it out in the inspector. There may be some companuion script which I cannot see.
-Jim Gribble

saguaros

Hi Jim

You can try this custom CSS:

nav.t3-mainnav {
    position: static;
    top: -50px;
}

.t3-mainnav.affix {
    transition: all 500ms ease-in;
}

gribblej

Sorry, I didn't get a notification of your reply. This appears to be exactly what I was experimenting with and could not quite crack. If it does work, I recommend adding it to all your templates; it is incredibly popular and incredibly userful.
Thanks!
-Jim Gribble

saguaros

Glad it works 😉