Skip to content

How to make sticky header in WordPress | A Step by Step guide.

how to make sticky header in WordPress


A header is the core of how a user navigates your website and is frequently the first thing they see when they visit.

Regardless of whether you have a media, education, community forum, eCommerce, or personal website. The header makes it simple to explore and a delight to utilize.

We’ll show you how to use Elementor to make sticky header in WordPress in this article.

If you haven’t heard, you can make a sticky header for your website without writing a single line of code with Elementor.

Let’s get going!

Steps to make sticky header with elementor

A user of a website can always access the header and menu section of the page thanks to sticky headers in WordPress.

Step1: creating your menu

To make sticky header to your site first, you want to make the Principal Menu in your wp-administrator > Appearance > Menus. Include the section you want the header to display.

XpPJc16ac VzE0znrfyawuJIMEW86zI94yR0QJEa5LohnYcYyxXglVmtUeow1 lC r6aBgOuvFCQxEwsZ7IrCE2xWvk6lQHwmZHDXZJ 3EqPSBA 6PRX8BlR ontVXcoFaFeziVDXZEky1grUQKw8iI

Step 2: creating your header in WordPress using elementor

In the wake of making the fundamental menu, go to Elementor Layouts > Subject Developer. Select the Header section from the theme builder page and select “Add New Header.”

0CnT4ZNiM5Pn 1iCfBi70wmTnitiQ8q72p25oXbNIMVyzJpLAf0r pCBU9FkQ2 puUpZ7Wf02B

Give the header template a call and click “Create Template” at the pop-up screen.

You will then be taken to the page for the Elementor editor. You can choose a header template from the options here or make one from scratch.

For this aide, we’ll make our Elementor tacky header without any preparation.

In the Elementor editor, you can see some header widgets before we begin creating a template. We can quickly and easily make a header by using these sections.

sA1meINORcrqxzlid VC8j6hikuQucNeeyCpFPRz UwuwU2UGL3ik9k8UMHFslfqS0yLdVaHo70lW6e9xpfhD87x3eXVx6MDqRNH5YecTRpk2pv4JTl8c A3cE0IJ02kslbfLW Tk8fFRMvswtypqjg

Step 3: creating a header template in elementor

Add a two-section structure. Ensure that the substance width of the segment is “Boxed”.

Odcu03akuaVRpCLINTbh7 7l7q7XnU4T24sgpsN3cG Ev3oHlJuMafkTRIT01g XaE3PPrm9PU0MWAW1H tB9of17CmdzUn7t22TCJq4dC9xN 5wvudMRFJ
7K 1hPxVVv4goigXv3V2pDOJRhjssEfiHNnb23f3OIaf6Zi80QIsO8UD7XV7e1SsAZOdn3rvOpgtTtdjqS3KPE7mEgandOsyCtUgrFrfOl8t

Under the “Alter” Segment set the principal section width to 20%.

FWDgOHN81ofNqG2S9SB1uaeF vGmIIKZ211nHxXdvlpQaWrr7ERdu7E2oSlsEePzIJGyyRTBTwsNSDmvLogYNpMfdCvSw43Dx1IzWf4mGhP0 5Qy8VFsKg0apIBczEYb2Xrq9OodEPY6kYghdBldt o

Presently add your Site Logo to the main section, and select the left arrangement.

8werVpUhuDGdMUpNlwDT0Kx1FuR9AbO4V7bHhqZoJIVYMRQmS WLwVL4dlcg22GGw jZhbD67t1D7GfsxhbuinaMT2 chMUXjN3LgCDNbDTgNEBjdsYgIsn5 gSxWgg8iuhkIjmtpiadPWu9t M 04

In the subsequent section, add a Nav Menu and select the fundamental menu you made in sync 1. Move the navigation menu to the right.

1Dv3PRExdA1obcOPxjlGOixz1uj4rw0pJcYx9Ika7UBIoFXjcfjV8MUJxw 1phfubb6913t8yt3U0K1a Bm1OmsOU RUZ5OFi34W1GCZIuaIKM2ebZq

For this aide, we’re making a straightforward header. By including things like hovering animation effects, buttons, and a background color, you can give your header a more intricate look.

Step 4: how to make your elementor header sticky

It is now time to convert our basic Elementor header into a sticky header.

Click on the Edit section (the entire header section) to accomplish this. Go to Cutting edge > Movement Impacts.

nWH2ar BRv81v3Pt6C4 Vv4NatqujS4tiht5yOHwPbNlPhxfzDkc0GoyqXeB9KhwwYJEoj sQzfmzAjmHT1dWKdD Yh2C 0fQBrCSv4fi46u 5P29Q3J re0ug8M3nXa46PUm pamoEODzuuSFupaJg

Select “sticky to the top” from the motion effects menu, then click the “Publish” button next to the “devices” where you want the sticky header to appear.

Elementor prompts you to add a condition to your header after it has been published. Essentially, by adding conditions you can show the header any place you need on the site.

We wanted to display this header throughout the site, excluding the 404 Page, in this case. Thus, we remembered the Whole Site for the dropdown and rejected 404 Page.

uD0Mieht32VGvGWTy9tDuICHvbPLJa7C5TU8 s9cVabCz6am m0Oq2DQ xU0BRfkNBeciVAZ5LBq8TxxYzr5mProhnr41S kMC8RcApkHvr yLBC tydIn2l8FahBIuSBCtdNXFzdHrYXDTorYNHOrU

As you can see making your custom Sticky header with Elementor is both no fuss!

Different sticky header design options for elementor users

Elementor accompanies a scope of header formats out of the case, everyone is exceptional, sleek and helps your clients effectively explore your site.

With Elementor, you can plan your site headers anyway you need. The site logo, for instance, can be placed in the center, with the main menu located below it. You can add another header over the fundamental header to show the telephone number, social buttons and that’s just the beginning.

A few examples of the various header design options available to Elementor users are listed below.

Example 1: showing sticky header in wordpress website or particular page

DIF3V8 V5t9m9zFz7FBbeSyVUyPNPSyL0tFPn Zs7GZttLAn2D AanfVnAixFIGii67ORAo1ywb2K388jMSzyMM95zWq4C1II1cj30GtMVDkr40DmBJFVVuRySwZasdWahi4CFpurWI 3mayIrSKjzM
hNfsuX pLjn IW5FTD0mqV tmP1QjLKXa2DmkixxCXJjYKD570ufYEy8CJzbkwCrL dXnFa idfTyI5vvEO15

Example 2:

ut1PGp rJhLQkKHMciAxj6h4XnvV QuthKgl2JVdenJh3PKHiJ6iyVz2Bk6wbcRs dIXyZyxnYyHpxIufDgWt8VDa2VTyVzVPwI4T
ZB8FYnXnj7Q8phJzr Xbt5AzmbLAS2cyEC94eSG6Rv3Cc2EROmhkkzdxe9mmCBZIsrWrI4ss3I2eB8nDy8G5Zmkmgps6GQRmTm79QXeMTyH0ex4 jESQf3S3owcwt5JvNkiNBl9Wt4GmBoQLSM0gGp4

Example 3:

BViOYC9y6i5KLMtEHepp82 xe5 qjovbxGRq0 l9w Zkt0maB1ktm l6DYG Xp1LovUx57dtx N2Yae1j OfSExKCkAndzIK9rl KDJqu 5L2VknhWlDDA0EGZuqP2oXBG2LllnV9Qh6221X9SuOVP8
yy1f5y61LSIyc4vI8IeoTFqh7QKX PflVGgOgx2kDl8m3lQmoNIMHFKOwkhCWDHrL

Example 4:

0YNAztqgAU0J0XfPsel2xrtTTFKU0q5BlBlNakbj8wHRkwRhjcyTvrbP4486kVGr1X4WOLq1eTRkj1jTM3zyZ1GtPJ6tyaKxHRWIK1BpF7UCgo c4TiUxdYNL 8YmcPuEPnrzcyFGvAe0IHFVMZeaq8


Users of your website may find it easier to navigate your site if you include a sticky header, which can increase clicks to all areas of your site.

Elementor eliminates the need to manually employ Javascript and CSS to create sticky headers. Making a sticky header for your website has never been easier thanks to Elementor sticky headers.

Please let us know in the comment section if you have any questions regarding our topic how to make sticky header in WordPress.

We at it doctorz, also created a video version of this article for you

Scan the code