[IPB 4][TuT]How to make your navigation menu scroll with you

Admin · 11-07-2015, 07:45 AM

Go to ..

Customization > Theme > Edit HTML & CSS > templates > globatTamplate

find..just below </footer>

Code:
{template="includeJS" if="theme.js_include == 'footer'" app="core" group="global" location="global" params=""}

Add below..

Code:
<script>
   $('#elSearchNavContainer').addClass('original').clone().insertAfter('#elSearchNavContainer').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','2000').removeClass('original').hide();
   $('.cloned #elSearch').remove();
 
   $(document).ready(function() {
     var stickyNavTop = $('#elSearchNavContainer').offset().top;
 
     window.addEventListener("resize", clone);
     function clone() {
       var test = document.getElementById('elSearchNavContainer').offsetWidth;
       $('.cloned').css('width',test);
     }
 
     var stickyNav = function(){
       var scrollTop = $(window).scrollTop();
 
       if (scrollTop > stickyNavTop) {
         $('.cloned').css('display', 'inline');
         $('.original').css('visibility', 'hidden');
         $('.original #elSearch').appendTo('.cloned');
       } else {
         $('.cloned').css('display', 'none');
         $('.original').css('visibility', 'visible');
         $('.cloned #elSearch').appendTo('.original');
       }
     };
 
     stickyNav(); clone();
 
     $(window).scroll(function() {
       stickyNav();
     });
   });
 </script>

click the Save button

should look like the below image.

[Image: rVFQwIF.png]

Navigation should now move when you scroll down the page.

example:

[Image: XP5qJSl.gif]

Enjoy

[IPB 4][TuT]How to make your navigation menu scroll with you

Submitted by Admin, 11-07-2015, 07:45 AM, Thread ID: 6910