Sticky Header - Customizer

The OceanWP Customizer Sticky Header panel enables you to style the website header when using the sticky mode, as well as apply various effects.

The Sticky Header panel in the Customizer will appear when you install and activate this premium OceanWP extension.

Available Sticky Header options include:

• Sticky Header Elements section:
  • Sticky Top Bar,
  • Sticky Mobile,
  • Custom Header Type: Sticky Options,
  • Hide Menu on Sticky (available with the Medium Header header type),
  • Stick Only the Menu (available with the Medium Header header type),
• Sticky Style and Effects section:
  • Sticky Style,
  • Sticky Shrink Style: Height (px),
  • Sticky Scrolling Effects,
  • Full Width on Sticky,
  • No Shadow on Sticky,
  • Sticky Opacity,
  • Sticky Padding (px),
• Sticky Header Logo section:
  • Sticky Logo,
  • Sticky Retina Logo,
  • Sticky Logo Height (px),
• Typography and Colors section:
  • Colors:
    • Sticky Background,
    • Menu Items: Link,
    • Menu Items: Background,
    • Active Menu Item: Link,
    • Active Menu Item: Background.

Sticky Top Bar

The Sticky Top Bar option enables you to apply the sticky effect, ie. display the Top Bar element on scroll as well.

Sticky Mobile

The Sticky Mobile option enables you to apply the sticky effect on the mobile header, ie. always display the mobile header on scroll.

Custom Header Type: Sticky Options

The Custom Header Type: Sticky Options feature is designed solely for the Custom Header header type.

Available options include:

• Auto: sticks the entire custom header.
• Manual: enables you to choose which section of the header will display as sticky.

Learn how to create a custom header for WordPress with OceanWP, or how to use the Custom Header Type: Sticky Options with your custom header.

Hide Menu on Sticky

The Hide Menu on Sticky option is available for the Medium Header header type.

The Hide Menu on Sticky option enables you to display only the top part of the Medium Header on sticky (scroll). The menu becomes available if a user hovers over the top part.

If both Hide Menu on Sticky and Stick Only the Menu options are disabled, the entire Medium Header will be made sticky.

Stick Only the Menu

The Stick Only the Menu option is available for the Medium Header header type.

The Stick Only the Menu option enables you to hide the top part of the Medium Header on scroll, and display only the navigation.

If both Hide Menu on Sticky and Stick Only the Menu options are disabled, the entire Medium Header will be made sticky.

Sticky Style

The Sticky Style option enables you to choose the header behavior on sticky.

Available options include:

• Shrink: enables you to apply a custom sticky header height, thus make it smaller than the original header, plus also shrinks the logo with an animation effect.
• Fixed: makes the default header sticky using the original header height.

Sticky Shrink Style: Height (px)

The Sticky Shrink Style: Height (px) option is available for the Shrink Sticky Style, and enables you to reduce the height of the header on sticky (compared to the default header height).

This option is always measured in pixels (px).

Sticky Scrolling Effects

The Sticky Scrolling Effects feature enables you to apply an animation effect to the sticky header.

Available options include:

• No Effect: no animation applied.
• Slide: entrance animation. The first time scrolling down the page, the header doesn't immediately appear as sticky, but instead "slides down" the page.
• Show Up / Hide Down: display the sticky header while scrolling up, hide the sticky header while scrolling down the page.

Full Width on Sticky

The Full Width on Sticky option enables you to display the sticky header content from edge to edge.

No Shadow on Sticky

The No Shadow on Sticky enables you to decide whether you want the sticky header to display a slight shadow over the page content or not.

Sticky Opacity

The Sticky Opacity feature enables you to adjust the opacity (visibility) of the entire sticky header.

Sticky Padding (px)

The Sticky Padding (px) option enables you to add / change padding (spacing) for the sticky header only.

This option is always measured in pixels (px).

Sticky Logo

The Sticky Logo option enables you to use a custom header to be displayed on the sticky header only, in case you want to display a different logo from the original one.

This is 100% optional.

Sticky Retina Logo

The Sticky Retina Logo option is used alongside the Sticky Logo, and enables you to add a custom logo for large devices.

Use a logo which is twice the size (width and height) compared to the Sticky Logo image size.

Sticky Logo Height (px)

The Sticky Logo Height (px) option enables you to adjust the height of the sticky logo display.

This feature is always measured in pixels (px).

Sticky Background

The Sticky Background color option enables you to apply a different color to the sticky header (compared to the default header background).

Menu Items: Link

The Menu Items: Link color option enables you to apply a different regular and hover color to all menu items for the sticky header.

Menu Items: Background

The Menu Items: Background color option enables to apply a different regular and hover color to all menu items, in case you want to display a different color compared to the sticky header background color.

Active Menu Item: Link

The Active Menu Item: Link color option enables you to apply a color to active menu item, ie. the page which is currently being viewed if this page is inside the menu.

Active Menu Item: Background

The Active Menu Item: Background color option enables you to apply a background color to the active menu item background, ie. the page which is currently being viewed if this page is inside the menu.

That's it!

Enjoy building your WordPress website with OceanWP!