---
title: "How To Create a Sticky Header in Elementor"
url: https://coolplugins.net/how-to-create-a-sticky-header-in-elementor/
date: 2021-08-15
modified: 2026-05-29
author: "Satinder Singh"
description: "Create a header template in Elementor Theme Builder to design your website’s navigation section professionally. Customize the header layout, images, colors, and styling according to your website branding needs. Enable sticky effect using Elementor Motion Effects and set header position to top or bottom. Apply display conditions to show the sticky header across the entire website for better navigation access."
categories:
  - "Elementor"
image: https://coolplugins.net/wp-content/uploads/2025/04/create-sticky-header-elementor-fimg-800x450.png
word_count: 206
---

# How To Create a Sticky Header in Elementor

Lets Create a Sticky Header in Elementor. A **Sticky header **is a widely used pattern, in which the header of the website sticks to a part of the screen when scrolling down. It allows users to quickly access the navigation-utility element without scrolling again to the top of the page.

#### Create a sticky Header :

##### Step1: Create a Header Template.

First of all, we need to create the header template. To add it, from the dashboard navigate to **Elementor >> Templates >> Theme Builder**, and add a new header.

![Create a Sticky Header in Elementor](https://coolplugins.net/wp-content/uploads/2021/08/image3.png)

##### Step 2: Choose header

Choose the header from the list and click on insert.

![Create a Sticky Header in Elementor image 2](https://coolplugins.net/wp-content/uploads/2021/08/image1-3.png)

##### Step 3: Customize the header

You can edit the header, give it a style, add images and customize it until you get a satisfactory result.

##### Step 4: Make header Sticky

Now that you have a header for your site, and you want to make it sticky.

You have to select the header section now go to **Advanced >> Motion Effect >> Stick >> Top/Bottom.**

![Create a Sticky Header in Elementor image 3](https://coolplugins.net/wp-content/uploads/2021/08/image2-2.gif)

##### Step 5:  Choose a condition

Choose a condition, where you want to display this header, I recommend using the entire website.

After following these 5 simple steps, you are now able to create a sticky header for your website.