How to Create

Your Own
Custom Header
with Elementor

DESIGN BUILD WEB

designbuildweb.co/custom-header/
How to Create Your Own Custom Header
with Elementor

Just because you can….

Can you achieve what you want with your theme’s header styling
op7ons?

It’s built-in and fast. It has specialist features like s7cky nav and mobile
variants. It has tons of layout configura7ons, all mobile responsiveness
issues sorted and the correct HTML5 and Schema markup.

What do we need to consider?

1. Pull in the site’s logo, site 7tle and site descrip7on (if required) from
the Customizer.
2. Pull in your main WordPress menu(s) from Appearance > Menus.

3. Nav menu needs to change to ‘hamburger’ mobile icon on small

screens.

4. Retain as much HTML5, Schema and accessibility markup as possible.

How to Create Your Own Custom Header
with Elementor

Make the header

1. ADD SITE LOGO AND TITLE TO CUSTOMIZER

2. CREATE A NEW TEMPLATE

i. Elementor > My Library.

ii. Choose ‘Elementor Canvas’. Publish.
iii. Then ‘Edit with Elementor’.

3. ADD LOGO

Op<ons:
• Elementor Image widget.
• NavMenu Addon plugin ‘Branding’ widget.
• OceanWP built-in ‘Custom Header Logo’ widget.
• Press Elements plugin ‘Site Logo’ widget (not featured in video).

4. ADD MENU

Op<ons:
• NavMenu Addon plugin.
• GP menu shortcode.
• OceanWP built-in ‘Custom Header Nav’ widget.
• Superfly plugin (paid - not featured in video).
How to Create Your Own Custom Header
with Elementor

Replace your theme’s header

1. PLUGIN

• Header Footer Elementor - Easy. Works with GP, Genesis, BB

theme and Astra.

2. THEME
• OceanWP. - Customizer > Header > General > Style > Custom Header.
Choose which page you want (you have to create your header as a
standard WP page).
• GP version coming soon.

3. SHORTCODES & HOOKS

i. Grab shortcode - Elementor > My Library (Pro only) or free
AnyWhere Elementor plugin.
ii. Paste into appropriate hook for your theme. In GP, it’s ‘Before
Header Content’.
iii. Disable your own theme’s header. In GeneratePress, you do this by
hiding the site 7tle and tagline in the Customizer se\ngs. And in
‘Layout > Primary Naviga7on > Naviga7on Loca7on’ set ‘No
Naviga7on’. Also set the header padding to zero.

NOTE: If you use Elementor Canvas template on any PAGE or POST,

your header will NOT display.
Any quesLons?
Don’t hesitate to ask!

Dave Foy
hello@designbuildweb.co
www.designbuildweb.co