Hello,
Add following code in JS file
jQuery( document ).ready( function() {
/* Calculate height of header wrapper */
var aboveHeight = jQuery('#header-wrapper').outerHeight();
var menuWidth = jQuery("#rtp-primary-menu").outerWidth();
/* 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();
/* Add sticky style to navigation bar */
if ( jQuery( window ).scrollTop() > aboveHeight ) {
fix_element.css({
'top': '0px',
'position' : 'fixed',
'z-index' : '1000',
'max-width' : menuWidth,
'width' : '100%'
} );
} else {
fix_element.css({
'position': 'relative',
'top': '0px'
} );
}
});
} );
For navigation color add following line in css file:
.rtp-nav-wrapper, .rtp-nav-wrapper:before, .rtp-nav-wrapper:after { background: blue; }