Search for answers:
The OptimizePress Support Site Has Moved: Click here to access the new Support site

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).

Didn't find an answer to your question? Contact Our Support Team (Submit a ticket)
Was this article helpful?
1 out of 1 found this helpful
Follow

Comments

Other Help Categories:

Get Started Guide

Watch our Ultimate Getting Started guide video

Pre-Sales Questions

Ask questions before purchasing our products

Login Problems

If you're having issues logging into our members hub

Accounts & Billing

Update your billing, request a refund and other accounts help

API Key Issues

Get help with licensing your site and API key issues

Membership Help

Get help creating Membership portals and courses

LiveEditor Help

If you need help using or troubleshooting the LiveEditor

Integrations

Find out about the many integrations possible with OptimizePress

Affiliate Questions

Have questions about promoting OptimizePress

Clubhouse Questions

Questions about our Clubhouse Membership Subscription