Skip to main content

Change the Default Nav Styles

Lesson 116 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

Change the Default Nav Styles

Lesson 116 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

116. Change the Default Nav Styles

Lessons

Class Trailer

Getting Started

1

How This Class is Structured

01:41
2

What to Download

02:57

Introduction to HTML & CSS

3

Creating Our First Webpage

05:55
4

What is HTML5 & CSS3

08:24
5

Head vs. Body vs. Html Tag

09:01
6

Title & Description

05:54
7

What Code Editor Should I Use

02:42
8

Using Diy Tags

06:26
9

What is a CSS Class

09:05
10

How to Create Nested Divs

05:03
11

Class Project

05:24
12

External CSS

09:07
13

Creating Our Index Style Pages

12:16

Project 1: Restaurant Website

14

Testing Your Website

08:47
15

Check Your Code For Errors

11:01
16

What are HTML5 Structure Tags

05:47
17

Add HTML5 structure elements

16:02
18

How to Set the Color of the Background

05:10
19

Adding Images to a Website

04:38
20

How to Center an Image

01:14
21

Change the Font Size & Color

14:11
22

Make a Clickable Link

08:45
23

Stretching Background Image

05:38
24

Making a Div Tag Transparent

02:36
25

Simple Website Text Navigation

06:43
26

CSS Compound Classes

07:02
27

Class Project 02

02:05
28

Class Project 02 - COMPLETE

04:48
29

Add an Email Button to a Website

03:49
30

Add Google Maps to Your Website

11:25
31

Making a Website Live

16:50
32

Uploading via SFTP

11:50
33

Setting Up Our New Project

03:46

Project 2: Bike Repair Website

34

CSS Reset

15:22
35

Min-height vs. Height

07:01
36

Div Tags Onto One Line

05:23
37

Getting div tags onto one line using Flexbox in HTML & CSS

05:23
38

Evenly Spaced Div Tags

04:42
39

Two Div Tags of Different Sizes

07:13
40

Vertically Center Content

07:20
41

Class Project 3

02:51
42

Class Project 3 - COMPLETE

05:39
43

Change Default Fonts

04:19
44

Installing Google Fonts

12:44
45

What are PX & EM & REM

14:56
46

Change Line Height

04:33
47

SVG vs. JPG vs. PNG

07:04
48

How to Create a SVG, JPG, or PNG

11:00
49

Block Images vs. Background Images

08:32
50

Finishing Up Our Cards

09:10
51

Icons via Font Awesome

16:31
52

Making a Div Container Clickable

09:55
53

Box-sizing & Border-box

06:19
54

How to Make A Colored Button

07:46
55

Why Can't I Add Margin or Paddding

11:08
56

Rounded Corners

04:17
57

Drop Shadows

06:24
58

Backup Your Website

05:00
59

Reusing a Button Class

03:10
60

Class Project 04

02:58
61

Class Project 04 -COMPLETE

05:45
62

Adding a Horizontal Rule

03:51
63

Make Divs Wrap Onto Separate Lines

12:14
64

Hover Color & Animating a Button

03:33
65

Pseudo Classes

09:31
66

Simple Dropdown Navigation

20:04
67

Adding Our Dropdown to the Website

14:50
68

Useful Shortcuts and Tips in VS Code

13:28
69

Large Background Image

09:24
70

How to Connect 2 Pages

10:42
71

Simple PHP Form Work

17:49
72

Placeholder Form Text

05:46
73

Multi Line Form Text Box

02:18
74

Form Check Marks

03:04
75

Form Radio Button

06:07
76

Form Drop Down Menu

05:48
77

How to Style Your Form

12:55

Project 3: Responsive Portfolio Website

78

What does responsive website design mean

04:17
79

How to change a website layout size color when at different sizes using media queries

11:28
80

How to test your website on a tablet or mobile phone from Visual Studio Code

06:00
81

How to change the layout of a responsive website for mobile vs desktop

16:02
82

How to turn things on and off for mobile tablet & desktop responsive websites

06:03
83

What is pixel density responsive images pixel ratio dp px in webdesign

14:47
84

How to export responsive images for website from XD Photoshop Illustrator

05:11
85

How to add responsive images to website using 100% width in HTML & CSS

06:08
86

How to use srcset to change images in HTML for responsive website

10:15
87

How to add a css style to the first line of a p tag on a website (

11:18
88

How to make the header footer full width but the inside centered

05:36
89

Class Project 05 – Header design

03:12
90

Class Project 05 – Header design COMPLETE

06:25
91

How to use a span tag or span class in HTML to change text

10:32
92

How to pin the navigation to the top of a website fixed nav

03:17
93

How to make a simple responsive mobile menu using CSS only

08:21
94

What is Javascript vs Jquery in website web design

06:35
95

How to make a burger menu 3 line mobile navigation for a website

15:11
96

How to switch a menu nav from desktop to mobile phone

21:45

Project 4: Bootstrap Yogurt Website

97

Overview of what Bootstrap 4 is in website design

07:57
98

How to install Bootstrap 4 on a website using Visual Studio Code

06:27
99

Quick overview of how the Bootstrap Grid Layout works in VS Code

10:49
100

Quick overview of how Bootstrap Components works in VS Code

09:23
101

Quick overview of how Bootstrap CSS Styles works in VS Code

08:20
102

How to customize the default Bootstrap 4 css styles

13:51
103

How to use Bootstrap Layout Grid Experiment 1

10:20
104

How to make 100% header & uneven widths in Bootstrap 4

07:16
105

How to create uneven col widths in Bootstrap 4

07:27
106

How to add padding & margins using Bootstrap 4 in VS Code

12:03
107

How to change layout of Bootstrap depending on mobile or desktop

15:46
108

How to turn things on & off on your website using Bootstrap 4

05:30
109

Google Chrome Inspect

12:40
110

Add Shadows to Text & Boxes

07:06
111

Change the Default Buttons

06:16
112

Responsive Images in Bootstrap 4

09:34
113

How to Center Text & Div Tags

04:16
114

Customize the Bootstrap Navbar

07:29
115

Add Your Own Logo

03:58
116

Change the Default Nav Styles

12:12
117

Fix the Navigation to the Top

04:41
118

Col Images & Col Background

07:56
119

Bootstrap Border & Rounded Corners

04:20
120

Bootstrap 4 Carousels

05:13
121

Card Groups

03:29
122

Drop Shadows On Bootstrap Cards

02:25
123

Clickable Boxes in Bootstrap 4

04:02

Final Quiz

124

Final 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

Bonus Materials with Purchase

Exercise Files
Completed Files

Ratings and Reviews

Viwosoft Technologies
 

Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!

Student Work

RELATED ARTICLES

RELATED ARTICLES