Sticky Menu Issue with

jimhill10

I implemented a sticky nav bar on my top menu via this article. https://www.joomlart.com/forums/topic/sticky-menu-in-ja-company-template/
I have a jquery error on my page with this sticky menu bar in place but only on the page using the Responsive Grid for Articles module. The page is https://www.ufcinc.com/Product-Videos/product-videos-abbyy?nocache

Uncaught TypeError: Cannot read property 'top' of undefined
    at product-videos-abbyy?nocache:497
    at dispatch (jquery.min.js:2)
    at v.handle (jquery.min.js:2)

If I load the mainnav first it breaks the menu display altogether and the error shows. If I scroll down the page and then refresh this page (the non cached version at least) the sticky navbar works without an error. I know it has to do with the -top element in the customized nav id in mainnav.php:

<nav id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav" data-spy="affix" data-offset-top="150">

teitbite

jimhill10 Hi. Can You please tell me what changes was done exactly? From the old thread attached it looks like it's all css related, so it should not cause js error. Please revert any none-css changes. This may not be a valid method anymore, so I'll try from scratch.

jimhill10

Here are the changes I made in order to make the top menu sticky on the JA_Company template:

in the file tpls/blocks/mainnav.php, line 18, changed from

<nav id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav">

to:

<nav id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav" data-spy="affix" data-offset-top="150">

Added an entry to custom.css:

.t3-mainnav.affix {
    position: fixed;
    top: 35px;
    left: 0;
    width: 100%;
    z-index: 999;   
}

I will revert these if that helps. The "data-offset-top" is what is causing the issue it seems. I can just remove that entry from the custom.css or comment it out.

jimhill10

I tracked down and corrected the issue. The module, "Responsive Grid for Articles," was loading modules/mod_responsive_grid_for_articles/assets/fancybox/jquery.fancybox.pack.js?v=2.1.3". I was able to configure that module not to load that and the conflict went away. This article I found online helped me:
https://extensionsforjoomla.com/documentation/how-to-fix-javascript-jquery-conflicts-joomla

teitbite

jimhill10 Hi. Great o hear that it's resolved. Thank You for shearing this solution. Closing this ticket now.