How to Create a Sticky Header in WordPress
Vložit
- čas přidán 4. 07. 2024
- Easily create a sticky content block (such as your header) in this tutorial with the newest update on WordPress version 6.2.
make.wordpress.org/core/2023/...
The best way to support or say "thanks" is to start your website idea!
If you use my affiliate links, I get a small cut (no extra cost to you) that helps me create free tutorials like this.
🌎 How to Install WordPress in Minutes 👉 websiteprofitcourse.com/hosting/
✅ Start now with HostGator 👉 websiteprofitcourse.com/hostg...
Use code: WPC1 (up to 62% OFF)
Video chapters:
Intro - 00:00
Open template editor - 00:41
Edit Front Page template - 01:18
Set Header position to sticky - 01:50
Now take action - 02:34
Use the links below to build your side business today!
___________________________________
Start Freelancing & Make Money with Your Skills!
🧰 15 Tools to Start Your Web Design Business - websiteprofitcourse.com/dl15
❓ Web Design Client Questionnaire - websiteprofitcourse.com/dl02
⌚ Time Tracker Sheet - websiteprofitcourse.com/dl05
🤝 Web Design Business Pro Tools & Training - websiteprofitcourse.com/join
___________________________________
Create Your First Website or Blog Today!
💻 WordPress 101 Training - websiteprofitcourse.com/dl03
🚀 Launch Your Blog in 14 Days - websiteprofitcourse.com/14day
🎨 #1 WordPress Page Builder - websiteprofitcourse.com/divi/
___________________________________
DISCLAIMER: Please note that some links are affiliate promotions. I only recommend products & services that I know and trust.
thanks. helpful
I have the sticky header working in the new Theme 2024 for Wordpress. Thank you for the tip on putting the header in a group. I have run into a problem with my navigation as 2 of my selections are anchor tags within the same page. So the selection of the anchor tag brings me to the proper place on the page but that place is now cut off by the stick header. I have used custom css scroll-margin-top to define where to jump to but I was wondering if you know of any setting that WordPress has to handle this other than custom code that has to take into account the height of the anchor element and the responsive design aspect. Thank you
Thank you for posting this helpful video. I do have a question though and its probably backwards from others you get. I had been trying the sticky and got it working but did not like how the sticky would slowly drop and cover part of my title. So I removed it. But, even though I cannot find any signs of sticky settings and I have purged all caches I could find, I can't stop the site from being sticky. I even reset the Header to remove customizations and its still there. I know it should only be working in the root Group but its not there. Any ideas either on how to proceed with this?
Late response, but in this situation, I would debug it using Google Chrome to find out where the sticky feature or CSS class is being applied. This is a somewhat advanced technique, but if you identify it, you will know what block has the setting. Cache issues can be a headache sometimes!
@@RayDelVecchioIt was probably a cache issue as the problem went away and not from anything I think I did specifically for it. Thank you
This looks like a good tutorial and it's how I've set mine up, but I did it through the template editor so the header is it's own component, and I think that might be why it's not working for me. Any ideas why that might cause problems? I wouldn't want to have to change the header on every page by keeping it as an individual instance
One possibility is that it's not a "synced" pattern (meaning when you save it'll update everywhere it's used... used to be called "reusable blocks"), or perhaps you have two versions of the header and the other one is included in your other templates. I'd definitely start by jumping into the main templates that run your blog posts, pages, etc., and see the name of the Header template part that's used. Then check your list of template parts and make sure everything is good there, too.