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

[Music] hello and welcome to tyrus web development tips and tutorials in today's video we will see how to create this navigation bar which is responsive and it's sticky and also it shrinks on scrolls so when you scroll down it just becomes a very thin navigation bar otherwise it's this big and it's also responsive so on a mobile screen you will see a hamburger menu and when clicking on that a full screen menu appears so you will not be able to scroll you can click on any of the links and it will scroll to that position so this is what we'll be building today this video is sponsored by showcase a professional network built for people who code to connect build community and find new opportunities hang out with like-minded individuals share your knowledge and build your own community you can share blogs videos projects code snippets and short messages if you are a content creator you can grow your own audience and make some money through paid subscribers join me and thousands of developers on showcase today to start with i already have a project where i have installed tailwind css and with the latest version using post css and also configured the gi team mode you don't have to worry about any of that because i have multiple other videos that shows installation so if you already know that i have prepared the first section and everything so let's open this with live server and we have this much already done so we can focus on building the navigation bar let's get to it now since it's a fixed navbar let's uh add a header element with class fixed and then this will be a flex container because we want the logo on the left and the menu on the right flex with justify between and items center also we need some horizontal padding so something like px 4 and on larger screens let's make it px12 and within this let's add the logo within a link so image [Music] i have the image uploaded on cloudinerry alt is a chat logo let's set some height to it something like maybe h12 okay let's see what this looks like that's quite big so maybe h8 that's small h10 yeah the logo size is fine but let's add some height to the entire header so that will be maybe h20 yeah so this is what the height of the navbar is or maybe h 24 before it shrinks right since tail when css is mobile first let's build the mobile layout first yeah let's open this up in responsive mode and we need to get the hamburger menu on the right here for that for that icon let's go to hero icons and pick up the hamburger menu icon copy svg and let me add that here within a nav element and a button so that's the svg here height h8 w8 should be good and let's have a text white for this one okay yeah for some reason justify between isn't working let's see why that is right so because header is fixed element it occupies the width of the both these elements here and instead of full width so let's add a w full here that should fix it for us yeah so that's perfect now on click of the hamburger icon we have a full screen menu that appears so let's work on creating that so one is the button right after the button let's add the list with home features about and then contact features about and contact and now for the smooth scroll um like when you click on the link it scrolls down to the section smooth right for that let's add this oh sorry let's add the custom styles here in our custom style sheet which is staleman.css of course you can add it within style tags here also now this is a layer base html apply no scroll behavior smooth okay we'll test that later that's okay so let's see where this list gets positioned right this is where it is now now we need to make this position fixed so what we do is ul class fixed and this also needs to be w full or i think we can add a left 0 and write 0 and then min height screen and then vg blue 500 so it occupies the full screen and with the background of the same blue so it has the same background you see that rest of the content is gone that means it's occupying the full height here now oh the reason i'm so sorry each one has to be a list item how did i miss that which is why they're not appearing one below the other yeah so yeah this is what it is now we just need to make it text white and add some vertical spacing so let's do that here text white and then to add a vertical spacing between the list items we can use the space y utilities ah what's wrong space y 4 yeah that looks fine let's add some padding also which is maybe an overall padding of four yeah so that looks quite fine now when you click on the hamburger menu i can this needs to slide in from right to left otherwise it should go back so for that first let's hide it by translating it to the right 100 so what we do is let's add our transform class and then translate x full right so it's actually hiding here right now maybe we could inspect element and see that uh no that's not visible but yes it is there on the complete right the moment you make translate x 0 it appears right so we'll add that functionality with alpine js in a little while first let's complete the entire appearance so that's about the mobile layout now after a screen width of md we can add the entire menu right here so what we do is this button we can hide it after uh you know md breakpoint so after md this button could be hidden so that's hiding and this entire list needs to be visible so at md it's no more fixed make it a relative and then at md you also make it flex so all of these can appear one next to the other and at md point remove the min height screen so min height zero and then what else you need to do remove the space y4 so make it space y 0 instead add space x maybe 6 and also remove the padding let's see what that gives us right so it's still translating to the uh right which is why we're not able to see it so also at md break point translate x 0 yeah so that's what we needed and that's what we have right so we have the entire look of the menu all right now we need the entire menu also the entire header to have a background blue we have missed that let's go back to header and add a bg blue 500 so that way when you scroll you see this is how huge the menu is we'll make sure that it shrinks now just in a minute like i said the functionality of making it shrink and the functionality of clicking this uh icon and making the menu slide is done using alpine js so let's quickly go to the alpine js.dev website and grab the cdn link you can install it using npm also but this is quicker so i'm doing this it's very light also so you can add the alpine gs or cdn link here and now for all of this to work the first thing we need is x data right so the this is like the state of the current variables you can call it so initially we have the navbar navbar open is 4. so we don't have we don't want the navbar to be open the moment we open the web page so navbar open can be false and on click of the hamburger menu let's change the navbar value so let's toggle the navbar value for that let's use the act click feature navbar open equals toggle that is not of nav bar open so that toggles it whenever you click on the hamburger menu icon it opens or closes now for this to actually work you need to hide you need to translate like i showed you need to translate it sorry translate x 0 when the nav bar is open and translate x full when the number is closed so that let's do here by adding a conditional class right so it's done you by adding a colon class and then within this yeah within these flower braces i don't know they're called curly braces maybe let's add class translate x full when nav bar open when navbar open is false so that is when nav bar is not open and then let's add a translate x 0 when nav bar is open i hope this works let's see so let's refresh once initially the menu is not open let's click on this yes it shows up click on it again it closes but we don't see any animation let's add that immediately for that let's add a transition class and then a duration class so maybe we can give it duration 200 milliseconds okay now click on the hamburger icon yes you see it's sliding and then you see it sliding back great so has this affected any of our uh desktop styles no everything is perfect great so one thing pending right now is to make this shrink so if you noticed when you make this shrink the thing we are doing is we are reducing the height on scroll and also we're reducing the height of this image when it scrolls now for that on the body element we need to detect the scroll so in alpine js let's see what we have we have these events so when you come to events you see that there is a click event key up event and so on so when you look at this listening for events on window you need to add a dot window so let's add a scroll dot window and to just check that if it's working let's just do a console.log console.log what's happening yeah scrolling okay and let's check the console yeah so it's crawling you see this number is increasing right so it's working let's close this up and now let's change it so what we need to do is we need to check while the webpage is scrolling if the scroll offset from top is more than a particular value then we shrink the navbar to check that we have this variable which is window dot page y offset which shows us the offset from top when scroll when scrolling so let's console.login cross check if this again works right so let me open it yes so 161 yeah yeah so this is working right so let's make it 0 close this and check now if window dot page offset is beyond something like let's say greater than 60 let's have a variable set something like scroll from top equals true else scroll from top equals false now obviously we need to initialize this right here so scroll from top initially equals false okay not equals yeah false right so this is said now when the scroll from drop is true we need the header to shrink again let's make use of the conditional class here that's what i call it i don't know maybe you could call it x bind class so you're actually binding the class with the variable and here let's add a h 24 which is what it is when scrolled from top is actually false that is when it's not scrolled from top and then maybe h 12 when it's actually scrolled from top let's see how this goes so i'm scrolling yeah so you see that the navbar is shrinking there's no animation once again we'll add that but let's also reduce the height of this image using the same class conditional class thing so here with image so it is h 10 if it's not scrolled from top it's h8 if it's scroll from top so yeah you see the image is also reducing in height grid now comes the transition so we just need to add a transition call and a duration of 200 milliseconds the reason we need transition all is because otherwise the height transition doesn't happen the same thing needs to be added for the image also let's see yeah great this is working so you go back up yes so you see there's a smooth transition happening now there is just one problem that is let's say you have already scrolled somewhere here and then uh you like refresh the page you notice that the scroll position has changed but the navbar is not shrunk this is because initially you remember we have set this value to false that's why it's not detecting it so when you reload the web page that is you can do that with x in it when you reload the web page check this once again so if the page offset is greater than 60 set it to true otherwise set it to false so the same statement we are running it here when it initializes once right so yeah so you see this is working make it responsive that is on mobile layout is it working yes here also this is working almost everything is done except for one small thing we might have missed that is when the menu is open here you see the scroll bar still appears we do not want to see the scroll bar because the page behind is anyway not visible that's why when the nav is open we can set the overflow scroll of body to none or zero sorry i forgot what that is but i know the taylorman class for that so for the body we have the same conditional class thing and here say overflow hidden at the class overflow hidden when i'm sorry yeah at the class overflow hidden when the navbar is open so nav bar open is true and then add overflow auto when the nav bar is now our open is false that is when nav bar is closed let's see click on the menu yeah you see there is no scroll bar appearing here try scrolling doesn't happen once it's closed the scroll bar is back up right so this completes the entire video it's a very quick thing but it does take some time to make this happen with all of these classes and functionality so i have this whole thing ready on codepen for you to modify and use it the way you want in your projects if you loved it do share it with all your people and if you haven't subscribed subscribe to this channel for more such simple tips and tricks and tutorials thank you for watching hit the like and share this video ahead if you enjoyed watching this don't forget to subscribe below and turn on the notifications so you won't miss a single video from thyris

Channel: Thirus

Views: 34,047

Keywords: sticky navbar, responsive sticky navigation, sticky navbar shrink on scroll, navbar shrink on scroll, responsive navigation tailwind css, responsive navigation tailwind css alpine js, alpine js navbar, alpine js examples, alpine js tutorials, tailwind css examples, tailwind css tutorials, tailwind css and alpine js

Id: vafc43cIUz8

Length: 21min 39sec (1299 seconds)

Published: Wed Sep 22 2021