Hi guys and welcome to another bootstrap for web design video. this is Jamie from https://www.system22.net/ and https://web-design-and-tech-tips.com/ – Well in our last video we answered some of these questions about how to make a transparent background for your navbar here, but, I wanted to point out the problem that you may have when you’re scrolling up, you can see I’ll lose that when it goes over something white, or the writing goes behind, it’s going to make it kind of real difficult to read. As you can see it’s still actually there, but you know it’s not really what you want because you can’t see it. So, to alleviate that problem I find a good idea is to put a gradient behind the navbar that starts off at a dark color, maybe you can get the color of your image and then go to a transparent color. I’m just going to use black for this demonstration.
What I’m going to do is, at the moment we’ve got a transparent background going on here. Let’s just change that to black, I’ve got to put the important class behind it to actually make it work, as we said in the last video! Now let’s take this black, I’m going to take the opacity down. Just to show you, we’ve now got a black bar up there, let’s take this opacity all the way down and just copy that number there. Now what we want to do, we want to go back to our CSS.
Let’s go back to our brackets software. Here’s our background, you see background rather than background color, and here I’m going to write linear-gradient, and open some round brackets. Inside there we want to put the two colors that we’ve got. A linear just means it’s going in a straight line, you can have diagonal, you can have circular ones. Linear just means it’s going in a straight line, whether it’s top to bottom, or left to right, by default its top to bottom I believe. I hope, because if it’s not this isn’t going to work!
Let’s put our first color, black, which is zero zero zero, and then you just put a comma in and put in your second color. Let’s put a little semicolon in after that and use !important with that to make it work, and a semicolon. Save that ‘ctrl s’. Back to the site and refresh. There we go, and as you can see we’ve now got a gradient. Starts off dark at the top, and it’s transparent at the bottom. You can still see your image through it, which is what you want.
To my mind there’s a bit too much of the writing seeping through there, I’d like to, I mean that might be fine for you, but you can adjust this, the percentages of the transparent and the black and to do that, if we go back to our CSS, just after your color there. Let’s say, I’m guessing, 30%, save that, back to the site, refresh, scroll down to where we can actually see it. It sort of made it a little bit darker, and like with most things, let’s just use our chrome inspector.
I’m using Google Chrome. i just right-clicked and hit inspect, and here’s the actual bit that we wanted, background dark, where we put that code there. Let’s highlight that 30%, just the 30 itself, not the percent, then you can scroll up and down with your mouse wheel. As I scroll up and down, you see that it’s getting more as I go up, and gets less as I go down, so you can just put it where you actually want to.
Let’s scroll out, I want it to be very visible or very easy to read. Yeah okay! That’s pretty good! now you can still see an image behind it, but when you scroll down you still see a little bit of writing going through it, which is fine, but these are really obvious, so, I sort of achieved that purpose, but like I said, put your percentage in and get it how you want it. So there you have it. That’s how to put a semitransparent gradient behind the navbar of your bootstrap website, and, of course that CSS will work in any HTML site or bootstrap site, or a WordPress site. Obviously you may need to create a child theme if you’re using WordPress.
So I hope that’s been useful to you if it has please like and subscribe to the channel. If you’re interested in web development take one of our web development courses below the video. We’ve got some huge discounts for our YouTube subscribers. There’s also some great free courses down there, so have a look!
