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]](http://i.imgur.com/rVFQwIF.png)
Navigation should now move when you scroll down the page.
example:
![[Image: XP5qJSl.gif]](http://i.imgur.com/XP5qJSl.gif)
Enjoy
