OceanWP Sticky Header - WordPress Plugin

How to Set Up OceanWP Sticky Header for a Sticky WordPress Header

OceanWP Sticky Header is not just there to "pin the menu to the top" - it is meant to make navigation more predictable on long pages, landing pages, blogs, and OceanWP-based stores. In this guide, we will look at how to prepare your site, where to find the settings after installation, which sticky header modes to choose, how to verify the result on different devices, and what to do if the header overlaps content, disappears, changes height abruptly, or conflicts with caching.

This article is intended for a site owner, WordPress administrator, or developer who is already using the OceanWP theme and wants to enable a sticky header safely without unnecessary trial and error. We will not cover purchasing, payment, or license bypasses. The guide focuses on properly configuring the installed extension, checking OceanWP compatibility, validating the effect, reviewing mobile navigation, and diagnosing common issues.

An important detail about this product is that it is tightly connected to the OceanWP ecosystem. Some features appear under Appearance -> Customize -> Sticky Header, some depend on the header type selected in OceanWP, and individual pages may have their own settings through OceanWP Settings. That is why proper configuration does not start with the first toggle you happen to see. It starts with understanding what kind of header the site already uses and which element should remain visible while scrolling.

What Problem a Sticky Header Solves in OceanWP

A sticky header keeps navigation in view while a visitor scrolls through the page. On a short brochure-style site, the effect may barely be noticeable, but on long service pages, tutorial articles, catalogs, and product pages, it becomes genuinely useful: the user can still see the menu, contact button, cart link, or shortcut to an important section without having to jump back to the top.

OceanWP Sticky Header differs from generic solutions because it works within the logic of the OceanWP theme. The extension is aware of OceanWP header types, the Top Bar, the mobile header, Medium Header, Custom Header, and logo settings. Because of that, you are not guessing a random CSS selector the way you would with a universal sticky plugin. Instead, you configure header behavior through the Customizer and the theme's related panels.

The practical value of the setup depends on the type of site. On a blog, a sticky header helps readers quickly jump to categories or search. On a service site, it keeps navigation to contact details and key pages visible. In a WooCommerce store, it helps keep the catalog menu, cart icon, or important sections within reach. In every case, though, you need to watch the header height: if it takes up too much of the screen, the sticky behavior starts to get in the way, especially on mobile devices.

The main check before enabling it is simple: a sticky header should make it easier to move around the site, not cover the hero section, breadcrumbs, anchor-linked sections, product cards, or buttons. If turning it on leaves the visitor with less useful content visible than before, the setup needs to be simplified.

Who OceanWP Sticky Header Is a Good Fit For, and When Another Approach Makes More Sense

The extension is best suited for sites where the OceanWP theme already serves as the design foundation. If the header is built with OceanWP's native tools and the logo, menu, Top Bar, mobile navigation, and colors are already configured in the Customizer, then OceanWP Sticky Header gives you a controlled way to enable sticky behavior, choose a style, adjust the height, effects, opacity, background, a dedicated sticky logo, and separate settings for certain header types.

When the extension makes the most sense

Use it if the site runs on OceanWP and you want a sticky header without a separate header builder. It is a good fit for classic business sites, OceanWP landing pages, blogs with long-form content, stores with standard top navigation, and pages where visitors frequently return to the menu. It is also useful when you want to preserve the theme's visual logic: the regular header at the top of the page can be tall and content-rich, then turn into a more compact version on scroll.

Custom Header deserves special mention. OceanWP documentation describes two options for a custom header: automatically making the whole header sticky, or using a manual mode where only the element with the owp-sticky CSS class becomes sticky. That matters for sites where the top area is built in Elementor or another builder: you can leave the large upper block as a normal section and pin only the navigation row.

When the product may not be the right fit

If the site does not use OceanWP, this extension is not the natural choice. For an arbitrary theme, it makes more sense to look at universal plugins that work with CSS selectors, or tools built for a specific page builder. If the header is fully built in Elementor Pro and all logic is already managed through Motion Effects, it may be easier to keep everything inside Elementor instead of mixing two separate sticky behavior systems.

You should not enable OceanWP Sticky Header just because the feature "looks modern." On a mobile site, a tall fixed header can eat up too much space. On pages with anchor navigation, a sticky block can cover the beginning of sections. On pages loaded with banners, cookie bars, chats, and promo bars, a sticky header can create visual clutter. In those cases, it is often better to use a compact mode, disable sticky behavior on mobile, or keep only the menu sticky.

What to Check Before Installation and Activation

Before installing it, it helps to understand not only whether the plugin is a good fit, but also which site settings may affect the result. Sticky Header works with the header, and the header is usually tied to the logo, menu, mobile menu, Top Bar, transparency, height, z-index, caching, JavaScript optimization, and builder styles. If those layers are already conflicting, enabling sticky behavior will only make the conflict more obvious.

Platform and dependencies

Make sure the OceanWP theme is active and that the theme's core settings open correctly in the Customizer. For OceanWP Settings, which let you change behavior on individual pages, OceanWP documentation notes a dependency on the free Ocean Extra plugin. You do not need it for every sticky header action, but it matters for OceanWP metabox settings, where pages, posts, and products can have their own parameters.

If the site uses Ocean eCommerce Pro or the Ocean eComm Treasure Box component, check whether Sticky Header is already included there. The official documentation states that the Sticky Header component in eComm Treasure Box has the same functionality as the Ocean Sticky Header premium plugin, so a separate installation of Ocean Sticky Header may not be necessary. This is a typical case where an extra extension does not improve the site - it only adds confusion.

Current header type

Open Appearance -> Customize -> Header and see which header type is currently in use. For standard types, it is enough to understand the header height and the placement of the menu and logo. For Medium Header, the top area and the menu settings matter, because the documentation specifically describes the Hide Menu on Sticky and Stick Only the Menu modes for it. For Custom Header, decide in advance whether the whole header should be sticky or only a specific section.

If the header is transparent, especially over a large hero image, plan the sticky background color ahead of time. A transparent header can look great over the hero section, but when you scroll into regular text content, it often becomes hard to read. Sticky Header includes separate settings for background color, opacity, and menu item colors in the sticky state. It is better to use them intentionally rather than leaving transparency to chance.

Cache, minification, and a test environment

On a live site, do not turn on every effect at once. Test first on a copy, a staging domain, or at least during a low-traffic window. After changing sticky settings, clear both site and browser cache, because header behavior depends on CSS and JavaScript. If the site uses optimization that combines or defers scripts, disable it temporarily for testing. That makes it much easier to tell whether the issue comes from OceanWP Sticky Header itself or from the optimizer.

A simple rule before you start: first get the regular non-sticky header working reliably, then enable sticky mode, and only after that add animations, transparency, a separate sticky logo, and more complex effects.

Installation and the First Check After Activation

OceanWP describes extension installation as a standard WordPress plugin install by uploading a ZIP archive under Plugins -> Add New -> Upload Plugin. After uploading, the archive needs to be activated. OceanWP extension settings usually appear near the bottom of the WordPress Customizer, and for Sticky Header, a dedicated panel becomes available after the premium extension is installed and activated.

A safe activation sequence

1. Make sure the OceanWP theme is active and the public-facing site loads without errors.
2. Install and activate the extension like a standard WordPress plugin by uploading the ZIP archive.
3. Open Appearance -> Customize and find the Sticky Header panel.
4. Enable the basic sticky mode without advanced effects, if the setting is not enabled automatically.
5. Save the changes with Publish and check a live page in an incognito window.
6. Scroll the page down and back up, then repeat the check at tablet and mobile screen widths.

Do not combine the initial verification with full visual styling. On the first pass, the goal is simply to confirm that the header becomes sticky, does not disappear, does not jerk the content around, does not overlap the admin bar, does not cover the first heading, and does not break the mobile menu. Colors, shadows, and animations can be adjusted afterward.

Where to look for the result on the site

The result is not always displayed consistently inside the Customizer itself across all theme, cache, and builder combinations. Check the live page in a separate tab. Start with the homepage, then a long article, a product page, or a services page. If the site uses different headers on different types of pages, testing the homepage alone does not tell you much.

If everything looks correct in the admin panel but the effect does not work for visitors, clear the cache and check deferred script loading. In support discussions around sticky plugins, a common scenario is that behavior differs for a logged-in administrator and a regular visitor. The cause is usually not the menu itself, but a different set of cached files, optimization rules, or custom CSS.

Sticky Header Settings Map in the Customizer

Most work with OceanWP Sticky Header happens in the Customizer. The official documentation groups the settings into several logical areas: sticky header elements, style and effects, the sticky-state logo, typography, and colors. That structure is useful if you configure things from top to bottom: first decide what should stick, then choose how it behaves, and only after that bring the appearance in line with the site design.

Elements that can become sticky

In the Sticky Header Elements area, start with the core toggles. Sticky Top Bar controls whether the OceanWP top bar remains visible while scrolling. That is useful if the Top Bar contains a phone number, business hours, a language switcher, or an important service link. But if the Top Bar is used only for decorative text, it is better not to pin it, so the sticky area does not become taller than necessary.

Sticky Mobile applies sticky behavior to the mobile header. Enable it only after checking the real mobile interface. On a phone, even 70 to 90 pixels of fixed height can noticeably reduce the usable area. If the mobile header is tall and includes a logo, burger icon, cart, and search button, make it more compact first, then decide whether sticky behavior is actually needed.

Sticky Style: Fixed or Shrink

The Sticky Style setting defines the header's core behavior. Fixed keeps the header at its original height. It is the safest option for sites where the regular header is already compact. Shrink reduces the height of the header and logo after scrolling. This mode works well on sites with a prominent logo or generous spacing, but it needs careful height tuning so you do not end up with a jarring jump or a squeezed logo.

If you choose Shrink, do not start with the minimum height. Reduce the header gradually and check whether the menu items remain readable, whether the logo gets cropped, whether hover state line height changes, and whether the cart icon shifts out of place. The documentation notes that Shrink Sticky Style height is measured in pixels, so the setting should be precise, not just a rough visual guess.

Scroll effects

Sticky Scrolling Effects adds behavior tied to page movement. No Effect leaves the header without animation. Slide adds an entrance animation when the user first scrolls the page. Show Up / Hide Down displays the sticky header while scrolling up and hides it while scrolling down. That last option is often convenient on content-heavy pages, because the header does not take up space while the reader is moving down, but it reappears when they head back toward the navigation.

It is important to remember that OceanWP documentation explicitly notes that scroll effects are not supported by every header type. So if the effect you chose does not appear, do not assume the extension is broken. First check the header type, then try the basic No Effect or Fixed mode, and only after that return to animations.

Background, opacity, shadow, and width

Sticky Background, Sticky Opacity, No Shadow on Sticky, Full Width on Sticky, and Sticky Padding control the visual state after scrolling. For most sites, a good starting combination is an opaque background, a subtle shadow or thin border, reduced vertical padding, and clear contrast for menu items. Transparency is best used only where the area behind the header will not contain busy imagery or text.

Full Width on Sticky is worth enabling when the regular header should stretch edge to edge in the sticky state. On boxed layouts and sites with a narrow container, that can look questionable, so test not just on desktop but also at intermediate widths. If the sticky header suddenly breaks outside the site's visual boundaries, revisit the width and container settings.

Sticky logo and retina logo

Sticky Header lets you specify a separate logo for the sticky state, a retina version, and a logo height. That is useful when the regular header is transparent and uses a light logo, while the sticky header switches to a white or light background and needs a darker logo. OceanWP documentation specifically notes that when you upload a sticky logo, it is best to upload a retina version as well, and that the retina image should be twice the width and height of the regular sticky logo.

Do not upload a new logo just for experimentation. First decide in which states you actually need it: the regular header, the sticky header, retina displays, or specific pages. If the logo changes, check the alt text, readability, size, and the menu row height. The Ocean Sticky Header changelog includes fixes related to the logo and the shrink effect, so the logo is one of the areas where post-save verification is essential.

Modes for Medium Header and Custom Header

Two header types require special attention: Medium Header and Custom Header. This is where sticky behavior stops being a simple checkbox and becomes a decision about which part of the header should follow the user while scrolling. If you get it wrong, you can end up with an overly tall sticky area, a disappearing menu, or a header that behaves differently on different pages.

Medium Header: stick everything or only the menu

Medium Header in OceanWP consists of a top section and a menu area. The Sticky Header documentation describes two legacy options for it: Hide Menu on Sticky and Stick Only the Menu. These should not be used at the same time as equally active modes. The official documentation says these options override each other, so you should choose only one if you need specific behavior.

Hide Menu on Sticky keeps the top section of Medium Header visible in the sticky state, while the menu becomes available on hover. This is a less common setup that may work for a site where the logo, search, or social icons matter more than a constantly visible menu row. Stick Only the Menu does the opposite: it hides the upper section on scroll and leaves only the navigation visible. For most sites, that option is easier to understand because the sticky part is the menu itself.

If both options are disabled, the entire Medium Header becomes sticky. That can be fine for a compact header, but when the upper area is tall and includes search, social buttons, and a large logo, it often becomes too heavy. Check the height in pixels and the actual portion of the screen it occupies on both laptops and phones.

Custom Header: automatic and manual mode

For Custom Header, OceanWP documentation describes two modes: Auto and Manual. In Auto mode, the entire custom header becomes sticky. That is convenient if the header is already compact and should remain fully visible at the top. In Manual mode, you can target a specific section by adding the owp-sticky CSS class to it. This approach is especially useful when the header is built in Elementor and includes a large top block, a promo strip, a logo, a menu, and extra buttons.

Imagine a custom header with a large first row containing the logo, phone number, quote button, search, and social links. If you pin all of it, the user loses part of the screen. In manual mode, you can make only the menu row sticky. In Elementor, this is done by editing the needed section, going to the Advanced tab, and adding owp-sticky in the CSS Classes field. Once that is done, sticky behavior should apply to the selected element rather than the entire header.

Individual pages and OceanWP Settings

OceanWP Settings let you change page-level parameters independently of the global Customizer settings. The documentation describes control over the Header, Top Bar, menu, logo, and other areas at the page, post, or product level. For Sticky Header, this matters in two cases: when a specific page needs a different header, and when sticky behavior should be disabled or visually adjusted for a particular scenario.

The Ocean Sticky Header changelog notes that the Sticky Header tab in OceanWP Settings received fields for disabling sticky Top Bar and Header on a per-page or per-post basis, along with earlier options for a separate sticky logo, retina logo, shrink height, and parent menu item colors at the page or post level. That is not a reason to configure every page manually, but it is a useful tool for exceptions: a long landing page, a page with a transparent header, a dedicated campaign page, or a product page with a non-standard top area.

Best Settings for Different Types of OceanWP Sites

There is no single universal OceanWP Sticky Header configuration that you can enable blindly on every site. The same sticky header will feel very different on a blog, a services page, a WooCommerce catalog, and a landing page with a transparent hero section. It is more useful to start from the page's job: what the user needs to access quickly, how much space can be given to navigation, and which header element truly needs to remain visible while scrolling.

Blog and knowledge base section

On a blog, a sticky header should be calm and compact. The reader is there for the content, so a tall fixed area will only get in the way. In this case, Fixed or a moderate Shrink, with sticky Top Bar disabled and a simple opaque background, is usually enough. The Show Up / Hide Down effect can work well if readers scroll through long articles: the header does not stay in view all the time, but it returns when the user starts moving upward.

Check the table of contents, anchor links, and internal jumps. If the site includes a "table of contents" block or anchor navigation, the sticky header may cover the beginning of the target section. In that case, animation matters less than proper offset handling. Start by reducing the sticky area height, then add CSS scroll-padding-top if the issue remains.

Service or product landing page

On a landing page, the header often acts as a persistent navigation map: services, benefits, case studies, FAQ, contacts. Sticky behavior is especially useful here, but only if the header does not cover the hero section and CTA buttons. If the regular header is large, use Shrink and a separate sticky logo. If the hero section uses a transparent header over an image, be sure to set Sticky Background and the menu colors for the post-scroll state.

On a landing page, it usually does not make sense to pin the Top Bar unless it contains a genuinely important phone number or switcher. A service strip above the regular header quickly turns the sticky area into a block that is too tall. A good test is to scroll to the pricing section or lead form and confirm that the sticky header does not cover the heading, price, button, or top portion of the form.

WooCommerce store

In a store, a sticky header can help with catalog access, search, cart, and account navigation, but it can also conflict with WooCommerce notices, filters, flyout carts, and promo banners. If the header includes a cart icon or mini cart, test product add-to-cart, opening the cart panel, the product page, a category archive, and checkout. Do not judge the setup by the homepage alone.

For stores, a compact sticky mode with a clear background and no unnecessary transparency is usually the right fit. If you use Medium Header with a large upper section, consider Stick Only the Menu so the navigation is what stays visible while scrolling. If the Top Bar contains a promo code or shipping message, test both options: pin the Top Bar together with the menu, or keep it only at the top of the page. Choose the version that does not interfere with viewing products, not the one that simply looks "richer."

Site with a custom Elementor header

When the header is built in Elementor and connected to OceanWP as a Custom Header, the main mistake is pinning the entire large block instead of the specific row you actually need. If the header contains a hero message, promo strip, decorative area, or large contact block, use manual mode and apply the owp-sticky class only to the navigation section. That keeps sticky behavior useful without costing the page half its visible screen space while scrolling.

After adding the class, test not just scrolling but editing in Elementor as well. Sometimes behavior differs between the editor and the live page because of preview mode, cache, or builder scripts. The result that matters is the public-facing page in visitor mode. If sticky works only in the editor, clear the cache, check deferred JavaScript loading, and make sure the class was added to the correct section rather than to an inner widget.

Pages where sticky behavior is better left off

Not every page benefits from a sticky header. It can be disabled or adjusted at the page level if the relevant OceanWP Settings are available. Typical exceptions include a campaign page with its own minimal menu, the checkout page, a full-screen content page, a page with an important form at the top, a promotional landing page without the main site navigation, and any page where the sticky area conflicts with another fixed element.

The approach of "turn it on everywhere and fix complaints later" is almost always worse than maintaining a short list of exceptions. Enable it globally on standard pages first, then review special templates. If a page differs from the site's usual structure, open it separately and decide whether the sticky header actually helps there.

Practical Scenario: A Compact Sticky Header for a Services Site

Let us walk through a concrete example. Imagine an OceanWP services site where the regular header includes a large logo, a menu, a phone number, and a request-a-quote button. On scroll, you want to keep a compact navigation visible, reduce the height, preserve a readable logo, and avoid covering the start of sections when users click anchor links. This is a common scenario: the visitor is reading a long service page and should be able to jump back to pricing, questions, case studies, or the lead form quickly.

Goal

Create a sticky header that takes up less space than the regular one, stays readable, does not cover section headings, and does not break the mobile menu. While scrolling down, the header should either remain compact or reappear only when the user scrolls up, if the site needs to prioritize reading space.

Preparation

Before configuring anything, make sure the main menu is built in Appearance -> Menus, the logo is set in OceanWP settings, the mobile version of the header already looks correct without sticky mode, and the page has enough content length to test scrolling properly. If the page uses anchor links, add a few test jumps between sections.

Setup steps

1. Open Appearance -> Customize -> Sticky Header.
2. Enable sticky behavior for the required header type and start with Fixed mode to verify the basics.
3. If the regular header is tall, switch to Shrink and set the height so the logo and menu remain readable.
4. Set Sticky Background to an opaque color that contrasts with the menu and logo.
5. Check Sticky Logo if the regular logo is hard to read against the new background.
6. For long-form reading pages, try Show Up / Hide Down, but keep No Effect if the effect causes jumps or unpredictable behavior.
7. Save the changes, clear the cache, and test the live site as a guest.

Verifying the result

Open the services page and scroll slowly. The logo should not jump, the menu should not wrap onto a second line, and the sticky area should not cover headings when you jump to anchors. Then open the page at a mobile width. If the sticky header takes up too much space, disable Sticky Mobile or simplify the mobile header.

Check more than just vertical scrolling. Test real interactions: opening dropdown menus, search, cart behavior, hover state, the active menu item, and returning to the top of the page. If the header appears too late while scrolling up or overlaps content, go back to No Effect or improve readability without animation.

An anchor link nuance

On one-page landing pages, a sticky header often covers the beginning of the target block after a menu click. The Ocean Sticky Header changelog includes fixes related to anchor links and offset, but each site still needs to be tested individually because header height, caching, the builder, and custom styles vary. If sections are still hiding under the header, you can add a safe CSS scroll offset through the Customizer.

/* Add this in Appearance -> Customize -> Additional CSS.
   Adjust the value to match the actual height of the sticky header. */
html {
  scroll-padding-top: 90px;
}

After adding it, open the page in guest mode, click several menu anchor links, and confirm that the section heading is fully visible. To roll the change back, remove this small CSS snippet from Additional CSS and save the Customizer. Do not use this code as a substitute for proper header height configuration: it solves only the anchor offset problem.

How to Check Speed, SEO, and Usability After Setup

A sticky header by itself does not guarantee better SEO, higher conversions, or deeper engagement. It may improve navigation, but it can also hurt the experience if it covers content, causes layout shifts, or adds too much visual noise. That is why, after setup, you should look not at the checkbox in the Customizer, but at the actual behavior of the page.

User experience check

Walk through the site like a regular visitor: open the page, scroll past the hero section, click a menu item, open a submenu, go back to the top, then move to the form or cart. At each step, ask one simple question: did the sticky header help, or did it get in the way? If the menu constantly covers a major heading or a button, reduce the height, disable the Top Bar in the sticky state, or turn sticky behavior off on mobile.

For stores, check both the product page and the cart. The cart icon or menu should stay accessible, but it should not overlap WooCommerce notices, product options, the Add to Cart button, or popup elements. If the site uses an off-canvas cart, side panel, or popup, test those together with the sticky header.

Performance check

Any sticky effect adds scroll logic, styles, and sometimes extra browser calculations. Independent OceanWP reviews often note that additional extensions can introduce more CSS and JavaScript, so after enabling a sticky header, it is worth checking Core Web Vitals, the browser console, and scroll behavior. That does not mean the extension is inherently "heavy." It means the final result depends on the site build as a whole.

Open DevTools, check the console for errors, and compare the page before and after the setup. If a JavaScript error appears, first disable script optimization and test again. The Ocean Sticky Header changelog has included a console error fix related to sticky-header.min.js, so when diagnosing issues, it is important to check whether the installed extension is up to date and not ignore browser messages.

Visibility and indexing check

Sticky Header should not hide content from search engines if it is implemented normally and does not change the page's HTML content. It can, however, hurt behavioral signals if it interferes with reading. Make sure headings, breadcrumbs, opening paragraphs, and important buttons remain visible. If the site uses a transparent header, verify that the menu color does not blend into the background while scrolling across different sections.

When OceanWP Sticky Header Is the Right Choice

OceanWP Sticky Header is worth using if your site is already built on OceanWP and you need a controllable sticky header with settings for background, height, logo, mobile behavior, scroll effects, and special handling for Medium Header or Custom Header scenarios. The product's strength is that it does not force you to guess a CSS selector - it works through the familiar structure of the OceanWP Customizer and OceanWP Settings.

Before publishing the changes, verify three things: the sticky header does not take up too much space, it does not overlap anchor-linked sections, and it works reliably for visitors after the cache is cleared. If those checks pass, you can move on to final testing on real pages. For installation or another round of testing, use the page's download block: download OceanWP Sticky Header.

If the site uses a different theme, the entire header is built in Elementor, or you need to pin arbitrary blocks, compare the job against the alternatives first. But for a typical OceanWP site where you want to preserve the theme's native logic and keep navigation compact while scrolling, OceanWP Sticky Header remains the most direct and understandable option.