53. Adding a Navigation Bar

Jul 14, 2026 04:28 · 5:09 · English · Whisper Turbo · 2 דוברים

תעתיק זה פג היום. שדרוג לאחסון קבוע →

אינדקס הרצאה

0:02

S… Speaker 1 (53. Adding a Navigation Bar)

So we added all the components we created to our templates

0:06

S… Speaker 1 (53. Adding a Navigation Bar)

Now let's fine -tune them and add the real content we want to have there,

0:10

S… Speaker 1 (53. Adding a Navigation Bar)

starting in the header.

0:11

S… Speaker 2 (53. Adding a Navigation Bar)

Of course,

0:12

S… Speaker 1 (53. Adding a Navigation Bar)

I don't want to have this H1 tag here.

0:14

S… Speaker 1 (53. Adding a Navigation Bar)

Instead,

0:15

S… Speaker 1 (53. Adding a Navigation Bar)

I will use a couple of bootstrap classes to create a nice -looking header.

0:19

S… Speaker 1 (53. Adding a Navigation Bar)

So I'll create a wrapping nav element,

0:22

S… Speaker 1 (53. Adding a Navigation Bar)

and on this element,

0:24

S… Speaker 1 (53. Adding a Navigation Bar)

I'll add the navbar class and then navbar default.

0:28

S… Speaker 2 (53. Adding a Navigation Bar)

Again,

0:28

S… Speaker 1 (53. Adding a Navigation Bar)

these are just bootstrap classes,

0:30

S… Speaker 1 (53. Adding a Navigation Bar)

which will give me this default bootstrap header.

0:34

S… Speaker 1 (53. Adding a Navigation Bar)

In there,

0:35

S… Speaker 1 (53. Adding a Navigation Bar)

I'll place a container fluid div to have my own

0:39

S… Speaker 1 (53. Adding a Navigation Bar)

view container basically in there.

0:40

S… Speaker 1 (53. Adding a Navigation Bar)

And the first thing I want to have here is a header.

0:44

S… Speaker 1 (53. Adding a Navigation Bar)

For that,

0:45

S… Speaker 1 (53. Adding a Navigation Bar)

we get the navbar header class we can add to a div.

0:48

S… Speaker 1 (53. Adding a Navigation Bar)

And in this div,

0:50

S… Speaker 1 (53. Adding a Navigation Bar)

I want to have a clickable header.

0:51

S… Speaker 1 (53. Adding a Navigation Bar)

So I'll add an anchor tag with pointing to hash for now.

0:55

S… Speaker 2 (53. Adding a Navigation Bar)

We'll later,

0:55

S… Speaker 1 (53. Adding a Navigation Bar)

of course, add a route there once we learned how to do this.

0:58

S… Speaker 1 (53. Adding a Navigation Bar)

And this should have the class navbar.

1:03

S… Speaker 1 (53. Adding a Navigation Bar)

to give this this brand -like text style.

1:06

S… Speaker 1 (53. Adding a Navigation Bar)

I'll say recipe book here,

1:08

S… Speaker 1 (53. Adding a Navigation Bar)

since this is the name of our application.

1:10

S… Speaker 1 (53. Adding a Navigation Bar)

So that's the header part of

1:14

S… Speaker 1 (53. Adding a Navigation Bar)

our header, so this main brand part.

1:17

S… Speaker 1 (53. Adding a Navigation Bar)

Now let's work on the actual links.

1:20

S… Speaker 1 (53. Adding a Navigation Bar)

For this, I'll add a div,

1:21

S… Speaker 1 (53. Adding a Navigation Bar)

which will receive the collapse class and then the navbar collapse

1:26

S… Speaker 2 (53. Adding a Navigation Bar)

class.

1:26

S… Speaker 1 (53. Adding a Navigation Bar)

Now,

1:27

S… Speaker 1 (53. Adding a Navigation Bar)

I won't really use the collapse feature.

1:29

S… Speaker 1 (53. Adding a Navigation Bar)

I won't add a hamburger icon here,

1:31

S… Speaker 1 (53. Adding a Navigation Bar)

since we will not have many links on our header anyways.

1:34

S… Speaker 1 (53. Adding a Navigation Bar)

But this gives us some nice styles.

1:37

S… Speaker 2 (53. Adding a Navigation Bar)

And of course,

1:38

S… Speaker 1 (53. Adding a Navigation Bar)

collapse here should have an E at the end,

1:41

S… Speaker 2 (53. Adding a Navigation Bar)

like that.

1:42

S… Speaker 1 (53. Adding a Navigation Bar)

So in here,

1:44

S… Speaker 1 (53. Adding a Navigation Bar)

I now want to have a group of list items,

1:47

S… Speaker 1 (53. Adding a Navigation Bar)

so a group of links in the end.

1:49

S… Speaker 1 (53. Adding a Navigation Bar)

This will be an unordered list with the CSS classes nav and

1:54

S… Speaker 1 (53. Adding a Navigation Bar)

then navbar nav.

1:56

S… Speaker 1 (53. Adding a Navigation Bar)

So make sure to create this unordered list with these classes.

2:00

S… Speaker 1 (53. Adding a Navigation Bar)

And in there,

2:01

S… Speaker 1 (53. Adding a Navigation Bar)

if we add some list items,

2:03

S… Speaker 1 (53. Adding a Navigation Bar)

they will actually sit next to each other.

2:05

S… Speaker 1 (53. Adding a Navigation Bar)

So they will automatically be positioned correctly by Bootstrap.

2:09

S… Speaker 1 (53. Adding a Navigation Bar)

Each list item should hold a link.

2:11

S… Speaker 1 (53. Adding a Navigation Bar)

So here I'll add an anchor tag,

2:13

S… Speaker 1 (53. Adding a Navigation Bar)

also pointing to just hash for now.

2:16

S… Speaker 1 (53. Adding a Navigation Bar)

One for the recipe section and a second one

2:20

S… Speaker 1 (53. Adding a Navigation Bar)

for the shopping list section.

2:22

S… Speaker 1 (53. Adding a Navigation Bar)

Now with that added,

2:24

S… Speaker 1 (53. Adding a Navigation Bar)

I'll add another area in my header here.

2:27

S… Speaker 1 (53. Adding a Navigation Bar)

This will be another unordered list,

2:29

S… Speaker 1 (53. Adding a Navigation Bar)

which will receive the classes nav and now also navbar

2:33

S… Speaker 1 (53. Adding a Navigation Bar)

nav like before,

2:35

S… Speaker 1 (53. Adding a Navigation Bar)

but then also navbar right to position these links

2:39

S… Speaker 1 (53. Adding a Navigation Bar)

at the right.

2:40

S… Speaker 1 (53. Adding a Navigation Bar)

And actually,

2:41

S… Speaker 1 (53. Adding a Navigation Bar)

this will only be one link here,

2:43

S… Speaker 1 (53. Adding a Navigation Bar)

which will receive a class of dropdown.

2:45

S… Speaker 1 (53. Adding a Navigation Bar)

This list item will...

2:47

S… Speaker 1 (53. Adding a Navigation Bar)

Because later we will add our own directive,

2:50

S… Speaker 1 (53. Adding a Navigation Bar)

which will turn this into a working drop -down where we can then choose

2:54

S… Speaker 1 (53. Adding a Navigation Bar)

some options to store our data on a server,

2:57

S… Speaker 1 (53. Adding a Navigation Bar)

something we'll also implement later in this course,

2:59

S… Speaker 1 (53. Adding a Navigation Bar)

or fetch it from there.

3:01

S… Speaker 1 (53. Adding a Navigation Bar)

So in this drop -down,

3:03

S… Speaker 1 (53. Adding a Navigation Bar)

I simply want to have my drop -down menu,

3:06

S… Speaker 1 (53. Adding a Navigation Bar)

which when using Bootstrap is added by adding an unordered list

3:11

S… Speaker 1 (53. Adding a Navigation Bar)

with the class drop -down.

3:14

S… Speaker 1 (53. Adding a Navigation Bar)

menu so this will hold the items of this drop down and

3:18

S… Speaker 1 (53. Adding a Navigation Bar)

Here I'll add a couple of list items which all hold

3:22

S… Speaker 1 (53. Adding a Navigation Bar)

some links pointing to just hash for now one for saving

3:27

S… Speaker 1 (53. Adding a Navigation Bar)

data and one for Fetching

3:31

S… Speaker 2 (53. Adding a Navigation Bar)

data again.

3:32

S… Speaker 1 (53. Adding a Navigation Bar)

This will be filled with working code later So

3:36

S… Speaker 1 (53. Adding a Navigation Bar)

that's my header.

3:37

S… Speaker 1 (53. Adding a Navigation Bar)

Let's save it and see how it looks

3:40

S… Speaker 2 (53. Adding a Navigation Bar)

Looks okay.

3:41

S… Speaker 1 (53. Adding a Navigation Bar)

I don't see my dropdown though.

3:45

S… Speaker 1 (53. Adding a Navigation Bar)

The brand looks off.

3:46

S… Speaker 1 (53. Adding a Navigation Bar)

So I'm not entirely happy with that.

3:49

S… Speaker 1 (53. Adding a Navigation Bar)

Let's see what is wrong.

3:50

S… Speaker 1 (53. Adding a Navigation Bar)

The brand is not working because that should be navbar,

3:55

S… Speaker 1 (53. Adding a Navigation Bar)

not have H in between.

3:57

S… Speaker 1 (53. Adding a Navigation Bar)

So if you fix this,

3:58

S… Speaker 1 (53. Adding a Navigation Bar)

the brand looks all right.

3:59

S… Speaker 1 (53. Adding a Navigation Bar)

Now what's wrong with the dropdown?

4:02

S… Speaker 1 (53. Adding a Navigation Bar)

Well, the drop -down simply misses the link we would see to open the drop

4:06

S… Speaker 1 (53. Adding a Navigation Bar)

-down because this unordered class here simply is the content of the drop -down We

4:10

S… Speaker 1 (53. Adding a Navigation Bar)

of course also need a link to trigger it.

4:12

S… Speaker 1 (53. Adding a Navigation Bar)

So let's add an anchor tag pointing to hashtag here where I will say

4:16

S… Speaker 1 (53. Adding a Navigation Bar)

manage

4:18

S… Speaker 2 (53. Adding a Navigation Bar)

Just manage,

4:19

S… Speaker 1 (53. Adding a Navigation Bar)

maybe.

4:19

S… Speaker 1 (53. Adding a Navigation Bar)

You could, of course, change that text.

4:20

S… Speaker 1 (53. Adding a Navigation Bar)

And this should have a class of dropdown toggle

4:24

S… Speaker 1 (53. Adding a Navigation Bar)

because this will be the button toggling the dropdown in the end.

4:27

S… Speaker 1 (53. Adding a Navigation Bar)

Therefore,

4:28

S… Speaker 1 (53. Adding a Navigation Bar)

it will have a role of button to add some accessibility to this.

4:31

S… Speaker 1 (53. Adding a Navigation Bar)

Not required for this to work correctly,

4:34

S… Speaker 1 (53. Adding a Navigation Bar)

though. And with this,

4:35

S… Speaker 1 (53. Adding a Navigation Bar)

now if we save this,

4:37

S… Speaker 1 (53. Adding a Navigation Bar)

we see the dropdown.

4:38

S… Speaker 1 (53. Adding a Navigation Bar)

It would be nice to have a little arrow next to it indicating that it

4:42

S… Speaker 1 (53. Adding a Navigation Bar)

is a dropdown.

4:42

S… Speaker 1 (53. Adding a Navigation Bar)

So next to manage,

4:44

S… Speaker 1 (53. Adding a Navigation Bar)

I'll add a span with a class of...

4:47

S… Speaker 1 (53. Adding a Navigation Bar)

which will give us this arrow pointing to the bottom,

4:51

S… Speaker 1 (53. Adding a Navigation Bar)

this arrow here.

4:52

S… Speaker 1 (53. Adding a Navigation Bar)

And now we get a dropdown.

4:53

S… Speaker 1 (53. Adding a Navigation Bar)

It won't work if we click it because we haven't added any code which would open

4:57

S… Speaker 1 (53. Adding a Navigation Bar)

the dropdown.

4:58

S… Speaker 1 (53. Adding a Navigation Bar)

We will do this after the directives section though.

5:01

S… Speaker 1 (53. Adding a Navigation Bar)

So the header is now working.

5:03

S… Speaker 2 (53. Adding a Navigation Bar)

With that,

5:04

S… Speaker 1 (53. Adding a Navigation Bar)

let's move on and let's work on our recipes section.

תעתיק זה נוצר על ידי AI (הכרה אוטומטית של דיבור). ייתכן שיש בו שגיאות אשר מאשרות את השמע המקורי לשימוש קריטי. מדיניות AI

❤️ אוהבים את STT.ai? ספרו לחברים שלכם!

תקציר

לחץ לסכם כדי ליצור סיכום AI של תעתיק זה.

שאל את אל על התעתיק הזה.

שאל כל דבר על התמליל הזה, הבינה המלאכותית תמצא חלקים רלוונטיים ותענה.

תמלול נוסף