Creating Sticky Navigation with Sticky Rows

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.

You can even set the stop location on the page so that when the sticky navigation reaches that section, it will stop sticking, by adjusting the "Unstick When" setting.

Here's a video that shows how to implement Sticky Navigation in a Global:

Advanced Sticky Navigation

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

So for example, something like this CSS could be used to create the effect of a header with an invisible background that overlays over the first block of content, then fills with a solid color background once you scroll down:

//Sticky sections are wrapped by a div called .sticky-wrapper which 
// takes on the height of the sticky section
//It acts as a sort of placeholder. We need to make that part fixed as well.

//Note, this CSS will affect ALL sticky instances so only use this
// if you know what you're doing
.sticky-wrapper {
    margin-top: 1px; //Needed to make sure that ".stuck" class isn't added on page load
    position: fixed;
    z-index: 11; //Make sure this sits above other content
}
.ocb-sticky{
    margin-top: 1px; //Needed to make sure that ".stuck" class isn't added on page load
    transition: all 0.5s;
}
.sticky-wrapper .ocb-sticky.stuck{
    margin-top: 0px;
    background: white; //Solid color background
}
.ocb-logged-out .ocb-sticky{
    position: fixed;
    width: 100%;
}