Learn how to easily create a sticky header and footer on your WordPress website with no plugins required!

👉 FREE THEMES
👉 Stay in touch with WordPress news:
👉 Get WordPress help :
👉 Channel Sponsorship opportunities
👉 Godaddy WordPress Hosting Deal –

Timeline
0:00 – Intro
0:20 – How to create a sticky header
2:00 – How to make header transparent
2:24 – How to add a top sales bar
3:20 – How to fix footer

In this tutorial, I walk through step-by-step how to:

✅ Group header elements and apply “position: sticky” to create a navigation bar that sticks to the top when scrolling

✅ Adjust background color opacity to allow images to subtly show through the sticky header

✅ Use a row block with “position: sticky” to add a sales banner sticking to the top of pages

✅ Create a sticky footer using a row block, custom CSS class, and just 3 lines of code to fix it to the bottom

✅ Replicate the apple.com website coming in another video next week! (Subscribe if you want to see that)

Adding sticky headers and footers is a great way to create an immersive browsing experience for your readers. I demonstrate this on the new 2024 WordPress theme but it works on any block based theme.

I appreciate you taking the time to watch and any likes/subscribes since that helps me create more free tutorials! Let me know in the comments if you have any questions.

More great WordPress content coming your way in 2024 so stay tuned!

Custom CSS 💪

.bottom-menu {
position: fixed;
bottom: 0;
width: 100%;
z-index: 100;
}