Implement sticky menu using "sticky" CSS position

gribblej

It seems that some of your templates support this. Others don't. All my customers want it because it's common on WordPress sites. They really like it. I've used JA University quite a bit, and that supports it. I probably have to add some PHP code somewhere to make it work on your other templates? Which ones have it built-in? To be clear, the good old "fixed" position works. That's not what we need. We want to use "sticky," so that header scrolls up and off the screen but the menu sticks to the top as user scrolls down. You can see it on my company site, javelincommunications.com. Maybe there is an answer in the forum but I haven't been here in awhile and it wasn't apparent how to search. I did survey what comes up in Google, but none of it was totally on point. Thanks to anybody for any help.
-Jim G.

Ninja

gribblej Hi
Kindly follow this thread to make the template menu sticky.

Regards

gribblej

I'm aware of this earlier thread and it's not on point. I'm not sure anybody understands my question at Joomlart. I don't want to have a fixed menu. That's easy. I want to be able to use the new "sticky" CSS positioning. Some of your templates support it, some don't. I want to be able to make any template support it.

aman204

gribblej Try add this to custom.css file :

.t3-mainnav{position: sticky !important;position: -webkit-sticky !important;top: 0 !important;}

Kindly ensure to clear your browser cache if changes dont reflect.

gribblej

Thank you very much. I have previously tested versions of this on different templates. I'm not certain it's the complete answer in that I've also seen references to LESS files needing some code to prepare this to function as a layout option. I appreciate your taking the time to help and will let everybody know is this is a solution which can work across the board for JA templates.
-Jim G.

Ninja

gribblej
Hi
T3 main nav class used in all T3 template, but some of template has different header structure.
So the code sometime need to change with respect to template code.

Regards

gribblej

Sure, yes, sometimes the header container will need to be made sticky. But mostly I am confident this is going to work for JA templates across all browsers except Microsoft. The code seems to work best in custom.css but it should also work if placed at the end of template.css.
-Jim G.