How to Create a Responsive Full Page Header with Navigation - HTML, CSS & JavaScript Tutorial

hey guys how you going my name is dom and in today's video we're going to be creating a full page header using html css and optionally a tiny bit of javascript in order to add some finishing touches okay so this right here is going to be the finished product so as we can see it's a fairly simplistic looking full page header we've got the navigation bar in the top right corner and we've also got here a call to action element which allows your users or which allows you uh to inform your users of some sort of action which um you would like them to take for example uh signing up to a website or you know doing products and things like that so all of this stuff here is really easy to achieve now it's also going to be responsive as well as mobile friendly so for example if i was to go to mobile view we can see here on the mobile view we've got obviously if i just zoom out here a tiny bit and we can see here we have of course the the hamburger menu which is going to replace the regular navigation menu right here and it's all working uh you know quite nicely now one more one more thing before we get into the code and we can see here also that we have of course uh the background change in color as we scroll down and that is just going to ensure that of course the header or the bar should i say is going to remain on top so let's go inside this tab right here and begin from scratch to of course create what we just saw now inside the index.html we have this right here it's a fairly simplistic html file i've got only this linked main.css file which of course is currently empty now i've also included the google material icons library so be sure to head over to the google material icons website i'll be leaving a link to this in the description below for you to visit and you can just simply copy and paste this link right here into the html head of your file just like this so now we are ready to go so we're going to be working on each section and then working on essentially the html then the css for each section okay so for example or let's actually let's begin with the header okay so right inside here we can make a new header element okay with a class of header okay now inside here we can create a new class or a new div and give this a class of u dash centered so this one right here u centered is going to be just a utility class which allows us to center some content okay we're going to be seeing what this is a bit in a bit more detail very shortly but also inside the header is going to be the call to action so essentially this header right here is going to be the entire green part which we just saw so this entire thing is going to be the header in this case so let's include this call to action element right here so back inside here we can make a new div with a class of call to action okay and then within inside here we can then create a few more elements we can say h1 with a class of call to action underscore underscore title so once again on my channel using the block element modifier css naming convention we can put inside here sign up okay now we can have a new element for the call to action underscore underscore description inside here i'm just going to copy and paste what i wrote in the previous example so i'll just copy and paste all of this stuff right here just some blurb or some content for signing up and lastly we can create a button with a type of button right inside here and a class of call to action then underscore underscore button okay inside here now we can simply just say something like sign me up so now i'm saving all of this right here and refreshing the page we have something like this okay so now let's work on making the header of course a full width and height adding the adding the background adding the call to action and all of that stuff so inside the css file we can begin by first targeting the route right here and inside here we're just going to simply define a few css variables so we're going to say right here bar dash height is equal to 72 px so in this case right here the bar height refers to the height of the bar at the top of the page containing the logo and of course the navigation menu okay we're going to set that right there we're going to also set a color for the primary so a primary color in this case right here using the decode green color and also the same thing but this time using a lighter version of that of that primary color so in my case right here i'm going to say 0 8 ffd2 okay so of course you can customize this make this whatever color you want it's totally up to you okay now also we're going to be we're going to be targeting the body right here we're going to give a margin of zero we're also going to give a font family of your base font family for example let's just use quicksand in my case okay let's just now save this and we can also now target the header class right here so for the header we're going to be setting a height of 100 vh meaning 100 percent of the viewport heights okay we're going to be setting a background of linear gradient we're going to be saying to bottom right then we're going to be taking advantage of our css variables defined above so we're going to say from the primary color to the color primary light okay and that will give us our nice gradient you know as the background okay you can optionally replace this right here with an image instead okay we are going to be using a display of flex and align items of the center so these two right here are going to ensure that the actual call to action element right here is going to be in the middle of the of the entire header okay we're going to see this very shortly but back inside here we're going to be also setting the padding top to be bar then inserting here the bar height so right here by having this padding at the top uh we're essentially just we're providing space for the actual bar to exist outside of the header if that makes sense okay we can also say box sizing of of border box and this right here is going to ensure that the padding does not blow out the actual height of the header so now saving this and refreshing we have something like this okay so we can see right here that of course the header is taking up the entire width and height of the page we have that padding right there also in the green right there which of course is going to allow the the bar to have some space to exist okay now also quite importantly we can see the call to action has of course been placed in the center okay so now let's work on creating or styling up this centered this utility centered class right here okay so inside the css let's target the u um dash centered class we're going to be saying here a width of 100 percent and also a max width of 1200 px so essentially this is just saying we want the width to be the absolute most it can be but let's not make it go over 1200 px and that right there is going to allow it to be responsive as we go down to smaller devices we're going to be setting the margin to be 0 then auto to allow it to be horizontally centered as well as a padding of 16 pixels okay um a border box sorry a border sizing of sorry a box size sizing my mistake so um a box sizing of a border box is going to ensure we don't let this padding blow out the width of the actual container so now saving this and refreshing we have something like this as we just saw the sign up moves a bit more to the right so if i zoom out now we can see right there if i can just access the tools here we can see right here the u centered is right there so if i just continue zooming out we can see right there it is being centered as we can see by that okay so let's move on now to styling up the call to action so for this one let's go back inside here we can target the the call to action container right here we're going to say a maximum width of 400 px okay as well as a padding of 32 px okay we can say box sizing border box once again as well as a color of white okay something like that we can also say backgrounds and we can set the background to be rgba zero oh zero zero zero then zero point one so basically just a ten percent opaque black and also a border radius of let's just do once again sixteen px so now saving this and refreshing we have right here this container so i'll just zoom in a bit more something like that and there we go okay so let's focus on styling up the title the description and also the button so back inside here we can target the call to action title we can just say margin top and make this zero as far as the description goes for this one we can just say font weight let's make this 500 and also a font size of 1.1 am okay so right here in order for this to work properly you need a font with support for 500 weight if you need that you can just simply head over to fonts.google.com on this page right here you can simply choose a font for example roboto and then once you're inside here you can make sure you choose the 500 weight right here you can select this style as well as a bold for example and a regular then from here you can simply go into the embed section copy and paste this link right here into the head of your element so your html head tag and then of course the font is going to be available for you to use okay so that is if you need this 500 font weight right here if not you can just make this normal and leave that property out okay moving on to the call to action button so for this one we can simply set a background to be white okay we can say outline let's make this none let's give a font of 700 so basically let's just do bold so so we're going to say bold 1.1 em once again and then quicksand then sans serif of course here just place your own font okay we can say color and make the color just uh the same as your primary color right there we can also say border make this 1px solid and then white okay we can then say a border radius you can make this something like 4px okay and some padding so let's just do 10px top and bottom and 16px left and right a cursor of pointer and a nice transition on the background just to finish it off so we can say transition make this background at 0.15 seconds and also a color of 0.15 seconds so now in order for this transition to work we can simply once again target the call to action button this time targeting the on hover and when you hover over the button we can simply just say background and make this transparent and also a color of white now i might actually just uh let's just put this transparent right here as the color of the text and that is just going to ensure that we're a bit more consistent okay so now saving this and refreshing we have this right here so unfortunately that didn't work too well let's just go back and put this back to our primary color right there and let's try it again so saving this and refreshing we have this right here so of course we have the button we have the styled uh text and hovering over the button gives us this nice transparent effect okay so that is basically all we need to do when it comes to the call to action and also the header itself so we can now move on to styling up the actual bar at the top of the page okay so for this one we need to write some html so let's go back inside here in the html file and we can begin by creating a new div right down here with a class of bar okay now within here we can also create a new div with a class of bar underscore underscore content and also a class of u dash centered sorry centered once again uh taking advantage of our utility class to center our content okay alongside this we're going to include the the decode logo so if i just go inside here and i say image then i can just say source so for the image source i'm just going to copy and paste what i put for this one right here so i'll copy this image address and then paste it inside here of course you can put your own logo inside here okay we can specify some alternate text just like that and also let's give this a class of bar underscore underscore logo so i might just stop here and save this and refresh to see what we actually have going on so refreshing gives us this right here as we can see we have the whole space down here filled up because of course the logo is actually quite large so let's move the logo and the bar to the top of the page right there so back inside here we can begin to style up the bar so inside the css let's target the bar and we're going to be saying right here firstly a position of fixed okay this will ensure of course that the actual bar remains at the top of the page we can say z and x set this to be one to ensure that of course the bar is going to always be on top okay just like that then we can say a top of zero and our left of zero for the top left corner then we can say width at one hundred percent and a height of then using our bar height variable right there okay we can also specify a box shadow and we can make this just simply 0 0 10 px rgba 0 0 0 then 0.15 for for a very subtle box shadow okay so now i might just save this and refresh and now we can see we have this right here so of course you can see right here we have the actual bar it's currently got a transparent background but of course you can see right there that is the the bottom of the bar okay so now it's going to be all about just positioning the actual logo and a few more things okay so let's go back inside here um the very last thing to do for the bar is also just going to be having a transition right here okay this will be for the background at 0.15 seconds and also alongside that we can make a modifier class for the bar we're going to say bar dash dash bg short for background okay and for this one we can just say background and make this our primary color we're going to be seeing this in a bit more detail a bit later on but essentially this will be the class which gets applied to the bar as you scroll down the page so in the actual example right here we can see upon scrolling down it gets the background so that is basically what that class is for it's for ensuring the um the bar has that background right there upon scrolling down but we're going to be seeing that in a bit more detail later on okay now let's move on to styling up the bar underscore underscore content okay so for the actual content itself let's give this a height of 100 percent to ensure that it takes up the full height of the actual container in this case being the bar itself we can also say display of flex a justify content of space between so the reason for this space between is because we want space between the logo and the navigation bar okay we can also say a line item set this to be center to ensure that our items are going to be vertically centered so now saving this and refreshing we don't see too much of a change but we can see right there the actual logo is being vertically centered in terms of the bar content okay cool so now moving on let's uh let's ensure this logo actually looks decent okay so let's go back inside here we're going to be targeting the bar underscore underscore logo class and for this one we can simply just say height at 100 percent so now saving this and refreshing we get this right here okay now we can also see upon zooming out so for example if this was a quite a large screen we can see right there we get the maximum width of 1200 px coming into play on this you centered class right there okay so let's move on now to styling up the actual hamburger menu okay so basically i'm referring to this one right here so we're going to be designing this to be mobile first okay so we can now include this hamburger menu so let's go back inside this page inside the html and for this one we can simply go inside here and we can place a new a new input field right here okay so a new input field right here with a type of checkbox okay so we're going to be going for a css only solution when it comes to this navigation bar okay so right here let's give this an id an id of inp nav toggle so essentially how it's going to work is we're going to be saying when this checkbox right here is checked we're going to display the full screen navigation menu okay quite straightforward and essentially pressing on the actual hamburger menu icon is going to display or sorry it's going to check this box and uncheck it essentially giving it control over how the navigation menu gets displayed okay so we're going to see how that works very shortly but just include this id right here okay so now we can include a label with the four attribute set to inp nav toggle just like that okay and then inside here we can simply include one of our google material icons so we can say i material dash icons then pass through here menu this right here is going to print out or render the google material icon library icon for menu okay so let's just save this i'll stop talking and refresh the page and we can see we get something like this okay so we can see here of course we have the actual checkbox okay we're gonna we're gonna leave this visible just for now okay just to see how it's gonna work and right up here of course we can see we get the icon being rendered right there so now if i was to press on this icon we can see the checkbox gets toggled right there okay so that right there is core or it is key should i say to how the navigation menu is going to work okay so let's go back inside the inside the css and we can target we can just target the actual um the nav toggle class so i did actually i did actually forget to add a class here so let's go back right here we're going to be adding a class to this label we can say nav i'm sorry my mistake bar underscore underscore nav dash toggle okay so for the nav toggle element we're going to be targeting it so let's go back inside here so bar nav toggle we're going to be saying right here a cursor of pointer and also we can then target the actual icon inside of it so let's just do this right here to target the actual icon and for this one we can just say color let's make the color to be white and also a font size of 2em to make it a bit larger so now saving this and refreshing gives us this right here okay so now we can move on to styling up the navigation menu and when i say navigation menu because we're doing this mobile first we need to style up this one right here first okay and then we can move on to the desktop version so let's create this right here very straightforward to do so let's go inside the html and we can create a new just a new nav element inside here with a class of nav okay and then within here we can specify each one of our navigation links so we can say a with an href or a hash just for now okay of course replace this with your actual link okay we can give this a class of nav underscore underscore link inside here i can just say for example tutorials and then copy this let's just do four more times okay we can say courses then we can say online tutoring for example and we can also say right here work with me okay cool so now of course saving this and refreshing gives us this right here okay so let's work on of course putting this this navigation bar in the full screen right down here so to do that let's go inside the css and we're going to be targeting the nav class right here and we can say first off a flex direction of none okay so we're going to be using a display of flex here so let's give this a display of flex actually my mistake this needs to be column so putting column right there and that ensures that of course the links appear stacked on top of one another okay we can also say position and make this fixed that way it is always on top we can give a top right here of var then passing through bar height this ensures that the actual navigation menu appears right under the navigation bar if that makes sense so of course right here in the example we have this space right here okay and that is due to the top property being set to the height of the actual bar okay so back inside here we can also say a left of zero and a width of 100 percent right there let's give a height of also you know what no it needs to be it needs to be calc then 100 v h okay then subtracting the bar height so basically we're just grabbing the height of the actual page or the actual visible area then we're subtracting the height of the actual bar then we can say padding set this to be 32px for example let's do a dark gray background so right here triple two and also a box sizing of border box so now saving all of this and refreshing gives us something like this okay so now it's just going to be about styling up the actual links themselves so let's go back inside here we can just say nav underscore underscore link then we can say a font weight of 500 a padding of 16px top and bottom and 0 for left and right let's remove the underline by doing text decoration and setting this to be none we can set the actual text color to be white and a border bottom of a slightly um a slightly lighter gray compared to the background right up here so we can just simply say let's just do rgba 255 255 255 then we can say 0.1 so now saving this and refreshing gives us this right here unfortunately we don't have the actual border bottom so let's fix that i was trying to be a bit smart there so um actually that needs to be r g b a so r g b a right there let's try again and we get that right there perfect okay so um now one last thing and that is going to be when you hover over the links themselves so back inside here let's target navlink then colon hover and for this one we can just say opacity and set this to be 0.8 okay then we can just save this right here and refresh and now we get this right here so now it's going to be as simple as just making this navigation menu hidden by default and then we're going to be displaying it whenever the user clicks on the link so on the actual menu button up here so back inside the css let's go to the navigation class and we're going to say display and set this to be none by default okay then we can target the the inp nav toggle so the actual input field itself and we can say colon checked then we can use the general sibling combinator to say dot nav okay so basically it's just saying when the navigation sorry when the input field gets checked we're going to target the sibling nav in this case right here refers to this one okay so of course right here in the html this input is a sibling to this nav therefore it's going to get targeted so now we can simply just say display set this to be flex let's save this and refresh we can see by default it is not being displayed if i press this button it gets displayed right there and of course this checkbox is now checked let's now toggle that off and it's working the exact same way and that is how the navigation bar is going to work at least on mobile okay so let's just also hide this by default so let's go back inside here you can say inp nav toggle let's make this a display of none that way it is then hidden okay just like this so now um this right here is probably good enough okay so maybe on your desktop devices you're perfectly happy with this right here where of course you have an actual hamburger icon for the menu so you might be okay with this but i want to make sure that the desktop users actually have you know a proper navigation bar to work with so of course something something like this okay but also just keep in mind that this right here is still perfectly fine but it's up to you if you want this right here i'm going to show you so let's go inside the css so for the css and we're going to simply use at media and we're going to say screen then we're going to say and min width and set this to be 767 px okay so basically this is just saying whenever the screen size is over this amount we're going to be applying these styles right here so of course on mobile devices this is not going to be true and these styles inside here are not going to be applied okay so that with that being said let's just simply firstly remove the actual toggle button so we can say bar nav toggle we can set this to be display of none ok so now let's save this and refresh and now we can see that goes away if i slowly drag the browser to be less than 767 pixels we can see it's coming back okay cool so inside here we can also target the actual nav and we're going to simply be resetting a few values for the navigation menu so basically we're going to take it from the actual dark background to be in the top right corner so we're going to say display and make this initial okay then we can say position and make this back to static okay cool then we can say flexed sorry flex direction we can make this row actually you know what that's my mistake let's leave this out just for now because the display of initial is going to work okay it's going to make it a block so that flex property won't actually work so my mistake guys we can also set a width of unsets as well as a um a height of unset and a padding of unset so basically we're just removing or reversing those values set before we can also say background and just make that transparent okay when it comes to the navigation links so we can target the nav link for this one we can just say border bottom and remove that remove that bottom border okay we can also say nav link then say colon not then pass through here last of type so basically for each navigation link that is not the last of their type we can say margin right and say 24px just to add some space between our navigation links so now saving this and refreshing it will give us something like this we've essentially reversed those styles that were set by the defaults okay so now of course right here it is all working perfectly fine if i was to resize the window we can see we go back to the mobile version let's go back out and it's working right there okay so that is how the responsiveness or the mobile friendliness should i say is going to work okay so that right there is probably going to be fine for most of you but if you guys want the extra tiny bit where it's actually going to change the background color we're going to need a bit of javascript in order for that to work so i do want to just add some dummy text right here to our example so let's go back inside here in the html and i'm just going to be copy and pasting some content which i prepared earlier so let's just paste all of this stuff inside here it is just some not so important dummy text okay so now the effect of this is just so we actually have some scrolling going on as we can see right here and we can see right here we have the problem where essentially the bar is transparent so of course you can see the actual core 2 action is being shown through the bar which of course isn't the best looking okay so let's change that so of course your one solution might just be to always set a background color on your bar so for example we can simply add the bar bg class so let's add the bar bg class right here so dash dash b g let's save this and refresh and we can see we now always get that get that background color and that's going to solve our problem right there but let's make this of course only happen when it needs to okay so to achieve that let's go inside the javascript okay right down here but i also just want to remove this class by default it's going to be added through javascript instead so let's just save this go down here and for this we can say document dot add event listener we can listen for the dom contents loaded event so basically as soon as the document is ready to work with we're gonna run this function inside here okay so this function is going to make use of an intersection observer in order to detect whether or not the user has scrolled down so we can say const observer is equal to a new intersection observer right here and this is going to take in a callback so for this i can just say entries okay then pass through here this function okay we're also going to say a threshold of 0.9 so my apologies if this right here doesn't make too much sense i've actually got a whole video dedicated to the intersection observer if you want to check that one out but i'm not going to be going into too much detail you just you just need to know that essentially with with this threshold right here we're just saying as soon as there is 90 percent of the header that is visible we're going to be running this function inside here so i can just demonstrate this for you right now so let's go inside here i'm going to say console log and then just pass through something like decode okay let's just save this actually one more thing to do let's go down here we're going to be saying observer dot observe okay we're going to pass through here now document.queryselector then pass through here the header class right there so basically these properties are going to be applied to the header itself so now as soon as we get 90 visibility of the header this function is going to run so let's save this then refresh we can see here we get the first initial console log that is by default but now if i was to scroll down a bit we can see right there we've got the second console log what if i go back up going back up gives me my third console log so basically as soon as we reach 90 visibility right here we get our console log so now we can simply check if we have you know scroll down or scroll up so to do that we're going to be making use of the entry intersection ratio property so we can just say right here console.log entries at index 1 or index 0 should i say then dot intersection ratio so saving this and refreshing we can see right here when we are actually under the 90 percent or the 0.9 we get 0.88 if i was to scroll up we get 0.9 and of course a bit more so with this being said we can tell now if i was to go under right here less than 0.9 we want the background to show if i go over like this we want it to go back to transparent so with that being said let's go inside here and we're going to be saying right here document.queryselector select the bar and then we can say classlist.toggle then pass through here bar dash dash bg then we can force the existence of that class we can say entries at index 0 using the intersection ratio property we can just say less than 0.9 this right here is going to give us true or false if it's true it's going to set the actual background if it's false of course it is going to unset the bar bg class so now let's save this and refresh and we have our final result right here if i was to scroll down to 90 we get that background if i was to scroll up it goes away so that right there is how to create a full page header using html css and optionally a tiny bit of javascript for this effect right here um thanks for watching guys i'll be leaving the link to the code in the description below if you want to check it out all right thanks for watching and i'll see you guys later

Channel: dcode

Views: 6,137

Rating: 4.9795918 out of 5

Keywords: code, coding, programming, tutorial, introduction, beginner, walkthrough, guide, software, development, simple, easy, english, with, example, examples, developer, lecture, recording, how, to, web dev, web app, website, app, application, html, html5, css, css3, js, javascript, navigation bar, navigation menu, nav menu, icons, user interface, ui, padding, full width, full height, full page, scroll, overlay, heading, title bar

Id: F-yDkTqkAO8

Length: 39min 42sec (2382 seconds)

Published: Mon Sep 07 2020