Responsive Sticky Navbar that Shrinks on Scroll with Tailwind CSS & Alpine JS

This is a tutorial to create a sticky navigation bar that shrinks when the user scrolls up, using Tailwind CSS & Alpine JS. The navigation is completely responsive too, with a full page menu toggle.
CodePen Demo Link : codepen.io/shr...
------
This video is sponsored by Showwcase: Join me - www.showwcase.com using the invite code "joinshrutibalasa"
------
Work illustrations by Storyset - storyset.com/c...
Subscribe and stay tuned for tips, tutorials and more.
Follow me on Twitter: / shrutibalasa
Follow Thirus on Twitter: / thirusofficial
Visit my website: www.shrutibala...
#alpine #alpinejs #tailwind #tailwindcss #navbar #shrinkonscroll #responsivenav

[@mainjambunge2402]

Awesome tutorial, I love the way you use Alpine JS.

[@Thirus]

Thank you 😊

[@paulfontaine7819]

Great content and approach. Thanks. One detail: I prefer `@scroll.window="scrolledFromTop = window.pageYOffset > 50"` because it's more concise. But your version may be easier to read from some people.

[@Thirus]

Thank you..

[@theSavanahDev]

I like your Tailwind videos. This one is one of the best so far, keep them coming.

[@Thirus]

That feels so awesome to know! Thank you :)

[@kidbrave_7673]

I second that comment! I'm new to tailwind and alpine. I was pretty nervous diving into alpine because of the syntax as well as the steps to installing tailwind, but through your videos, you've made it seamless to follow along and learn both technologies at any level as a developer. Thank you, Thirus! 🙏

[@necatbolpaca7882]

10:18 - "Yeah. So that's what we needed and that's what we have." is my favorite moment on this tutorial.

[@Thirus]

😎

[@shahinmirza9934]

:class="[navbarOpen ? 'translate-x-0' : 'translate-x-full' ]" is a shorter and better way for wrighting conditional statements, but great job on explaining tailwindCss. thank you! Love from Iran.

[@Thirus]

Thank you!

[@MohdRusmanAriefARahman]

Thank you for making this Shruti.

[@Thirus]

You’re welcome :)

[@gdogmalone]

Fantastic, thanks. Wish I’d had this last week as it’s taken me all of last week to build this - and not as well! Couldn’t get transitions to work, which you solved with transition all! Thanks again!

[@Thirus]

You’re welcome!

[@swathiashok4923]

I just Amazed! Your way of teaching is next level. Anyone can learn easily. Thank you, Shruthi.

[@Thirus]

Glad to hear that Swathi :) Thank you

[@webdevluc]

Awesome tutorial Shruti, love it, thanks for creating and sharing it with us

[@Thirus]

Glad you loved it Lucian 😊

[@Codefide]

Excellent tutorial. I found this very helpful. Thanks a lot.

[@Thirus]

You’re welcome :)

[@talkathiriify]

Excellent as usual. Thank you very much Shruti for your time and efforts.

[@Thirus]

My pleasure 😊

[@wieN4rn0]

It's a perfect tutorial as usual...

[@kouceylahadji]

I switched recently to tailwind and this thing comes to the best time, I never carried how to do it in bootstrap Still want easy and best component for modals

[@Thirus]

That’s great! I think I should do a video on modal next

[@RobMatthews21]

Fantastic thank you. Can you do a video in how to create expanding links to show sub-links in the mobile menu.

[@DisasterSPA]

I noticed that the menu goes over the header and there's a gap underneath it. any way to fix this?

[@Thirus]

I didn’t understand. Can you DM a screenshot on Twitter?

[@hb.1234]

Wow, great... thank you 🙂

[@Thirus]

You’re welcome!

[@liviuiurcu9709]

Recent I found your channel, contents with Tailwind and Alpine is amazing. You are the BEST!!! What Formatter do you use for your code? Is nice and clean.

[@Thirus]

Thank you.

[@amans6504]

Such a smooth tutorial.. my fear of css is getting out slowly

[@Thirus]

What an amazing compliment. Thank you. Have you checked out my ebook yet? A complete guide to CSS flex and grid concepts with 70+ real world examples and working demos - shrutibalasa.gumroad.com/l/css-flex-and-grid

[@amans6504]

@@Thirus yes, i saw that on your twitter profile.. will check it surely

[@ongomobile9956]

Thank you so much very cool 🏄‍♂🤠

[@Thirus]

Glad you liked it :)

[@ahmedserag7072]

i need help i just start study tailwind css and about making it responsive i lost cuz sm refer to small devices from 0 to max-width:768px this right or not

[@Thirus]

No, ‘sm’ is from 640px to 768px. Don’t use any prefix to add styles for 0 to 640px. Does that help?

[@ahmedserag7072]

@@Thirus yup this was good and when search more i found that tailwind first is mobile design

[@ahmedserag7072]

@@Thirus Thanks

[@MilindGoel15]

Is it possible to create the half page nav instead of full page which when opened doesn't slide down the content of the page?

[@Thirus]

It’s possible but a half page menu animating from the right might not look great. To animate it from top is tricky.

[@stephenlau2845]

Thanks for your Tutorial....Yes, How can I display the "Contact" item on the navbar also when it use in mobile(0.28), and it will display in middle of the Logo and the toggle button(0:28), and the "Contact" item will not show the list item again while the toggle button is clicked(0.32) ? thanks again....

[@Thirus]

Please DM @shrutibalasa on Twitter with screenshots.

[@mohammedashfanmamdu556]

When i add tailwind ui code from their website.. for header.. the dropdown will be static displayed.. why is it so

[@aktxyz]

Excellent

[@Thirus]

Thank you!

[@Codefide]

Do you have a tutorial on multi-level navigation menus?

[@Thirus]

Probably a good topic for my next tutorial

[@Codefide]

@@Thirus Indeed! Because I have a slight glitch that is, when one of the sub-level menu's are open, and I click on another dropdown, both stay open. I will be working on a solution but I'm sure there will be other beginners who could do with a helpful tutorial

[@tstarfish8829]

Good, but it is not scrolling to the right positions from the navbar links. Sections are below the navbar. It needs to handle the navbar responsive height ;)

[@Thirus]

Yes, agreed. Can be done using “scroll padding” property. Recently wrote about it www.getrevue.co/profile/shrutibalasa/issues/did-you-know-about-scroll-padding-easy-solution-to-fixed-header-problem-1325973

[@jimmacdiarmid8230]

Can you provide a link to the video where you create the landing page please? I didn't see it listed in the description or in the comments. Thank you! :)

[@Thirus]

I haven’t created a video for this particular landing page. But you can find a lot of other similar videos on Tailwind CSS in this playlist - kzbin.info/aero/PLrC_WsW4VdT4k3LWVFpTGM4ryYlDnrEvz

[@blackpurple9163]

How do we close the sidebar when link is clicked?

[@kirindev]

thank you.

[@Thirus]

Welcome!

[@mattiurrehmanbhatti]

Thanks, how to add drop-down menu in it?

[@mfazaildotcom]

You can check here for responsive drop-down kzbin.info/www/bejne/gX_NZIehm9eDp5I

[@garbjorn1757]

Can we use alpinejs in a nodejs express app?

[@Thirus]

I haven’t used nodejs or express. But you should be able to

[@DhiBeney]

Very good tutorial.

[@Thirus]

Thank you!

[@maheshsangam6212]

Hello Madam.. This is really opportunity to learn something really new thanks a lot for this video but I'm facing little problem this logo and menu is coming two edges only but i want to keep them in side my container keeps all content in middle with width 1280px but this logo and menu never fits in it shall we do that??? please kindly let me know thanks a lot!!!

[@Thirus]

Add these classes - “container” and “mx-auto” to keep the them within that width. If you can’t get it working, send me a DM on Twitter. x.com/shrutibalasa

[@achmadfauzi3755]

thank you sis

[@Thirus]

You’re welcome!

[@jvenkatonline]

Its really nice. The combination of TailwindCSS and AlpineJS, its very new. You did a fantastic job. But one thing, I would like to check with you why did you select AlpineJS for functionality? Is it very easy to use and implement - just I want to know whether it will help me for my project or not.

[@Thirus]

Glad you liked it. I chose Alpine JS because it’s the most lightweight framework out there. It’s best suited for such functionalities where vanilla JS would need so many lines of code and other frameworks like Vue would be too heavy

[@GreatCaleb]

Awesome content

[@Thirus]

Thank you :)

[@noureennaaz6128]

I like the theme of your vs code. Please tell it's name

[@MichaelBrown-vq4fd]

Loved this tutorial. I learned quite a bit. One question, when shrinking the screen below :md breakpoint, the nav still uses the transition effect, causing the menu to "fly across the page" off screen as the hamburger menu appears in the duration 200. Is there a way to separate these out so it doesn't do that? I tried the below on the ul, but then I lose the nav slide in animation on :sm

[@rogermarsh5933]

Did you figure this out?

[@maxweber06]

I imagine a dynamic class with a listener on which way the window is being resized would work. Basically, only set sm:transition-none when the last screen size was md and md:transition otherwise.

[@Raj_Vishwa1]

Superb 🔥🔥🔥 pls if possible teach JavaScript 🙏🏻 I like the way you Explain.. ❤️ from Chennai 😊

[@Thirus]

JavaScript is not in my list right now 😊 But I’ll surely consider it!

[@quazisamihatasnim792]

is it possible using react js instead of alpine js?

[@Thirus]

Should be possible. I haven’t used React

[@ebam21]

Excelente, muchisimas gracias por compartir tus conocimientos con todos nosotros!! lastima que solo pueda dar un like

[@aogunnaike]

Awesome 👍

[@Thirus]

Thank you! :)

[@sornt]

great!!! Can you also make a use case of Tailwind CSS & Alpine JS for active menu based on where user scroll in one page landing page.

[@Thirus]

You mean like scrollspy right? I tried that, but it doesn’t work great for sections that are too small. I can send you a CodePen link if you want

[@usherkadio3861]

how do you indent the words in your VSCode?

[@Thirus]

What exactly are you asking?

[@usherkadio3861]

@@Thirus the way you indent the class in the tag please

[@eshwerhari4989]

Hi maam...can u do this in react?

[@Thirus]

Definitely possible. But I don’t know React

[@eshwerhari4989]

@@Thirusfine 👍

[@entech5669]

Hey can you please teach state management in React ?

[@Thirus]

I wish :) But I’m not a React dev

[@entech5669]

@@Thirus oooh 🙁

[@chethiyaprasanga]

Better to add you ebook link also in the description . Thank you.

[@Thirus]

Hey thanks for that tip! Never occurred to me 😀 I’ll go and edit all the video descriptions soon!

[@smartdheena9352]

just amazing..please make some more projects..or please make udemy course for us..plzz

[@Thirus]

In the near future, for sure!

[@isabsk10]

How can we get that type beautiful illustrations free ?

[@Thirus]

storyset.com

[@isabsk10]

@@Thirus Thank you ☺️

[@OnlyJavascript]

how to do this in vue 3

[@LarsRyeJeppesen]

zzzzzz

[@clairesingson3331]

can you make this using react js and tailwindcss too? please? i subscribed to you because youre very good .. thank you

[@Thirus]

I don’t know React sorry.

[@JEsterCW]

Guys, never animate heights or widths, this is hella bad practice and can results in alot of glitches and performance issues even with one single animation/transition for height/width. For navbars size use paddings only, and its more performant to animate paddings aswell.