Change the Default Nav Styles
Daniel Walter Scott
Lessons
How This Class is Structured
01:41 2What to Download
02:57 3Creating Our First Webpage
05:55 4What is HTML5 & CSS3
08:24 5Head vs. Body vs. Html Tag
09:01 6Title & Description
05:54What Code Editor Should I Use
02:42 8Using Diy Tags
06:26 9What is a CSS Class
09:05 10How to Create Nested Divs
05:03 11Class Project
05:24 12External CSS
09:07 13Creating Our Index Style Pages
12:16 14Testing Your Website
08:47 15Check Your Code For Errors
11:01 16What are HTML5 Structure Tags
05:47 17Add HTML5 structure elements
16:02 18How to Set the Color of the Background
05:10 19Adding Images to a Website
04:38 20How to Center an Image
01:14 21Change the Font Size & Color
14:11 22Make a Clickable Link
08:45 23Stretching Background Image
05:38 24Making a Div Tag Transparent
02:36 25Simple Website Text Navigation
06:43 26CSS Compound Classes
07:02 27Class Project 02
02:05 28Class Project 02 - COMPLETE
04:48 29Add an Email Button to a Website
03:49 30Add Google Maps to Your Website
11:25 31Making a Website Live
16:50 32Uploading via SFTP
11:50 33Setting Up Our New Project
03:46 34CSS Reset
15:22 35Min-height vs. Height
07:01 36Div Tags Onto One Line
05:23 37Getting div tags onto one line using Flexbox in HTML & CSS
05:23 38Evenly Spaced Div Tags
04:42 39Two Div Tags of Different Sizes
07:13 40Vertically Center Content
07:20 41Class Project 3
02:51 42Class Project 3 - COMPLETE
05:39 43Change Default Fonts
04:19 44Installing Google Fonts
12:44 45What are PX & EM & REM
14:56 46Change Line Height
04:33 47SVG vs. JPG vs. PNG
07:04 48How to Create a SVG, JPG, or PNG
11:00 49Block Images vs. Background Images
08:32 50Finishing Up Our Cards
09:10 51Icons via Font Awesome
16:31 52Making a Div Container Clickable
09:55 53Box-sizing & Border-box
06:19 54How to Make A Colored Button
07:46 55Why Can't I Add Margin or Paddding
11:08 56Rounded Corners
04:17 57Drop Shadows
06:24 58Backup Your Website
05:00 59Reusing a Button Class
03:10 60Class Project 04
02:58 61Class Project 04 -COMPLETE
05:45 62Adding a Horizontal Rule
03:51 63Make Divs Wrap Onto Separate Lines
12:14 64Hover Color & Animating a Button
03:33 65Pseudo Classes
09:31 66Simple Dropdown Navigation
20:04 67Adding Our Dropdown to the Website
14:50 68Useful Shortcuts and Tips in VS Code
13:28 69Large Background Image
09:24 70How to Connect 2 Pages
10:42 71Simple PHP Form Work
17:49 72Placeholder Form Text
05:46 73Multi Line Form Text Box
02:18 74Form Check Marks
03:04 75Form Radio Button
06:07 76Form Drop Down Menu
05:48 77How to Style Your Form
12:55 78What does responsive website design mean
04:17 79How to change a website layout size color when at different sizes using media queries
11:28 80How to test your website on a tablet or mobile phone from Visual Studio Code
06:00 81How to change the layout of a responsive website for mobile vs desktop
16:02 82How to turn things on and off for mobile tablet & desktop responsive websites
06:03 83What is pixel density responsive images pixel ratio dp px in webdesign
14:47 84How to export responsive images for website from XD Photoshop Illustrator
05:11 85How to add responsive images to website using 100% width in HTML & CSS
06:08 86How to use srcset to change images in HTML for responsive website
10:15 87How to add a css style to the first line of a p tag on a website (
11:18 88How to make the header footer full width but the inside centered
05:36 89Class Project 05 – Header design
03:12 90Class Project 05 – Header design COMPLETE
06:25 91How to use a span tag or span class in HTML to change text
10:32 92How to pin the navigation to the top of a website fixed nav
03:17 93How to make a simple responsive mobile menu using CSS only
08:21 94What is Javascript vs Jquery in website web design
06:35 95How to make a burger menu 3 line mobile navigation for a website
15:11 96How to switch a menu nav from desktop to mobile phone
21:45 97Overview of what Bootstrap 4 is in website design
07:57 98How to install Bootstrap 4 on a website using Visual Studio Code
06:27 99Quick overview of how the Bootstrap Grid Layout works in VS Code
10:49 100Quick overview of how Bootstrap Components works in VS Code
09:23 101Quick overview of how Bootstrap CSS Styles works in VS Code
08:20 102How to customize the default Bootstrap 4 css styles
13:51 103How to use Bootstrap Layout Grid Experiment 1
10:20 104How to make 100% header & uneven widths in Bootstrap 4
07:16 105How to create uneven col widths in Bootstrap 4
07:27 106How to add padding & margins using Bootstrap 4 in VS Code
12:03 107How to change layout of Bootstrap depending on mobile or desktop
15:46 108How to turn things on & off on your website using Bootstrap 4
05:30 109Google Chrome Inspect
12:40 110Add Shadows to Text & Boxes
07:06 111Change the Default Buttons
06:16 112Responsive Images in Bootstrap 4
09:34 113How to Center Text & Div Tags
04:16 114Customize the Bootstrap Navbar
07:29 115Add Your Own Logo
03:58 116Change the Default Nav Styles
12:12 117Fix the Navigation to the Top
04:41 118Col Images & Col Background
07:56 119Bootstrap Border & Rounded Corners
04:20 120Bootstrap 4 Carousels
05:13 121Card Groups
03:29 122Drop Shadows On Bootstrap Cards
02:25 123Clickable Boxes in Bootstrap 4
04:02 124Final Quiz
Lesson Info
Change the Default Nav Styles
Hi there in this video, we're going to go from menu that looks like this to like this, it's gonna match our mock up nicely. We're gonna go through our homework when we remove the background color as well. Are you ready? I'm ready. Let's do it. Alright, before we get started we are going to work out what happened to the background. How do we get rid of it? How did you do it? Okay. As long as it's gone, that's all that really matters. I'm going to show you the way that I did it. Okay? So now I'm going to right click it, go to inspect and have a little look okay over here. Okay, remember using my little kind of select element. Okay. I can click on what I think is the whole nav which feels like this thing. Okay. And you can see there is something here called background light. Okay. Giving it its background color. Okay. And I can turn it on and off. That's just a trick. Okay, Once you get used to using the google chrome tools that can be really handy just to figure stuff out. And what does ...
it say? It's not very good at telling me where it is. It's referencing the S. C. S. S. File. Okay. Which is not what we're kind of using, we're just using standard CSS but I should be able to just search for that. Okay, so be the light. Let's have a little look. So clicking in here. I can go to edit, find, find and tripe in B. G light. Okay. And there's two occasions of it there and they're not sure which one it is. Now you could go into the documentation and figure out if there's like an alpha zero version of it. Okay. Which is not okay. Or maybe create a class, grab BG light, copy it over here right out of class. It says the alpha is zero for be G light but that doesn't really work either. Okay, the easiest way, it's quite simple getting into Elite BG light off this top one. Do I need to delete the second one? Let's check it out. Okay. Okay, so there you go. Oh I do because there's a white background behind this logo here. Okay, so both B G lights need to go, There is a B G dark just so you can show you there's a primary and all sorts of other colors that you can use but no transparent. Just get rid of it. Nice work. Now if you've got some other way of doing it, I love you to share in the comments just to figure out this is so like, hey, I did it this other way and it worked just so there's other people if they find that way. Okay, different way. You can kind of compare notes plus. So I can see you might find a better way than doing it than me. Now. The next thing I want to do is customize these buttons. Right? So I want to keep some of them like my mock up here says I got a drop down menu. Okay let's have a little look zoom right in too far. Okay so you can see I've got a drop down menu and just a simple button. So I'm going to get rid of everything except for drop down and maybe this one here we won't keep disabled will keep the regular link and this drop down one. Maybe these two because they match colors. So let's go and find them in the code. Okay, I'm going to make this a bit bigger now and we are going to say where are we? The first one I don't want so let's separate everything else. So that's my brand. That's my first this is the toggle button. Okay this is the like dropdown menu. Okay. When it gets to mobile so we don't wanna get rid of him and all the rest of this is the navigation. So this one here we're looking for. So there's a list list items. Okay. And all these allies are the buttons. Okay So that is a button, Ally, that is a button. That is a really big button. Okay. The Ally starts there and you can see it kind of finishes all the way down here and that's a drop down menu. You want to keep him and the one just in front of it. Let's get rid of this first one so that Ally we've got that I'll I will keep and that Ally will get rid of it is just showing you for instances and we just want the ones that are just regular old buttons not activated ones or hidden or disabled ones. Hopefully now it's still working. Dropdowns kind of work down here. It's the wrong colors, navigation is doing weird stuff over here. Okay, we'll fix that but it's kind of working. Okay. Alright, next part, I'm going to close down my search and I want to have seen, I've noticed I've used the kind of same style as on this one as on this one. Okay, so I'm going to go and steal that style and apply it to it. Okay. So I've made a class earlier on called, what was it called? Button outline light. Okay. That was the thing that we used for the making it wider on the outside. Let's go and find it and reuse it. So it was in the jumbotron, it was this a class button here and we added this thing. Okay. I know if I grab just this part of the style. Okay. Often it doesn't work. It needs to be called button and the kind of style that goes around case I'm gonna copy it and let's go and have a little look because the button part of that class gives it, it's kind of fullness and it's click ability and this is just the line around the outside. So let's grab it, let's find our drop down button now. Where does it go? Okay there's A U. L. Which is all the navigation, there's these list items. Okay like little parts to it and where does it go? It's either going to go on the ally or the a tag one or the other and put it in here and see how it goes there. Check it out. Worked. Perfect. Okay so it's that one and let's do it to the other Ally this one here but in light nice. I got to change the text in these and they're actually the wrong way around. So I want the Ally for the dropdown menu all of that. I want it above this and I might separate them out just because it gets a little confusing. It might just be me. I need these visual gaps. Cool, so drop down first and then this other one and the two words are flavors and contact. Okay so in here we're going to change it from drop down. That's the word cave two flavors. Okay and where is this one? Contact And in the drop down menu. Okay, these are the options for the drop down. So we're gonna help put in different flavors. So there is a ham flavor, gross, there is a beef flavor, you get the idea right, That's interesting. So this divider class let's have a little look at the drop down. Do we need the divider? Okay see this thing here, you might have like a, you can obviously see the use of the divider right? Kind of like segregates these guys to maybe this one here is I don't know other. Okay so I'm going to get rid of this divider. Drop down. It's cool though. Okay and just have these, we're going to have chicken. Alright we're gonna have one more meat. I was trying to think of one their chicken. What are the other meat groups? Oh we do fish I think could be the worst one. Old fish flavor. Alright so let's have a look at the menu. Oh looking good. Okay so a couple of things I want to do is I want to make the text white and put some gaps in between them. Okay so making the text white um weirdly before it was just fine being white. Remember over here you're like well why didn't that go white? It's because the navigation is trying to do lots of other things to it at the same time. So let's click on this Actually let's click the inspect element on the far left here and let's hover above this. Let's try and get the you don't wanna click on the I do want to click on the text on the inside, okay because I want to figure out what's maybe controlling him. Okay so what is controlling him? Nothing here in the C. S. S. Something called knave bar light. I'm just looking for like keywords like because everybody now is probably not going to do it and everybody light seems pretty good. Cool. So let's go and try and turn off now by light nerf bar. Where is he at the top man? Never by light. Let's try it dark and that kind of works right? And you're like I can live with that. And the other cool thing about never bar dark is that it changes not enough right? It's too light still. There's no never white which is would be really helpful. Just give me never black and white. Okay. Not this kind of half in between. You can see when it goes blue. It says I can't find this crazy class that you're making. Okay, so we're going to use Never bar. We'll put in dark and we'll adjust that a little bit so we want to adjust the text on the inside. The outside seems fine. Okay, so is it working now? Bad duck? There? It is. Okay, so we're gonna make the text white and how do we do that? We need to add we did this earlier on. Remember we found a text white option? I can't remember what we used it for but let's go through and apply it. So there's my Ally for the drop down menu. Let's try sticking it in here like we did before and let's go to text inside of this Ally is going to be white. Let's give it a go check it out. It didn't work. So that exact same class there is. Sometimes you just like that doesn't make sense. You're trying a different class. You're like okay, what's it on the tag in this case? That's exactly what it wanted to do. The same thing for this other list item. Okay, this one here and the tag, I'm going to say there's a class applied so it's going to text white. Nice. The next thing is probably adding some padding between these two and or margin between them and maybe making them the same size. Okay, so margin easy enough to look at our code and let's have a look for the are you getting the same as me? Like man that's looking then everybody's so big because I didn't build it comes like gets invisible. So maybe this might be a really good chance to go actually this because I work it out eventually. Right? But I'm going to add some commenting, remember, command forward slash or control forward slash on a pc. Okay and let's put in a button, I'm gonna put in button, drop down, drop down. And here I'm going to put in button this one's button normal. Is that helpful? Oh it's helpful for me. Okay, so what we want to do is let's add, where do we add it? Maybe to this list item. Let's try that. Let's go margin. Right. Emma And we'll do four. Let's have a look. It did not work margin right? For feel like I should did wow refresh. Okay. Normally don't have to refresh because that V is code, but don't be afraid to click the refresh button. Work for me just then. Alright, so we've got our drop down. You'll notice that I had this up like this because that thing is there is driving me mad. I don't know why what I'm teaching and that keeps going very distracting. Alright, so climbed there. I want to make them the same width. Okay, so we're just going to force in a width. We'll try it on here for the L I will say you Ally are not in this class. Okay, we're going to use a style. Okay. And style is going to be a width and you're like, why are you doing this over here dan? And you're like, that is totally true. I should just create a style over here. That is the width but I guess I want to get you used to it over here as well because bootstrap seems to like putting a lot of the styles in line or actually on the actual graphic itself, it doesn't really matter. And so there's width of maybe 200 pixels. Let's have a look. Maybe a bit too much 1 15. That works good for me. It's still too big. Let's go 1 10. 120 stuff. I should organize before I start recording. Right, come on Dan. All right, we'll do the same thing for this button down here, grab it all. And where is our second button? Ah Look handy comment. Here we go style. Now they're the same width. Alright, so it's looking good. Gets down to mobile. Okay? You got a drop down menu. It's appearing on the wrong side. We'll work out that in the next video and we'll also get our headache to be sticky. But that's it for the moment. Let's get on to the next video.
Class Materials
Ratings and Reviews
Viwosoft Technologies
Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!
Student Work
Related Classes
Branding