Make the nav bar sticky

Archives rtPanel
#1

Hi,

I would like to make the nav bar below logo make sticky when scrolls down.

How can i do this?

#2

Hello Viveknath,

Here is the sample solution for your query, add following code in your .js file.

  
jQuery( document ).ready( function() {  
    /* Calculate height of header wrapper */  
    var aboveHeight = jQuery('#header-wrapper').outerHeight();  
      
    /* Check if scroll is more than header wrapper */  
    jQuery( window ).scroll( function() {  
        var fix_element = jQuery('#rtp-primary-menu');  
        var headerwrap      = jQuery("#header-wrapper").offset();  
        var headerwrapleft  = headerwrap.left;  
        var headerwrapwidth = jQuery("#header-wrapper").width();  
        var fix_elementwidth= fix_element.width();  
        var margincalculate =   ((headerwrapwidth-fix_elementwidth)/2);  
          
        /* Add sticky style to navigation bar */  
        if ( jQuery( window ).scrollTop() > aboveHeight ) {  
            fix_element.css({  
            'top': '0px',  
            'left': headerwrapleft,  
            'position' : 'fixed',  
            'margin-left'  : margincalculate,  
            'margin-right' : margincalculate  
            } );  
        } else {  
            fix_element.css({   
            'left': '0px',  
            'margin-left': '10px',  
            'margin-right': '10px',  
            'position': 'relative',  
            'top': '0px'  
            } );  
        }  
    });  
} );

It will be better if you can provide us your website URL for better solution.

#3