Sticky navigation bars are attractive, modern and a huge help to the reader. Especially when you are looking at a long sales page and want to skip to a new section, or to the buy button, or back to the top.

Let’s face it, a sales page can be LONG and difficult to navigate.

So after a client requested a navigation menu at the top of her sales page, I knew it would be useless if it wasn’t sticky.

But that’s one thing that OptimizePress does not natively do. So it is quite tricky to make it happen.

Here’s the solution I came up with.

First, install and activate the plugin “Sticky Menu (or Anything!) on Scroll“.

Sticky Menu plugin

Add a navigation menu to your OptimizePress page using the Layout Settings in your OP Live Editor.

Go to your live page and use Inspect Element to find and copy the element CSS Selector code that you want to make sticky. Example: #le_body_row_2. (If you chose to have your navigation bar below your header, then this is the element code you will probably use.)

Inspect Element

When you find the line of code you need, right click on the highlighted line of code. Move your mouse to “Copy” and then to “CSS Selector”. It should copy the element that you need. Paste this into a notepad so you don’t lose it.

CSS Selector

 

Go to Settings > Sticky Menu.

Paste in the element code you just copied into the line for “Sticky Element”. Click save.

Sticky Menu Sticky Element

 

Now go back to the OptimizePress page you just created and refresh the screen. Scroll down and see if your item is sticking to the top when you scroll past it.

If it is…then yay! You are done! Style it as you wish.

If not…it may be hidden behind other elements on your page that you have created. I had this problem with mine. The issue is with the z-index settings.

So once again, you are going to use the piece of code that you copied and set into the Sticky Menu plugin. If it is a navigation bar below your header, the element is probably .nav-bar-below.

Go to your OptimizePress live editor screen. Click on “Page Settings”. Open up “Other Scripts”. If you do not already have a “Custom CSS” window, add one now.

In that Custom CSS window, you will add the following snippet of code:

CSSELEMENTHERE {
z-index: 100 !important;
}

Replace “CSSELEMENTHERE” with the css selector element from the inspector. So if you are setting a navigation bar that is below your header to sticky, it would probably be:

.nav-bar-below {
z-index: 100 !important;
}

Click save. Now go back to your visible page and refresh. It should now show the sticky element throughout the page as you scroll.

If you are having any trouble with this working, leave a comment below and I’ll try to be of assistance in helping you figure it out.

Cheers! 🙂

Comments

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.