Sticky navigation

The 2 simplest approaches for making the navigation (banner part) sticky is either using CSS or JavaScript. You can make navigation of both Live Editor pages and blog sticky by following these steps:

– Live Editor Pages

Edit your page in Live Editor > Page settings > Other Scripts > Custom CSS (from dropdown) :

1.) Using CSS :

.banner {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 9999;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.09);
}

2.) Using Javascript and CSS (a bit more fancy with slideDown effect) :

CSS:

.fixed {
  position: fixed;
  z-index: 1;
  width: 100%;
  transition: 0.3s all;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.09);
  display:none;
  background: rgba(255,255,255,0.8);
}

Javascript:

<script>
var $ = jQuery;
$(window).scroll(function(){
  var sticky = $('.banner'),
  scroll = $(window).scrollTop();
  if (scroll >= 100){
    sticky.addClass('fixed');
    sticky.slideDown(1000);
  } else{
   sticky.removeClass('fixed');
   sticky.removeAttr("style");
  }
 });
</script>

(You would add the CSS following the same steps as stated earlier and for the javascript part, you would edit your page in Live Editor > Page settings > Other Scripts > Footer).

Blog Pages

For blog pages, you would follow (and choose) the same steps as above except that you would add the codes under :

1.) CSS:

WordPress admin dashboard > OptimizePress > Blog Settings > Modules > Other Scripts (choose from the dropdown : CSS).

2.) Javascript:

WordPress admin dashboard > OptimizePress > Blog Settings > Modules > Other Scripts (choose from the dropdown : Footer).