How To Create A Sticky Header In WordPress

Learn how you can create a sticky header in WordPress website ✔️

Let's say you have a website and you want your header to be always present at top.
You can do this easily by following our 2 simple steps.

So let’s get started!👇

🎬 𝗧𝗮𝗯𝗹𝗲 𝗼𝗳 𝗰𝗼𝗻𝘁𝗲𝗻𝘁𝘀
0:00 Intro
0:41 Install ‘MyStickyMenu’ Plugin
1:35 Make the Header Sticky
2:26 Change the color of the header section
3:43 Make the header sticky for any theme

📌 𝗙𝗼𝗹𝗹𝗼𝘄 𝘁𝗵𝗲𝘀𝗲 𝘀𝗶𝗺𝗽𝗹𝗲 𝘀𝘁𝗲𝗽𝘀

Step 1 : Install ‘MyStickyMenu’ Plugin
Go to WordPress Dashboard ► Plugins ► Add New
Now search for ‘MyStickyMenu’ and click ‘Install’ & ‘Activate’.

Step 2 : Make the Header Sticky
Go to WordPress Dashboard ► myStickymenu ► Sticky menu settings
Now select ‘Primary Menu’ in Sticky class & click ‘Save’.
Next, let’s see how you can change the color of the header section.
Go to WordPress Dashboard ► myStickymenu ► Sticky menu settings
Now, from ‘Sticky Background Color’, choose the color & click ‘Save’.
For some themes on your website, the plugin couldn’t find the header.
So to make the header sticky for those themes,
Go to WordPress Dashboard ► myStickymenu ► Sticky menu settings
Now in ‘Sticky Class’ select ‘Other Class or ID’
Now you need to enter the ID or class of the header.
So to get that, go to your website
Now right-click on the header and click ‘Inspect’.
And you will find the ID and Class of your header.
Now just copy one of those and paste it in the sticky class field.
Make sure you enter ‘#’ if you’re entering ID and ‘. (dot)’ if you’re entering class.
Once you’ve entered ID or Class, click ‘Save’.

This is how you can create a sticky header in WordPress website.

❤️ 𝗢𝘂𝗿 𝗥𝗲𝗰𝗼𝗺𝗺𝗲𝗻𝗱𝗲𝗱 𝗪𝗼𝗿𝗱𝗣𝗿𝗲𝘀𝘀 𝗧𝗼𝗼𝗹𝘀

🔥 𝗪𝗲𝗯𝘀𝗶𝘁𝗲 𝗚𝘂𝗶𝗱𝗲 - 𝗦𝗶𝗺𝗽𝗹𝗲 & 𝗘𝗮𝘀𝘆 𝗦𝘁𝗲𝗽𝘀 𝘁𝗼 𝗹𝗮𝘂𝗻𝗰𝗵 𝘆𝗼𝘂𝗿 𝗳𝗶𝗿𝘀𝘁 𝗪𝗲𝗯𝘀𝗶𝘁𝗲

🎓 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀 𝘁𝗼 𝗴𝗲𝘁 𝗯𝗲𝘁𝘁𝗲𝗿 𝗮𝘁 𝗪𝗼𝗿𝗱𝗣𝗿𝗲𝘀𝘀

🎁 𝗖𝗼𝘂𝗽𝗼𝗻𝘀

🙌 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹𝗹𝘆:

💬 𝗙𝗼𝗹𝗹𝗼𝘄 & 𝗖𝗵𝗮𝘁 𝘄𝗶𝘁𝗵 𝘂𝘀:

[WebsiteLearners]

*🚀 Check out these tools made by Website Learners*:

😥 Save Time Let AI Write For You ➜ Visit GravityWrite.com _(Rated 4.7/5 by customers)_
⚡ Get Lightning Fast Website at WebSpaceKit ➜ WebSpaceKit.com/offer

🙌 If you followed along to create a sticky header on your WordPress site, share a link below so we can check it out! 🔗 I'd love to see the sticky headers you built. 😃

[esongebong]

THANK YOU AND THE ENTIRE WEBSITE LEARNERS TEAM FOR YOUR SELFLESSNESS

[Joehirst]

Thank you for this! I've been out of the loop for a few years when it comes to web design and development, and I really didn't want to have to try and brush up on some smart ways to do this with CSS and JS. This saved me unmeasurable time. Did exactly what I needed it to do in 10 seconds.

[rainbowgalaxykid]

Man this guy is the best. makes things so easy and gets to the point. I have no knowledge at all of websites I was forces to have to figure this stuff out on my own. I searched here and there with not much luck searching YouTube going into videos coming out only more confused than I was before ( Not that the other videos were bad not at all ) I was just looking for what resonated with the speed my brain could process things I did not know and then I came across this channel. Building this website and gaining more knowledge has been easier now.

Thank you for your help and this channel!

[iamdann]

the simplest and most informative lesson I've seen. Thank you.

[minpaldy]

This was incredibly helpful! And honestly, it was the third video I watched to figure out how to create a sticky header. The other ones just gave me a massive headache. I'll admit, you started losing me a bit at the class/id HTML stuff (that stuff makes my head hurt 😆) but it worked!! Thank you so much! Great job explaining this & I'll definitely be checking out your other videos.

[JatinNagpal]

Awesome video as always. Short and to the point

[subhodeepbose]

Thank you so much. I was looking for this since so long....

[danhargrave]

Thank you!!! After trying to do this other ways a very simple solution!!

[Studently]

Hi, if the above procedure does not work for you then instead of primary header menu, select "Other Class or ID" and in the field next to it add this #masthead and then adjust the opacity, background colour and save.

[SripalRajal]

Header in website looks perfect over pc and it totally changes over phone. How to make it look good over mobile view?

[chevalsauer]

Thank you, you did it for me, much much appreciated!!! Many blessing to you too.

[neducaref]

Thanks for making everyone happy even as it didn't work for me

[doneforyou]

thankyou brother ...finally i got this video after long waiting...

[joelferns]

Hi
I'm using Astra theme. The sticky header background colour didn't apply to the categories page of my website on pc. The sticky header background colour didn't apply at all when accessing the website on mobile. Kindly advise. Thanks.

[rahulsonare]

Thank you for this sweet and simple video

[temdenis]

Thank you very much sir it's working

[luigiryan]

usually I love your videos, but this time neither option worked for me I'm afraid!! I stand corrected!!!! How could I doubt you, I simply didn't add the correct id into the 'other class or id!! Thank you so much again, sorry for doubting!!

[georgewilliams]

Very good. The tutorial is easy to understand.

And I want to know that what software are u using for screen recording?

[Alphathoughtsdaily]

Great brother..
U guyz make everything so ease..
Thanks...