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!
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.
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... ;)
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!
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!
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.
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
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?
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.
@@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. 🙏
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?
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 :)
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.
@@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?
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
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.
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.
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.
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.
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 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 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
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!
Dude, this was great. So simple and straight forward.
Super easy when you know how! Thanks Jamie
👍 It's not the most intuitive thing in the world, but once you know how, it's very easy 😀
This was of great help, thank you!
Thanks for letting me know :) 👍
How to make two separate headers, One that only show when you scroll down on the site?
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.
Glad it was helpful!
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
Dear Jamie, your videos are mostly very helpful to me. Could just implement the sticky header into my website. 🙏BIG THANKS
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... ;)
Wow thanks Martin 💪
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!
Great to hear it helped :)
Did the job. Super easy once you know how. Thanks a ton Jamie!
Great to hear 👍
so simple - i just wasted like 30mins trying diffrent methods.
thank you so much!
👍
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!
Great to hear it helped Suzie 👍
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.
Hi Jamie, can you give css code that make the sticky header SHRINK when scrolling? Or any plug in I can use? 🙏
We could also add a CSS filter property to mimic that iOS look on the navigation.
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
Hi , yes Astra is not a block theme so you wont see that option 👍
@@jamiewp thanks, but what's the theme is a block theme?
@@MohamedSayed77 all of these wordpress.org/themes/tags/full-site-editing/
Really good work! =D
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 ?
Will do some thinking
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?
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.
@@jamiewp Thanks, good points to bear in mind.
do you recvomend greenshift pkugin or is a any other better alternative ? and which fse theme do you think is best ?
Could you help us on how to include “Table of contents” in single post template without using any plugins.
At the moment you’ll need a plugin - although I understand its coming in core in WordPress 6.5
@@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. 🙏
that's so great to hear 👍@@RAJIFY_INDIA
Amazing tips! Thanks so much
Thanks Dennis 👍
Very simple n powerful.
👍
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)
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?
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 👍
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".
Hi @@oliverreese272 do you mean a) create a theme from child theme?
@@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.
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?
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 :)
Interesting one - i'll have a think
Thank you Jamie!
Thank you !
My pleassure
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.
Hi Andrew- it sounds like that website doesn’t have a block theme installed- what theme is it using?
@@jamiewp hi Jamie, its twenty twenty four. Thanks for replying
@@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?
@@jamiewp Jamie! That did the trick! Awesome, many many thanks!
@@andrewf.7813 great news 💪
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
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. ❤
Great 👍@
Thanks for this amazing tutorial. But now when I scroll down it is above my footer. Thats not cool
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.
👍
This comment saved me 👍
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.
Great suggestion!
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.
That's amazin, thank you very much for this tip!
My pleasure 😇
Great! Ty
Glad it was helpful :)
Just the job, we'd be lost without you Jamie..
Thanks Rich 👍
doesn't work. Wordpress needs a lot of work
It does work 👍
@jamiewp Full of glitches.
Finally! An easy to follow solution 🙏
Did the Job. Thanks man
Thank you so much Jamie for another very useful and practical video tutorial.
thanks Dejan
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.
Hi Charlie- the navigation block should be responsive out of the box . What issues are you seeing?
Thanks Jamie!
👍
Good tut! Now let's make a transparent navigation with scroll reveal (limited code). No plugins!
On the case
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.
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?
@@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!
@@davidson7838 The Maldives ??? You on holiday?
@@jamiewp I am a Maldivian sir. I like your videos and I watch all most every single video. I 💙 it. Thank you
@@davidson7838 oh wow, that's great, thank you 🙏
Hi Jamie, how about your original vidéo cover ? Sticky header 😂 Loved it!!
😬 i got cold feet
Muito obrigado, isso foi simples mas de um valor inestimável para um leigo!
Obrigado por assistir!
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?
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.
@@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
@@insqsq4533 Have you clicked on Templates?
@@jamiewp Hello, thanks for your messages, so what are the exact steps to replicate the list view you have please
?
Wonderful!💋
Thanks Sonya