March 28, 2020
Bootstrap 4 Transparent Gradient Navbar

Bootstrap 4 Transparent Gradient Navbar


hi guys and welcome to another bootstrap
for web design video this is jamie from https://www.system22.net/ and http://web-design-and-tech-tips.com/ well in our last video we answer some of these questions about how to
make a transparent background for your navbar here but i wanted to point out
the the problem that you may have when you’re scrolling up you can i’ll lose
that knowing when it goes over something white or the writing goes behind it’s
gonna 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 if you can’t
see it although people can click on it they’re not going to know it’s there 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 if you will and then goes to a transparent color i’m just gonna use
black for this demonstration so 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 gonna take the opacity or opacity just
to show you we’ve now got a black now bar up there let’s take this opacity or
opacity all the way down and just copy that number there just
four zeros now what we want to do we want to go back to our CSS and just
close that out if we go back to our bracket software here’s our background
you see background rather than background color and here I’m gonna
write linear – gradient and open some around 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 it’s top to bottom I believe I hope because if it’s not this isn’t
gonna work and let’s paste in let’s put our first color in which was black which
is zero zero zero and then you just put a comma in and put in your second color
which was zero zero zero zero how when there’s only three us if it’s six of all
the same you only need to put in three let’s put a little semicolon in after
that let’s use important one with that make it work and a semicolon say 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 and 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 give you a space well let’s say I’m guessing 30% save that
ctrl s 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 we want to get the 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 blanks getting more as I go up and gets
less as I go down so you can just put it where you actually want into let’s
scroll out I want it fairly on that 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 you can really obviously get those going so
I sort of achieved that purpose but like I say pretty percentage in and get it
how you want it so there you have it that’s how to put a semi transparent
gradient behind the navbar of your bootstrap foresight and of course that
CSS will work in any HTML site or boot or a wordpress site to 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
we’ve got some huge discounts for our YouTube subscribers there’s also some
great free courses down there so have a look once again this has been Jamie with
system 22 on web designer tech tips comm thanks for watching have a great day

Leave a Reply

Your email address will not be published. Required fields are marked *