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:

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, two widgets have been created specifically for this use Custom Header Logo 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".

Replace "left" with the desired position between "left - right - center". For example, if you want display the menu to the right, enter the following shortcode [oceanwp_nav position="right"].

Note: We have an improved version of the Custom Menu widget of WordPress. If you want to add an extra menu to your custom header, you will be able to choose your colors, padding, font size, alignment, etc with this widget.

3. Add Your Template in the Header

When you have finished creating your header with your page builder, go to Customizer > Header > General, choose Custom Header in the Style option and select your template created in the step 1 in the Select Template option.

That's all!

Important: For the mobile version of your custom header, we advise you to leave only the logo and the menu, depending on the page builder you use, you can hide items for the responsive.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.