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

[@doo847]

Finally, straight to the point and simple. LOVE IT!

[@jamiewp]

Thank you 🙏

[@jesusguerrero2450]

Hello Jamie, thank you so much for showing us this great tip, I was lost searching for different solutions with CSS codes, but this worked like a charm, thank you very much!

[@WestbrookAds]

This is great! It's nice to see examples like this to help jazz up Gutenberg with CSS. From the basics to more advanced, this is fun content. Thanks for all you do.

[@jamiewp]

Glad it was helpful!

[@KulturhaltestellenNortorf-xx8]

Ha! Thanks so much! Yes there is an option to create a sticky group, but it's not the header etc. Thank you for explaining that the header has to be inside the group ! Saved tons of trial and error!

[@jamiewp]

Great to hear it helped :)

[@jonbloor8661]

Super easy when you know how! Thanks Jamie

[@jamiewp]

👍 It's not the most intuitive thing in the world, but once you know how, it's very easy 😀

[@MrRapa11]

Finally! An easy to follow solution 🙏

[@martinkaspar5095]

Jamie, you're indeed a blessing to the whole WordPress-community! you inspire WordPress-user - all over the globe: ❤ 😊👍 👏👏💥 🎆💥🎆🌟🌟🌟🎆💥👏👏👏👏👏🎆 plz keep up your great work we love you... ;)

[@jamiewp]

Wow thanks Martin 💪

[@richmaniow]

Just the job, we'd be lost without you Jamie..

[@jamiewp]

Thanks Rich 👍

[@ursulamannix2093]

Just brilliant. Thank you!

[@jamiewp]

Thanks Ursula 👍

[@TylerSmithVoice]

Dude, this was great. So simple and straight forward.

[@marjolein_pas]

That's amazin, thank you very much for this tip!

[@jamiewp]

My pleasure 😇

[@bajrushmurtezi2631]

so simple - i just wasted like 30mins trying diffrent methods. thank you so much!

[@jamiewp]

👍

[@yasershahian3134]

Hi Jamie, great video as always. I really enjoy your tutorials on FSE. I have a question about creating menus on block themes. How can we build mega menus that are responsive and user-friendly? I would love to see a video about it from you. Thanks for your amazing work.

[@jamiewp]

Great suggestion!

[@VincentHLLim]

Did the job. Super easy once you know how. Thanks a ton Jamie!

[@jamiewp]

Great to hear 👍

[@michaelanders8512]

Dear Jamie, your videos are mostly very helpful to me. Could just implement the sticky header into my website. 🙏BIG THANKS

[@fon267]

This was of great help, thank you!

[@jamiewp]

Thanks for letting me know :) 👍

[@DejanBuric]

Thank you so much Jamie for another very useful and practical video tutorial.

[@jamiewp]

thanks Dejan

[@jsonnewend]

Muito obrigado, isso foi simples mas de um valor inestimável para um leigo!

[@jamiewp]

Obrigado por assistir!

[@litimhmida2793]

How to make two separate headers, One that only show when you scroll down on the site?

[@QalbeAbbasKazmialikazmi]

Did the Job. Thanks man

[@visualmodo]

Really good work! =D

[@DavePerth]

Thanks Jamie, I really like the addition of the sticky header animating in (slide or fade-in) as you scroll down, how easy would that be ?

[@jamiewp]

Will do some thinking

[@vishalmukadam]

Very simple n powerful.

[@jamiewp]

👍

[@psalib89]

Fantastic! Can you explain how to have the transparent header sit on top of the hero image. I tried applying a negative margin but the ollie theme kept resetting it to 0 when i tried to save.

[@dennis_woo]

Amazing tips! Thanks so much

[@jamiewp]

Thanks Dennis 👍

[@Sonya_Makepeace]

Quick question Jamie. When you are building a WordPress website for a client, do you build it "live", or do you build it on your computer first, then migrate it to another host?

[@jamiewp]

It depends , but. i would avoid building it on my computer (in case it breaks, or gets stolen). So i always build on a server (sometimes my customers have staging sites as part of their hosting). For one customer recently I built on instawp and then migrated to the live server.

[@Sonya_Makepeace]

@@jamiewp Thanks, good points to bear in mind.

[@marionyeosaki]

Hi Jamie, can you give css code that make the sticky header SHRINK when scrolling? Or any plug in I can use? 🙏

[@charlie-hebert]

Very sleek and simple, Jamie. Thank you! One thing I'm struggling with coming up with a way to make the menu responsive for mobile without having to build a custom block or use a plugin. Is there some way in Gutenberg to set media queries for the menu? I see you used some custom CSS, but I'm wondering if there's a way to write CSS in an editor just for the block (not globally) or are there some controls for this that I've missed? Everything looks good on desktop, but I can't seem to find a way to make tablet or mobile designs with native Gutenberg.

[@jamiewp]

Hi Charlie- the navigation block should be responsive out of the box . What issues are you seeing?

[@Abdlmnn1]

We could also add a CSS filter property to mimic that iOS look on the navigation.

[@davidjboozer]

Thanks Jamie!

[@jamiewp]

👍

[@edgoogle9297]

Great! Ty

[@jamiewp]

Glad it was helpful :)

[@SuzieMelGri]

Thanks so much for this! I have been breaking my head for days because for some reason the 'sticky' position for the header only does not work. Not sure why WP even has that option if it doesn't work without grouping the header. Thanks again!

[@jamiewp]

Great to hear it helped Suzie 👍

[@Sonya_Makepeace]

Wonderful!💋

[@jamiewp]

Thanks Sonya

[@gashumba888]

Good tut! Now let's make a transparent navigation with scroll reveal (limited code). No plugins!

[@jamiewp]

On the case

[@CronYcK1]

do you recvomend greenshift pkugin or is a any other better alternative ? and which fse theme do you think is best ?

[@BolivianNewsJunkie]

Thank you for another great video Jamie! I followed your Techcrunch tutorial and I am designing a small news site around it but I am struggling with making the sticky navigation bar on the side sticking on mobile as well (I am trying to make it stick on top as well as the logo), this might not be the right place to ask this, but any suggestions would be incredibly appreciated :)

[@jamiewp]

Interesting one - i'll have a think

[@BolivianNewsJunkie]

Thank you Jamie!

[@ukrytynarcyzm8655]

Thank you !

[@jamiewp]

My pleassure

[@Animo-zx8vf]

Eu estou usando um tema Astra e o Spectra para a criação, porém não consigo editar o Header igual aparece no seu vídeo, para mim o Header só edita no Construtor de Cabeçalho, e não no Editor de blocos.

[@iccepro7540]

I did what the video says but how do I make it sticky on all the pages? It's just doing it on the Home page only and not the others

[@MohamedSayed77]

Thank you, Jamie, it's beneficial, but in my Gutenberg, I can't see the header in the editor, I can edit it just from astra customize section. can you help.. thanks In advance

[@jamiewp]

Hi , yes Astra is not a block theme so you wont see that option 👍

[@MohamedSayed77]

@@jamiewp thanks, but what's the theme is a block theme?

[@jamiewp]

@@MohamedSayed77 all of these wordpress.org/themes/tags/full-site-editing/

[@CampanellaFoto]

This one was confusing, I was trying to do it just playing around in Twenty Twenty Four. If you are editing the header template and set it there it does not work. You instead have to do it on the page templates. One of those things were the lack of polish trips you up. Luckily when I saw the left hand sidebar on your video I figured out I needed to do it somewhere else.

[@jamiewp]

👍

[@sleepycat-productions]

This comment saved me 👍

[@tgk789123]

why are these videos so completed? i searched lke 10 videos trying to find out how to do this and i turns out to be SUPER EASY! (July 2024)

[@oliverreese272]

Hi Jamie. I love your videos with so many Tipps. Can you make one video how can I get 4 columns on desktop to 2 columns on mobile please?

[@jamiewp]

Thanks Oliver - i think i've done a video on that before, I'll try and dig it out. If not, it's a great idea 👍

[@oliverreese272]

Thank you!@@jamiewp It is possible to export one main theme from a theme with a child theme? I use the plugin "Create Block Theme".

[@jamiewp]

Hi @@oliverreese272 do you mean a) create a theme from child theme?

[@oliverreese272]

@@jamiewp Yes! Now I have to copy both themes (main and child) to the server. But I would like to create a new independent theme from them.

[@FlorentClaude]

Hi Jamie, how about your original vidéo cover ? Sticky header 😂 Loved it!!

[@jamiewp]

😬 i got cold feet

[@kaid3566]

Now I know that I need to nest my Header inside a Group in order to make it "sticky" but I still don't understand exactly why. The Position/Sticky option does not appear for the header itself, only for a Group (whether or not it contains the Header). What could be the reasoning behind this?

[@jamiewp]

Hi, it’s because of how the sticky position property works. It needs something to stick too…but I agree it is confusing.

[@fineasfrogshair]

This works great on all pages except the Blog archive page. So I performed the same process on all the templates. (I don't think adding css is a long-term solution.) Now if I could only figure out how to place an UP ARROW on my site. Anybody do this on FSE natively?

[@RAJIFY_INDIA]

Could you help us on how to include “Table of contents” in single post template without using any plugins.

[@jamiewp]

At the moment you’ll need a plugin - although I understand its coming in core in WordPress 6.5

[@RAJIFY_INDIA]

@@jamiewp Thank you..i have created my entire website with the help of your guidance/videos without using any plugin. Thanks a lot for your contribution. 🙏

[@jamiewp]

that's so great to hear 👍@@RAJIFY_INDIA

[@davidsonzed]

Hi Jamie, can you please tell us how to use sticky menu with templates? Now when we create a new page, we can't see or it's locked that purple colored "Header" and "Footer", but in this video, I can see it in the list view. We can't group the header as we can't view it. How did you see the Header and Footer in this page? Thank you.

[@jamiewp]

You need to do this in the site editor, but you can only do this if you are using a block theme. What theme are you using?

[@davidsonzed]

@@jamiewp I am using 2024 theme, and now I found it from site edit->theme-design->templates. Now it's working fine. Thank you for your contributions to WordPress community. You are doing an excellent job. A Big Thank you from MALDIVES!

[@jamiewp]

@@davidsonzed The Maldives ??? You on holiday?

[@davidsonzed]

@@jamiewp I am a Maldivian sir. I like your videos and I watch all most every single video. I 💙 it. Thank you

[@jamiewp]

@@davidsonzed oh wow, that's great, thank you 🙏

[@onkelzaufsendung-dervideop2943]

Thanks for this amazing tutorial. But now when I scroll down it is above my footer. Thats not cool

I always watch your videos but I still don't know how to make the header sticky. With this method the header remains sticky just on that page. For example, if I make the modifications to the Pages template, the header remains sticky just on my Contact, About and Privacy Policy pages but not on my blog pages. I need to make these modifications to all the templates. Please help... Best regards, G

[@jamiewp]

Some nice person tweeted this solution out today ( i haven't tested yet) claudiorimann.com/sticky-navigation-in-fse-themes/

Thank you for your answer, it fixed all my problems. ❤

[@jamiewp]

Great 👍@

[@insqsq4533]

Hello my 2024 theme does not give the options you have on screen? All I can do I customise theme, there is no home page in the pages?

[@jamiewp]

Are you sure you are using the Twenty Twenty Four Theme? If you go to Appearance / Editor in your dashboard you should see the options.

[@insqsq4533]

@@jamiewp Hello Jamie, would have been useful if you went onto the wp dashboard and clicked, appearence and editor to show this step, I know you mentioned it but it was brief, I am using Twenty Twenty-Four Version: 1.1. When I click on appearance then editor all is get is design options > Design Customize the appearance of your website using the block editor. Navigation Styles Pages Templates Patterns There could be a conflict with plugins of something else I am going to check

[@jamiewp]

@@insqsq4533 Have you clicked on Templates?

[@insqsq4533]

​@@jamiewp Hello, thanks for your messages, so what are the exact steps to replicate the list view you have please

[@insqsq4533]

?

[@andrewf.7813]

I don´t see how to get to the view you start with? When I edit home page, and then block view, I don´t see header? Where can I see the ´site editor´you mention. I tried appearance-theme-customize but that does not show the view you have here.

[@jamiewp]

Hi Andrew- it sounds like that website doesn’t have a block theme installed- what theme is it using?

[@andrewf.7813]

@@jamiewp hi Jamie, its twenty twenty four. Thanks for replying

[@jamiewp]

@@andrewf.7813 that sounds a little strange - i think you might be editing the page, rather than the template. Can you go dashboard / editor / templates and try there?

[@andrewf.7813]

@@jamiewp Jamie! That did the trick! Awesome, many many thanks!

[@jamiewp]

@@andrewf.7813 great news 💪

[@peacew6]

doesn't work. Wordpress needs a lot of work

[@jamiewp]

It does work 👍

[@peacew6]

@jamiewp Full of glitches.