Creating Sticky Navigation with Sticky Rows

NOTE: Sticky rows are only sticky when not logged in.

Creating sticky navigation is easy. Simply, go to the Row settings > Sticky Settings > Sticky or Target and click "Sticky" to make a row stick to the top of the page when scrolling:

You can then edit the width at which the sticky row will start, if you don't want the row to stick on mobile devices. This would mean that the row would not be sticky on devices with a width below 768px (for example, phones):

More Sticky Navigation Settings

There are a number of other things that you can do with sticky navigation.

1) Stick after the row has scrolled out of view

To stick the row after it has scrolled out of view, use the "Stick When: Distance" setting. For example, this would stick the row after scrolling for 200px past the row (Note that it is NEGATIVE 200px):

2) Make the sticky row an overlay

To create the overlay effect that is especially popular on homepages where the navigation row overlays the hero area, you can activate the "Stick: Overlay" setting:

3) Change colors once the row is sticky

Finally, you can change the colors of the background and the text once the row is stuck. For example, you can have a transparent background when the row is overlaid on the hero area, then fill in the background once the row is stuck. Use the "Stuck: Text Color" and "Stuck: Background" settings for this:

Using CSS for Further Designing (Advanced)

If you'd like to target sticky Rows with custom CSS, you can do so. All sticky navigation gets the class "ocb-sticky". Then, when the Row becomes stuck, it will get an additional class, "stuck".

First, you have to get the HTML ID of the row (in this case #row-rowjqikb1lu8p4u5m1dw). Then, something like this CSS could be used to change the padding of a row when it becomes stuck:

#row-rowjqikb1lu8p4u5m1dw.stuck .ocb-row-inner{
    padding: 5px 10px 10px 5px;
}

You could also change the logo with css like this:

#row-rowjqikb1lu8p4u5m1dw.stuck .ocb-logo-image{
    background-image: url(logo.png);
}

And finally, you could alternatively just make the logo smaller with CSS like this:

#row-rowjqikb1lu8p4u5m1dw.stuck .ocb-logo-image {
    max-width: 100px;
}

This CSS can be added to your site by going to Site Settings > CSS > Global CSS.

If you do not know how to get the row's HTML ID, you can alternatively use this CSS, though this recommended only if there is just one row that you are sticking across your site:

.ocb-row.stuck .ocb-row-inner{     
    padding: 5px 10px 10px 5px !important;
}
.ocb-row.stuck .ocb-logo-image{
    background-image: url(logo.png) !important;
}
.ocb-row.stuck .ocb-logo-image {
    max-width: 100px;
}