HostOnNet Blog

How to add Sticky Header Effects for Elementor

With sticky header users are able to access to different sections easily as the menu bar always appears on the screen. In this post, I’ll show you step-by-step how to use Elementor free version to create a Sticky header on your WordPress site.

Requirements

Elementor plugin
Sticky Header Effects for Elementor plugin
Oceanwp theme

Login to admin area > Appearence > themes > add New > Search for OceanWP > Install and activate the theme

And then Install Sticky Header Effects for Elementor plugin

Go to Theme Panel > Libarary > Add New > Add title – Default header > Select template – Elementor Canvas > Click publish button and then click Edit with Elementor

Add elementor new template

Select Two column structure and add Custom header logo widget for first column and Custom Header Nav for second column.

custom elementor header

Open the settings for the section that contains your header. In the Advanced  tab, enable Sticky Header Effects

sticky header effect

Login to admin area > Apperence > Custamize > Header > General > Custom header and select the template > Default Header we created.

Elementor custom header

About Sibi Antony

Bootstrap and Android LOVER.I've been creating things for the web for over 10 years, from the period of flash and table based layout web sites till mobile and tab friendly web sites.
Posted in Wordpress