Bootstrap 4 Gradient Colorful Navigation Bar

hi everyone and welcome to web dev tutorials today I'll show you how to make this navigation bar this colorful navigation bar with a hover effect on the links it's fully responsive as well let's get started first of all create two folders one for the images one for the CSS or they have my logo and then just go to your code editor create create first the index dot HTML then another one for Styles style dot CSS okay just type doc rename it it's going to be a title for your website okay now we need to get the bootstrap CSS as well first of all we're going to link our one which we created CSS style that CSS then we include kustra one we need to include javascript from bootstrap just copy this then we need another one copy this one let's repeat the same safe then we need to get the font awesome CD and as well just include it here and the font that's the font I'm using just save and don't forget to take this as well okay saves now what we're going to take is the example bootstrap example for now our then we're going to add it so I've got different documentation components and then you go to not more just copy one of maybe this one just do inside your body just create plus feather within this we create any bar then you can paste it just remove this one delete this and include your image IMG images look at that PNG remove this safe then we go to font awesome website and search for bars and you just copied this so you're going to replace the hamburger bar which comes as default with a boot shop okay okay now we're going to just rename things remove this save it let's see okay so now we want to move this on the right side so we just need one line here so I'll also save refresh now we need to just style it so many of our background-image:linear-gradient of minus 90 degree I just put the color three eight three one two and the second color eight three two seven line save it then we need to style the links the font size sixteen pixels margin three pixel color will be white don't forget to include important from two eight five hundred save it refresh here we go to style a bit more of work enough still text-align:right the margin right 20 pixels okay now we need to style the toddler heading right 20 pixel outline along with important border none' as well with important say that see okay we have padding now we're going to style the hamburger so now our gotough a color will be white and the font size of twenty six pixels nice so now we're going to style the links on to add the hover effect so let's just go on nothing don't wait 600 or the bottom one pixel select white so that's for the border button we got the effect now we're going to style the logo nutbar brand that IMG just add the width of 150 pixel margin top 5 pixels and margin left 20 pixels save it nice okay so we got so now I'm going to remove just borderline when it comes to here we don't want this effect so you need to add media query media only screen it max with thousand pixels so when it goes below thousand pixels the target you have link and we just remove the border to border button-down important just save it that's right cool it looks amazing thank you guys for watching us and don't forget to subscribe and like the video

Channel: Web Development Tutorials

Views: 24,748

Keywords: bootstrap 4, navigation bar, bootstrap navigation, gradient navigation, colorful navigation bar, gradient navbar, responsive color navigation

Id: LbYKqXBy2hI

Length: 10min 36sec (636 seconds)

Published: Tue Mar 03 2020