How To Create a Custom Header

Since version 1.1.1 of OceanWP, you can create your own header with your favorite page builder.

Learn how to create a custom header template and implement it on your OceanWP powered website:

The video below is utilizing OceanWP old Customizer (v 3.6.1 and below). New Customizer location is described in the Step 3 of this article.

1. Create a New Template

Go to WordPress dashboard and create a template for your header in WP Dashboard, OceanWP > My Library (old settings: Theme Panel > My Library), eg, Custom Header (template name).

2. Insert Content in This Template

To add the logo and main menu to your custom header, three widgets have been created specifically for this use Custom Header Logo, Custom Menu and Custom Header Nav where you can choose alignment.

If you use Elementor, and Ocean Elementor Widgets, even better. Use the Logo and Navigation widgets.

If the page builder you are using does not allow the use of widgets, do not worry, we have two shortcodes: [oceanwp_logo] and [oceanwp_nav]

For alignment, you only need to add position="left"into the shortcode.

Replace "left" with the desired position between: left or right or center

For example, if you want display the menu on the right side, use the following shortcode: [oceanwp_nav position="right"]

3. Add Your Template in the Header

Once you finished creating your header with your page builder, go to Appearance > Customize > Header > General, select the Custom Header from the Header Type panel, and visit the Custom Header Settings panel where you'll select your template and apply other options (OceanWP v3.6.1 and below: Customizer > Header > General, choose Custom Header in the Style option and select your template created in the step 1 in the Select Template option).

Learn more about Custom Header Settings in the Customizer.

That's it!

Enjoy building your WordPress website with OceanWP.