How to Create a Sticky Header in WordPress (No Plugins) 🔥

Published: 12 January 2024
on channel: Jamie Marsland
16,432
627

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

👉 FREE THEMES https://www.pootlepress.com/free-word...
👉 Stay in touch with WordPress news: https://www.pootlepress.com/sign-up-t...
👉 Get WordPress help : https://www.pootlepress.com/get-wordp...
👉 Channel Sponsorship opportunities https://www.pootlepress.com/youtube-v...
👉 Godaddy WordPress Hosting Deal - https://bit.ly/jamiewp

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;
}


Watch video How to Create a Sticky Header in WordPress (No Plugins) 🔥 online without registration, duration hours minute second in high quality. This video was added by user Jamie Marsland 12 January 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 16,43 once and liked it 62 people.