Bootstrap 5 Transparent Navbar with Full-Screen Image Background

in this tutorial we'll create a bootstrap 5 transparent navbar with full screen image background okay so I have a simple HTML boilerplate and right now it's completely empty so what we want to build is this so we're going to need an image a background image and we're going to have this nav bar now this nav bar is responsive so here if we go to mobile for example it's gonna have this um well this Toggler thing to make all of this work you do need to make sure that you're linking to both the CSS and the JavaScript portion of bootstrap right because you know once you start clicking on something bootstrap needs to hook into the click event with JavaScript right so there is a part of bootstrap that is about JavaScript so if you go to the documentation for bootstrap they have a website make sure you get the right version by the way because if you if you search for bootstrap docs the first link that I'm getting here is actually for 4.1 which is an older version we're at version 5 now um but their home page is getbootstrap.com and if you go here they actually show you how to include it with these links right so these are always going to be the latest version and here you can also find the navbar component and other components right so this is what I have copied in here now I've copied the script in the head when you do that I use the defer attribute error so that it doesn't block parsing the rest of the page right you can also put it at the end of your body but this is a more modern solution it has more advantages okay so now uh where do we start well let's actually start with the background image so you can find images on unsplash.com this is a website where you can find all sorts of free photos a lot of developers use this so I searched for something like table from Top This is a popular type of view for background images and I found this one alright so I'm gonna Zoom here and I'm going to take the big version I'm going to copy the image address and then I'm gonna go here and I'm just gonna create an image element actually and for the source I'm gonna paste that it's quite a bit now with unsplash they have this quality parameter at the end right so if you have 80 that's 80 you can also make it 100 it's going to be higher quality but it's going to take a little bit longer to download and for all this is important for green readers for search engines and so I'm just gonna I'm just gonna say background image here now we need to style this I'm going to give it a class of BG image and what we have let's see okay so then it's way too big right this is what we have now so I'm gonna select it and first we're gonna work on the size so we want this to be 100 of both the width and the height and these this is called the viewport right so the visible area of the web page is called the viewport it does not include the address bar does not include the scroll bar right so we want the image to be that exact size 100 of both the width and the height of the viewport so we can say the height of this image should be a hundred percent of that viewport height there's a different unit and the width should be 100 of that viewport width right so be careful this is a different one VW that's viewport width right so when you do that it's going to look a little bit better now when you work with the when you change the height and width of an image the image can look a little bit distorted because it may have a different aspect ratio than the height and width that you're setting here so typically it's a good idea to use object fit cover and it will make sure that that aspect ratio is respected and it will cut off part of the image to to achieve that okay okay so this looks similar now here it's a bit darker so here what we're going to do is we're going to say filter we're going to reduce the brightness to 0.6 okay so then let's add the actual nav bar now this is a bit of a complicated component there's lots of different classes so I don't recommend coding that from scratch with these bigger components I think you want to go to documentation again make sure you get the right version so just go to the home page and then go to docs for me it's 5.2 for you it may be a later one but as long as it's probably going to be the same across multiple versions so it doesn't really matter but at least it should be version five um so then you can go to components and then here for nav bar you can just copy one of their examples and then modify it to get it to get exactly what you want so I would just copy this example perhaps maybe have a bit simpler one let's see yeah so here for example this looks a bit simpler so I would just copy this and then I would paste that and as you can see there's a lot lots of things going on here you're not going to remember that right and also there's a lot of you know particularities about the HTML structure you're not going to remember that so that just copy it from the example when you do that the nav bar actually comes after the image right so the image is taking up all this space here which we don't want actually um so we want to take the image out of the normal flow so what you can do is you can use position absolute when you do that it's taken out of the normal flow as it's called basically other elements are going to act as if it doesn't exist right and depending exactly on your setup you may need to be more specific you may need to say that the image needs to sit zero pixels on the top and also zero pixels from the left and also that it should sit below everything else so you may want to put a z index of of negative one it won't change anything for me here but it depends a little bit on your HTML structure and how you you've set things up that this it may be necessary right for me I was lucky this was already working but now we can continue working on navbar so let's see let's get that transparency so here we see that actually has a class of BG light so these BG classes are actually utility classes in bootstrap and if you just remove that you're going to have a transparent background and the text is dark now and we want light attack and so to do that you may say nav bar dark so you this is a theme class for the nav bar it will make the text light actually it actually is maybe a little bit confusing but um that's how this works so if you say navbar dark the text becomes light and also it's sitting quite close to the edge of the viewport here right so we want to restrict the width a little bit so that's because there's container fluid class which holds everything here basically allows the content right now to be very close to the edge so there's not a class called the container class itself which restricts it a little bit more and is also responsive right so it will it will push it restrict it even more as it gets closer to the edge we also want to put this we want to align this stuff on the right side and I'm also going to remove this disabled stuff because we don't want that for now and now I want to align it on the right side so this navbar nav is actually sitting in this element this is actually a flex container what you can do in a Flash container is say margin start Auto right so what we're doing here is we're saying margin start which is actually in booster 5 the new one for margin left at least for most of you because most of you are using a language from left to right but there are also languages that start from right to left right so bootstrap has created an abstraction on top of that so margin start is going to be the replacement for margin left gonna add as much margin to the left side here as possible which will push itself all the way here all right now one last thing which is that if you have more content and you scroll down so I'm just gonna we don't have content here so I'm just gonna give the body a large height so we get a vertical scroll bar right let's say 5000 pixels right so now when I scroll down we get or when we have more content we're gonna have a scroll bar the scroll bar actually takes up a little bit of with here but the width of the image is still 100 of the viewport width right so that will actually give it a vertical scroll bar as well right so to hide that vertical scroll bar you can say anything that overflows horizontally height is right so this is also what you want to add most of the time right so now we can add more content and the image is not going to overflow okay so let's see if uh we have everything that actually looks like we want right I could change the text here to um brand name and I could create more links but this is what we want right that's how you create a transparent nav bar in bootstrap 5. as you can see uh we do need to know quite a bit about how CSS Works to get this image right so it's really important that you and that you have mastered CSS and also JavaScript Itself by the way these are really the underlying fundamentals so you know if you're going to work with bootstrap make sure you have mastered them by the way if this was helpful I'd really appreciate it if you could like And subscribe also check out my courses on CSS and JavaScript if you want to take those skills to an advanced level because in there we will build some beautiful real world projects from scratch so you can see how everything fits together and really Master CSS or JavaScript and I will also release other courses from like react and node.js so if you want to be notified then make sure you are subscribed to the email newsletter you can find the link in the description thanks for watching and I hope to see you soon

Channel: ByteGrad

Views: 22,140

Keywords:

Id: f3P3gcwEaQM

Length: 8min 47sec (527 seconds)

Published: Tue Nov 01 2022