Header - Customizer

The OceanWP Customizer Header panel enables you to enable, style and personalize the Header area on your website.

The Header is the main website element, usually contains a logo and a menu, but can contain other things such as the cart icon, search icon, a social menu and more.

Available Header options include:

• General panel,
• Logo & Media section:
  • Header Media panel,
  • Logo panel,
• Menus section:
  • Menu panel,
  • Social Menu panel,
• Mobile section:
  • Mobile Menu panel.

General

The General panel contains options that enable you to choose your Header type, as well as other options and features to style and personalize the header.

The General panel includes the following options:

• Header Type,
• Custom Header Settings panel,
• Default Header Options section:
  • Height,
  • Padding (px),
  • Full Width,
  • Border Bottom,
  • Additional Styling & Settings panel,
  • Colors panel,
  • Content panel.

Header Type

The Header Type panel enables you to choose among multiple header style options, including a custom header.

OceanWP offers the following Header types:

1. Minimal,
2. Transparent,
3. Top Menu,
4. Full Screen,
5. Center Header,
6. Medium Header,
7. Vertical Header, and
8. Custom Header.

Each of the available Header types offers something unique in terms of styling and content.

Choose the type you believe will represent your website the most.

Toggle the Header Type panel button and select the correct thumbnail of the Header Type you want to use on the website.

Custom Header Settings

The Custom Header Settings panel holds option only for the Custom Header type.

By creating a custom template via WP Dashboard, OceanWP > My Library, you're able to go above and beyond of default Header options and create anything you want.

The Custom Header Settings panel includes the following options:

• Add Container,
• Select Template.

Add Container

When the Add Container option is enabled, your custom header width will equal your website's main container width applied in Customize > Site Style & Settings > Content Settings > Main Container Width.

Instead of using the Stretch option, for example, or other methods to display your custom header from edge to edge, simply disable disable the Add Container option.

Select Template

The Select Template option enables you to choose a custom header template created via WP Dashboard, OceanWP > My Library.

Height

The Height option enables you to set the height of the Header.

The Height option does not influence the following Header types: Top Menu, Medium Header, Vertical Header, and Custom Header.

Padding (px)

The Padding (px) option enables you to add padding (spacing) around the header content.

This option is always measured in pixels (px).

The Padding (px) option will not influence the following Header types: Medium Header, and Vertical Header.

Full Width

When the Full Width option is disabled, the Header content width will equal your website's main container width applied in Customize > Site Style & Settings > Content Settings > Main Container Width.

When Full Width enabled, the Header content will display from edge to edge.

The Full Width option will not influence the following Header types: Center Header, Medium Header, Vertical Header, and Custom Header.

Border Bottom

The Border Bottom option enables you to add a slim line at the bottom of the header, which can serve as a visual separator between the header and the rest of the content.

The Border Bottom option will not influence the following Header types: Top Menu, and Vertical Header.

Additional Styling & Settings

The Additional Styling & Settings panel contains additional personalization options based on the Header Type selected.

Additional Styling & Settings includes more options for the following Header types:

• Top Menu,
• Full Screen,
• Center Header,
• Medium Header,
• Vertical Header.

Top Menu: Additional Styling & Settings

The Top Menu offers one additional option:

• Menu Position.

The Menu Position enables you to choose whether you want to display the menu before or after the logo.

Full Screen: Additional Styling & Settings

The Full Screen additional options include:

• Add Transparent Header: when enabled, the option makes the header transparent.

• Hamburger Width: adjust the width of the hamburger icon.

• Hamburger Bars Height: adjust the height of each of 3 bars in the hamburger icon.

• Hamburger Bards Gap: adjust the spacing between each of the 3 bards in the hamburger icon.
• Logo (optional): display an additional logo when the menu is open.
• Retina Logo (optional): display an additional logo on large screens when the menu is open. Retina Logo should be twice the size of the regular logo.

Center Header: Additional Styling & Settings

The Center Header additional options include:

• Add Transparent Header: when enabled, the option makes the header transparent.
• Left Menu: option to assign a menu to the left side of the logo.

• Menus Position: the position of the left and right menu option compared to the logo in the center. You can choose between:
  • Wider,
  • Centered, and
  • Closer.

Medium Header: Additional Styling & Settings

The Medium Header additional options include:

• Add Transparent Header: when enabled, the option makes the header transparent.
• Elements Positioning (Medium Header Top section): click and drag to reorder elements and adjust their layout, or simply disable from appearing. Available elements include:
  • Search Form: independent search form.
  • Logo: the main logo you can find via Customize > Header > Logo.
  • Social Buttons: the Header Social Menu you can find via Customize > Header > Social Menu.
• Padding (px) (Medium Header Top section): add padding (spacing) inside the top part of the Medium Header. Always measured in pixels (px).
• Menu Position (Medium Header Menu section): adjust the position of the menu to appear left, center or right.
• Height (Medium Header Menu section): adjust the height of the Medium Header menu bar.
• Menu Items Padding (px) (Medium Header Menu section): adjust side (left and right) padding (spacing) between menu items.

Vertical Header: Additional Styling & Settings

The Vertical Header additional options include:

• Add Transparent Header: when enabled, the option makes the header transparent.
• Add Header Shadow: when enabled, displays a slight shadow for an 3D effect.
• Closed Header: when enabled, the header will display closed by default and users will need to click to reveal the content.
• Collapse Width (px): no need to use this option if Closed Header option is enabled. Otherwise, you can choose the screen width at which the Vertical Header will display as closed automatically. The smaller the width, the sooner the header will collapse (close). This option is always measured in pixels (px).
• Position: choose whether to display the Vertical Header on the left or right side of the screen.
• Open Header Width (px): adjust the width of the Vertical Header when it's open. This option is always measured in pixels (px).
• Open Header Inner Padding (px): add padding (spacing) around the content of the Vertical Header. This option is always measured in pixels (px).
• Logo Position: adjust the position of the logo and whether it should display on the left, center or right.
• Spacing Between Menu Items (px): adjust vertical spacing between menu items. This option is always measured in pixels (px).
• Submenus Dropdown Target: choose what users need to click to reveal submenu options (if any): the entire menu item (link) or only the icon next to it.
• Display Search Form: when enabled, a search box will appear beneath the menu options.
• Search Form Border Width: adjust the width of the border surrounding the search form.
• Search Form Border Radius: adjust the curve of the search form corners.
• Custom Vertical Header panel: enables you to replace default options with custom templates made via WP Dashboard, OceanWP > My Library:
  • Select Vertical Top Template: select a custom template that will replace the top part of the Vertical Header.
  • Select Vertical Bottom Template: select a custom template that will replace the bottom part of the Vertical Header.

Colors

The Colors panel contains all color options, based on the Header Type selected:

• Minimal,
• Transparent,
• Top Menu,
• Full Screen,
• Center Header,
• Medium Header,
• Vertical Header,
• Custom Header.

Minimal Header Colors

The Minimal Header has the following color options:

• Header Background: main background color.
• Bottom Border: header bottom border color.

Transparent Header Colors

The Transparent Header has the following color options:

• Bottom Border: header bottom border color.
• Transparent Header Background (Transparent Header Colors section): main background color.

Top Menu Header Colors

The Top Menu Header has the following color options:

• Header Background: main background color.
• Bottom Border: header bottom border color.
• Menu Background (Top Menu Header Colors section): menu bar background color.
• Search Button Color (Top Menu Header Colors section): search icon regular and hover color.
• Search Button Border Color (Top Menu Header Colors section): search icon side borders color.

Full Screen Header Colors

The Full Screen Header has the following color options:

• Header Background: main background color.
• Bottom Border: header bottom border color.
• Hamburger Icon (Full Screen Header Colors section): hamburger icon color.
• Hamburger Close Icon (Full Screen Header Colors section): close icon color (when menu is open).
• Links Background (Full Screen Header Colors section): background color for all menu items (when menu is open), regular and hover color.
• Links (Full Screen Header Colors section): menu item links regular and hover color.
• Search Input (Full Screen Header Colors section): search form text input color (when user types).
• Search Animated Dots (Full Screen Header Colors section): search form animation color.
• Search Bottom Border (Full Screen Header Colors section): search form bottom border regular, hover and active color.

Center Header Colors

The Center Header has the following color options:

• Header Background: main background color.
• Bottom Border: header bottom border color.

Medium Header Colors

The Medium Header has the following color options:

• Bottom Border: header bottom border color.
• Background Color (Medium Header Colors section): main header part background color.
• Menu Background Color (Medium Header Colors section): header menu bar background color.
• Search Form Background (Medium Header Colors section): search form background color.
• Search Form Input (Medium Header Colors section): search form text input color (when users type).
• Search Form Placeholder (Medium Header Colors section): search form default inside text display color.
• Search Form Icon (Medium Header Colors section): search form icon regular and hover color.

Vertical Header Colors

The Vertical Header has the following color options:

• Header Background: main background color.
• Hamburger Icon Color (Vertical Header Colors section): hamburger icon color (when the Vertical Header is closed).
• Menu Items Border (Vertical Header Colors section): borders between menu items color.
• Submenu Background (Vertical Header Colors section): background color for submenu items.
• Submenu Links (Vertical Header Colors section): submenu item links regular and hover color.
• Submenu Links Background (Vertical Header Colors section): individual submenu link items background regular and hover color.
• Search Form Background (Vertical Header Colors section):
• Search Form Input (Vertical Header Colors section):
• Search Form Icon (Vertical Header Colors section): search form icon regular and hover color.

Custom Header Colors

The Custom Header has the following color options:

• Header Background: main background color.
• Bottom Border: header bottom border color.

Content

The Content option utilizes the WordPress after_header hook automatically.

You can use it to add text, HTML or shortcodes.

The Content feature is supported by the Minimal and Transparent header types.

Header Media

The Header Media (Logo & Media section) enables you to add media to the Header background, such as video or an image. The Header Media is a default WordPress feature.

The Header Media offers the following options:

• Header Video:
  • Select Video: select a video from your Media Library to serve as a Header background.
  • YouTube URL: enter the URL of a video from YouTube that will serve as a Header background.

• Header Image:
  • Current Header: select an image to serve as a Header background.
  • Overlay: choose a color to overlay the background image.
  • Position: position of the background image display.
  • Repeat: choose whether or not should the background image repeat itself (use in case of image patterns).
  • Attachment: choose whether or not you want to add an animation effect which is visible only on desktop browsers because it's not supported by mobile devices. Likewise, not very visible when applied to the Header background.

Logo

The Logo panel (Logo & Media section) enables you to add your main website logo.

The Logo panel contains the following options:

• Logo,
• Retina Logo,
• Max Width,
• Max Height.

Logo

The Logo option enables you to add a logo to your website.

Simply click to select an image from your Media Library.

Retina Logo

The Retina Logo option enables you to add a logo that's going to be displayed on large screens.

The Retina Logo needs to be twice the size (in width and height) as the normal Logo.

Max Width

The Max Width option enables you to adjust the maximum width for the display of the logo.

Max Height

The Max Height option enables you to adjust the maximum height for the display of the logo.

Menu

The Menu panel (Menus section) contains options that enable you to style and personalize the Header menu, including special links, typography, colors and more.

The Menu panel contains the following options:

• Menu Position,
• Link Effects,
• Menu Items Left and Right Spacing,
• Typography and Colors section:
  • Typography:
    • Main Menu Item,
  • Colors:
    • Links,
    • Links: Background,
    • Current Menu: Link,
    • Current Menu: Background,
• Additional Menu Options section:
  • Dropdown Menu Options panel,
  • Header Search panel,
  • Custom Menu panel.

Menu Position

The Menu Position option enables you to choose on which side to place the menu navigation: Left, Center, or Right.

Link Effects

The Link Effects option enables you to add special effects on main menu navigation items on hover (mouse over link). There are multiple effects for you to choose from.

Menu Items Left and Right Spacing

The Menu Items Left and Right Spacing option enables you to adjust the spacing between each of the menu items.

This spacing (padding) is applied equally on both sides (left and right).

Main Menu Item

The Main Menu Item typography option enables you to apply desired typography settings for the main menu (Header navigation).

Links: Background

The Links Background color option enables you to apply a different background color to all menu items (Header navigation), which can be different than the Header background color.

Links

The Links color option enables you to apply a color to all menu items in the menu (Header navigation).

Current Menu: Background

The Current Menu: Background option enables you to apply a background color to the menu item which is currently active, ie. the page a user is currently viewing.

Current Menu: Link

The Current Menu: Link color option enables you to apply a color to the menu item which is currently active, ie. the name of the page a user is currently viewing.

Dropdown Menu Options

The Dropdown Menu Options panel contains options that enable you to style and customize menu dropdowns, as well as to style the special Blog Posts Mega Menu (Post Categories Dropdown).

Available Dropdown Menu Options settings include:

• Top Level Dropdown Icon: choose whether or not to display an icon next to the main menu item which has a submenu.
• Second+ Level Dropdown Icon: choose whether or not to display icons next to submenu items, which have further sub-submenus.
• Dropdown Top Border: choose whether or not to display a border on top of the dropdown panel.
• Dropdown Panel Width: adjust the dropdown menu panel width.
• Typography and Colors section:
  • Typography:
    • Submenu Item: enables you to adjust typography for all dropdown (submenu) items.
  • Colors:
    • Top Border: apply a color to the dropdown panel top border.
    • Background: apply a background color for the dropdown panel.
    • Borders: apply a color for the borders (separators) between submenu items.
    • Links: apply a regular and hover color for submenu items' names.
    • Links Background: Hover: apply a color for the submenu item background on hover.
    • Current Menu: Link: apply a color for the currently active (viewed) submenu item name.
    • Current Menu: Background: apply a color for the currently active (viewed) submenu item background.
• Post Categories Dropdown section:
  • Category Title: Background: apply a background color to the category title area.
  • Category Title: Name: apply a color to the category title name.
  • Post Links: Title: apply a regular and hover color for all post titles (links for posts).
  • Post Links: Date: apply a color to the dates.

Header Search

The Header Search panel enables you to disable or choose between 3 Header Search styles, as well as style and customize each.

Depending on the Header Search Style selection, available options include:

• Disabled: the search option will not be displayed in the main header.
• Drop Down,
• Header Replace,
• Overlay.

Drop Down

The Drop Down header search style is a classic search option, which displays a form in a dropdown panel when the search icon is clicked.

Most of the styling for the Drop Down header search option is inherited from your Dropdown Menu Options styling.

Available Drop Down search form styling settings include:

• Form Input: Background: apply a background color to the text input area.
• Form Input: Text: apply a color to the input text (text typed in the search box).
• Form Input: Border: apply a color to the border of the input area.

Header Replace

The Header Replace is a stylish search option which, followed by an animation, replaces the main Header menu (navigation) to display a search box form.

The Header Replace search form inherits styling from your header.

Overlay

The Overlay search style is a modern option, which displays the search form over the entire screen.

Available Overlay search form styling settings include:

• Overlay Background: apply a background overlay color.
• Input: Text: apply a color for the text when a query is typed into the box.
• Input: Placeholder: apply a color to the text displayed in the box before users start typing.
• Input: Animation: apply a color to the search field animation (moving dots).
• Input: Border: apply a color to the bottom border of the search box, for regular (normal), hover and focus states.
• Close Button: apply a color to the close button.

Custom Menu

The Custom Menu panel contains the option for you to choose a custom template created via WP Dashboard, OceanWP > My Library.

This template replaces the default header menu, ie. navigation, only.

Social Menu

The Social Menu panel (Menus section) contains options that enable you to style and personalize the Header social menu, including the use of a custom template instead of default social icons.

The Social Menu panel contains the following options:

• Enable Social Menu option,
• Default Social Menu section:
  • Links Target,
  • Social Icons Style,
  • Social Icons Settings panel,
  • Social Links panel,
• Custom Social Menu section:
  • Custom Template panel.

Enable Social Menu

The Enable Social Menu option enables you to choose whether or not you want to display social links in the Header navigation area.

Links Target

The Links Target option enables you to choose how to handle browser behavior when social links are clicked:

• New Tab: use this option if you want the social menu link to open in a new browser tab (recommended).
• Same Tab: use this option if you want the social menu link to open in the same browser tab as your website.

Social Icons Style

The Social Icons Style option enables you to choose the display style of the social icons. You can choose between:

• Simple: no color scheme pre-applied, all icons have the same background and icon colors, which you can adjust manually.
• Colored: using the original brand color scheme for each icon.
• Minimal: simple icons with border display and transparent background. Original brand icon scheme is applied on hover.
• Dark: all icons have a dark background applied.

Social Icons Settings

The Social Icons panel contains various settings based on your Social Icons Style selection:

• Default settings for all styles:
  • Icon Size: choose the display size of the social icons.
  • Border Radius: choose the border radius (corner roundness) for icons.
  • Icons Gap (px): apply spacing between icons. This option is always measured in pixels (px).
• Simple, additional settings:
  • Padding (px): apply padding (spacing) around the entire social menu.
  • Icons Background: apply a color to the icons background.
  • Icons: apply a color to the icons themselves.

Social Links

The Social Links panel contains multiple options where you can add your social media links (URLs).

Custom Template

The Custom Template option enables you to choose a custom template created via WP Dashboard, OceanWP > My Library, which you can use to replace the default Social Links.

Mobile Menu

The Mobile Menu panel (Mobile section) contains options that enable you to style and personalize the the Mobile Header, Menu, search and other options for tablet and mobile devices.

The Mobile Menu panel contains the following options:

• Breakpoints,
• Mobile Menu Type panel,
• Mobile Header Search Type,
• Mobile Menu Settings section:
  • General Settings panel,
  • Mobile Menu Options panel,
  • Mobile Menu Styling panel.

Breakpoints

The Breakpoints option enables you to choose a specific screen width at which your website will start displaying a mobile-friendly layout and navigation.

Mobile Menu Type

The Mobile Menu Type option enables you to choose between 3 mobile menu styles:

• Sidebar: opens as an off-screen sidebar with all options.
• Dropdown: a classic mobile menu, opens as a drop down.
• Full Screen: a stylish mobile menu, opens up in full screen.

Mobile Header Search Type

The Mobile Header Search Type option enables you to choose whether or not you want to display the search icon inside the mobile header directly, as well as to choose between 2 search form styles:

• Disabled: the search option will not be displayed.
• Dropdown: the search form opens in a drop down panel.
• Overlay: the search form is displayed over the entire screen.

General Settings

The General Settings panel contains general settings for the mobile header, such as height, logo, and others.

Available General Settings include:

• Mobile Header Height (px): adjust the height of the mobile header. This option is always measured in pixels (px).
• Mobile Header Items Layout (this option is not available if Header Types are Medium, Vertical or Custom Header) enables you to choose the placement and order of the mobile header elements:
  • Logo / Cart / Menu: logo first, cart icon (if ecommerce website), hamburger menu icon.
  • Cart / Logo / Menu: cart icon first (if ecommerce website), logo, hamburger menu icon.
  • Menu / Logo / Cart: hamburger menu icon first, logo, cart icon (if ecommerce website).
• Mobile Logo (optional): add a logo to be used on mobile and tablet devices only.
• Mobile Logo Height (px): adjust the height of the mobile logo, the width will be automatically resized based on the height. This option is always measured in pixels (px).

Mobile Menu Options

The Mobile Menu Options panel contains further settings, some of which depend on your Mobile Menu Type selection:

• All Mobile Menu Types (Sidebar, Dropdown, Full Screen):
  • Display Search Form Inside Menu: choose whether or not you want to display a search from at the bottom of the mobile menu.
  • Mobile Open Button section:
    • Display Menu Text: choose whether you want to display text next to the mobile menu icon.
    • Menu Text: add custom text to be displayed next to the mobile menu icon, if you're using the Display Menu Text option.
    • Hamburger Icon Class: add a custom icon class, if you want to display a different icon (not hamburger) for the mobile menu.
    • Hamburger Icon Animation: will function only with the default Hamburger Icon Class: fa fa-bars . Multiple animations available.
    • Hamburger Icon Animation: apply a color to the hamburger icon animation.
• Sidebar:
  • Mobile Menu Opening Direction: choose on which side should the menu appear when the hamburger icon is clicked: Left or Right.
  • Displace Content Effect: choose whether to display a menu opening animation, in which it appears like the entire website content is moving to the side once the menu is open.
  • Dropdown Target: choose what the user should click on to reveal submenu items (if available):
    • Link: makes the the parent menu item not clickable.
    • Icon: parent item clickable.
  • Mobile Close Button section:
    • Display Mobile Close Button: choose whether to display a dedicated button to close the menu. By default, the menu is closed when the hamburger icon is clicked.
    • Mobile Close Button Text: add text for the Mobile Close Button.
    • Mobile Close Button Icon Class: insert custom icon class if you want to display a different icon (not the X sign). Default Mobile Close Button Icon Class is: fas fa-times .
• Dropdown:
  • Dropdown Max Height (px): apply a maximum height for the mobile dropdown panel. This option is always measured in pixels (px). Default height is set to 400px.
  • Dropdown Target: choose what the user should click on to reveal submenu items (if available):
    • Link: makes the the parent menu item not clickable.
    • Icon: parent item clickable.
  • Mobile Close Button section:
    • Close Menu Text: add text for the menu close option.

Mobile Menu Styling

The Mobile Menu Styling panel contains typography and color options to help you customize the mobile menu, search options and more.

Some Mobile Menu style (background colors, etc) are inherited from your desktop header settings, but there is still a large number of options you can use to completely transform the mobile menu to reflect your website's brand.

Available Mobile Menu Styling options depend on your Mobile Menu Type selection and other settings:

• General Styling, for all Mobile Menu Types:
  • Typography:
    • Mobile Menu: adjust typography for mobile menu items.
  • Colors:
    • Links: apply color to mobile menu item links.
    • Dropdowns Background: apply color to the menu subitems' background.
• If Display Search Form Inside Menu option is enabled:
  • Search Form Background: apply color to the search form input box background.
  • Search Form Text: apply color to the search form input box text.
  • Search Form Border: apply color to the search form box surrounding border.
  • Search Form Icon: apply color to the search form box icon.
• Sidebar Mobile Menu Type:
  • Close Button Background: apply color to the close button background.
  • Menu Background: apply color to the menu background.
  • Separators: apply color to the separators (lines) between menu items.
• Full Screen Mobile Menu Type:
  • Menu Background: apply color to the entire mobile menu background (overlay color).
  • Links Background: apply color to the menu items background.
  • Search Form Text: apply color to the search form text.
  • Search Form Border: apply color to the search form bottom border.
  • Search Form Border: Hover: apply color to the search form bottom border on hover.

That's it!

Enjoy building your WordPress website with OceanWP!