How To Create A Sticky Header In WordPress
Vložit
- čas přidán 4. 07. 2024
- 🏆 #1 Content Generator ➜ gravitywrite.com/
🌐 The Best Place to Host your Website ➜ webspacekit.com/
❤️ 𝗚𝗲𝘁 𝟱𝟬% 𝗢𝗙𝗙 𝗢𝗡 𝘁𝗵𝗲 𝗦𝗨𝗣𝗘𝗥 𝗙𝗔𝗦𝗧 𝗪𝗼𝗿𝗱𝗣𝗿𝗲𝘀𝘀 𝗛𝗼𝘀𝘁𝗶𝗻𝗴 ➜ go.webspacekit.com/StickyHead...
✍️ 𝗚𝗲𝗻𝗲𝗿𝗮𝘁𝗲 𝗛𝗶𝗴𝗵-𝗤𝘂𝗮𝗹𝗶𝘁𝘆 𝗖𝗼𝗻𝘁𝗲𝗻𝘁 𝗤𝘂𝗶𝗰𝗸𝗹𝘆 ➜ gravitywrite.com/
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.
❤️ 𝗢𝘂𝗿 𝗥𝗲𝗰𝗼𝗺𝗺𝗲𝗻𝗱𝗲𝗱 𝗪𝗼𝗿𝗱𝗣𝗿𝗲𝘀𝘀 𝗧𝗼𝗼𝗹𝘀
🔴 🌐 Free Domain + ⚡ Fast Hosting | 𝗪𝗲𝗯𝗦𝗽𝗮𝗰𝗲𝗞𝗶𝘁 | wl.coupons/3Lqivsh
🔴 🖥️ Ready-made Websites for 🏷️ Sale | 𝗠𝗮𝗸𝗲𝗬𝗼𝘂𝗿𝗪𝗣 | wl.coupons/3LsBUbT
🔴 🧑💻 Get your website developed by 👨💻 Experts | wl.coupons/38Iu94d
🔴 🛠️ Check out our Top recommended 𝗧𝗼𝗼𝗹𝘀 | wl.coupons/3Mzk6x4
🔥 𝗪𝗲𝗯𝘀𝗶𝘁𝗲 𝗚𝘂𝗶𝗱𝗲 - 𝗦𝗶𝗺𝗽𝗹𝗲 & 𝗘𝗮𝘀𝘆 𝗦𝘁𝗲𝗽𝘀 𝘁𝗼 𝗹𝗮𝘂𝗻𝗰𝗵 𝘆𝗼𝘂𝗿 𝗳𝗶𝗿𝘀𝘁 𝗪𝗲𝗯𝘀𝗶𝘁𝗲
🟢 🖥️ Make a Website in 10 mins | wl.coupons/3G0Hlxy
🟢 📰 Make a Blog - Quick & Easy | wl.coupons/3G5n4a5
🟢 🛍️ Make an Ecommerce site | wl.coupons/3wGAtRM
🎓 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀 𝘁𝗼 𝗴𝗲𝘁 𝗯𝗲𝘁𝘁𝗲𝗿 𝗮𝘁 𝗪𝗼𝗿𝗱𝗣𝗿𝗲𝘀𝘀
🔵 🔥 Beginner WordPress Course | 50% Coupon ytSub | wl.coupons/3PzIEb4
🔵 🛒 Ecommerce Course | SAVE 50% Coupon ytSub | wl.coupons/3sLJWpZ
🔵 📖 Check out our Blog posts for free content | wl.coupons/3G2pxCg
🎁 𝗖𝗼𝘂𝗽𝗼𝗻𝘀
🟡 🔍 Grammarly｜20% off｜wl.coupons/Grammarly
🟡 📲 Publer｜10% off｜wl.coupons/publer
🟡 📈 Mangools ｜10% off｜wl.coupons/mangools
🟡 💼 Fiverr｜10% off Coupon WEBSITELEARNERS10｜wl.tools/fiverr
🟡 🖼️ Astra｜10% off Coupon WLDiscount｜wl.coupons/Astra
🟡 📊 SEMScoop｜20% off Coupon SAVE20LT｜wl.coupons/SEMScoop
🟡 📝Anyword｜20 % off Coupon Anyword20｜ wl.tools/Anyword
🙌 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹𝗹𝘆:
𝗪𝗲❜𝗿𝗲 𝗛𝗶𝗿𝗶𝗻𝗴: websitelearners.com/careers/
Want your website developed by us? Email us your requirements to contact@websitelearners.com
💬 𝗙𝗼𝗹𝗹𝗼𝘄 & 𝗖𝗵𝗮𝘁 𝘄𝗶𝘁𝗵 𝘂𝘀:
Instagram ➜ / websitelearners
Facebook ➜ / websitelearners
LinkedIn ➜ / website-learners - Jak na to + styl
*🚀 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. 😃
Please post which is the best website builder with .com domain
Please help.
I have installed the last theme but it's not sticky on mobile it's worked on desktop/laptop view.
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.
THANK YOU AND THE ENTIRE WEBSITE LEARNERS TEAM FOR YOUR SELFLESSNESS
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 CZcams 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!
the simplest and most informative lesson I've seen. Thank you.
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.
Awesome video as always. Short and to the point
Very helpful as usual, thanks guys 😊✌🏻
Thank you, you did it for me, much much appreciated!!! Many blessing to you too.
Insightful. Thank you!☺
Its working perfectly. Thank you so much!
Thank you!!! After trying to do this other ways a very simple solution!!
Great brother..
U guyz make everything so ease..
Thanks...
Thank you for this, very well done!
Thank you so much. I was looking for this since so long....
People
thankyou brother ...finally i got this video after long waiting...
Thank you for this. It really helped.
Thank you for this sweet and simple video
thanks bro this what I actually looking for.
Thank you very much! It works!
Awesome work guys!🎉
Great tutorial, thank you .
Thanks for making everyone happy even as it didn't work for me
Very well done !!! Thank You
thank you so much sir. its was really helpful for me.
thanks for the explaining clearly. after click the menu that section/content is going behind the sticky menu. please help
Great, thank you for this!
Thank you very much for the help!
Awesome, been looking for this
thank you very informative and successful
I love your video editing 🤩🤩
Awesome video . . . thank you!
Great video once again thankss alaot 😊
Thanks! you answered my question!
Always doing great work
Plz make a video seo tutorial
Quality stuff mate
Exelente plugin amigo, saludos
Top!! Plugin. Installeren, sticky aanklikken en klaar! Het laat je header zoals hij is. Je kan m natuurlijk zelf veranderen, maar dat is aan jou.
Very good. The tutorial is easy to understand.
And I want to know that what software are u using for screen recording?
Hey George, Thanks for reaching out. We use Camtasia for recording and editing purposes.
@@WebsiteLearners Thanks for the reply. You are great....
Hi bro how are you love your tutorial
100% helpful!
Your video looks great, can you make me a video grocery? I want to start that because my job has gone into lockdown. Thank you.🙏
Thanks it's working great
Thanku sir this video very helpfull .
Works like a charm. Thanks man 🫶🏼
is it possible to reduce horizontal size of the sticky without upgrading
Thank you so much Bro.
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.
Thank you, thank you and more thank you
thanks, brother. take love.
Thank you!
Can we do same thing with footer too with this plugin?
Do you use separate or with custom header and footer my not happen sticky header
sorprendente amigo muchas gracias.
Please make video on
How to setup woocommerce and craft flows, stripe .
How to add categories in ecommerce app
Amazing Tutorial
Thank you very much sir it's working
my g! thank u sir!
You Are Awesome Sir. You made my day 😊
Glad to hear that
take love from Bangladesh 😍
You are the man!
Hey Can you tell that how to add a Video on ecommerce website as you know returns , replacement is available but matter is unboxing video is compulsory as a proof so please make a video on video plugin
Hi,kindly let me know how can I publish my articles on WordPress Website. I already build up pages like Home, About, Service & Contacts. But here I am confused by watching different CZcamsr videos. Can I Publish my articles by using Elementor & link to different Pages? OR I only can go to the WordPress dashboard post there? Kindly reply to me asap.
I will be thankful to you.
Thank you 🤝
Please upload more about e commerce website plugins and other options
Thanks a lot!
Kindly make a video on mega menu, wher we can add images in menu
thank you man
hey bro, please make videos on how to make a website like Olx as the buy and sell option
very helpful video
Thanks! Sir
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.
Omg, nothing was working for me: I tried a bunch of different options and your procedure worked! You just saved me, thank you. :)
Thanks a lot!!
I was near to uninstall this plugin but then i read your comment...thanks for saving my time in searching
@@lulichr1212 I am glad it helped
@@B.S205 It's my pleasure :)
Thank you help full video
Can you make a tutorial how to upload or receive a file just like red arcade website please 😶
Hi my lovable brother please tell me how to make the service website example for electrician services .
Please put on a service website dedicated video.
thanks, brother.
Please make video on how to create affiliate links to the Ecommerce website.
Sir,
How to bring traffic to the website?
And how to make backlinks to the website.?
Thanku Thanku so much Bhai,✅
Could you make a video about how to add CSS to make a header fixed on top? >< Because my website has too many plugins so it runs slowly...I don't want to add more plugins in it.😭
Of course there is a CSS code you can add to do this. I can help you write it if you don't mind.
thanks!!!
My hero.
Best of luck 💝💝
Thanks bro
Stripe in the top of the website also sticky. I only want to stick the nav menu. How to do this?
How to add horizontal smooth scrolling in the website
very very useful video
very good
You guys are fab
What if i want the sticky header to show logo and some less stuff
Explain about how to create Blog related app connecting with WordPress website
How to make a transparent logo like you made graphic solve .
Please tell
Thank you..
I have a suspicion . What to do if the computer is gone after installing the WordPress website. Can the same website to installed on another computer again?
Sir, it's my request that you should make a video how to increase website speed while using adsense ads......
No video is available on CZcams.
Header in website looks perfect over pc and it totally changes over phone. How to make it look good over mobile view?
You can set it separately for mobile browser
Same problem phone pe chenge dikha rha h??
What's ur Website so that I can check?
It will look better only if u code for the android that what I fill and I have noticed
Coding sikho , fir banao jo maan kre..
thanks
i created menu using header footer menu plugin and wen i apply this sticky menu its not working.am i doing smtg wrong.will it wrk for custom one.i selecte my menu only
Sir i want to add whatsApp share button before payment, how to do it?
How to Rank Your e commerce Website on Google, please make a video on this topic