Building data-driven web apps with Pyramid and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: Navigation and footer
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
The next thing that our site needs
0:01
is an overall navigation look and feel.
0:04
So here's our expected target
0:07
we got this little icon up here
0:09
and got those here, and then the bottom we have a footer
0:13
but our pages, we don't have any of that.
0:15
So, our goal this time is to add the navigation at the top.
0:20
Also, we're going to need this image and two others
0:23
so I'm going to copy those into our image location here.
0:28
You see we have like a blue cube
0:31
here's that logo and a white cube.
0:33
The blue and white cube are going to be
0:35
used in a minute, but we need
0:38
the logo one right now
0:40
so might as well get those files in place.
0:42
So the next thing that we need to do is
0:43
we're going to put a nav item right here.
0:47
And we saw the really nice dynamic behavior
0:51
a responsive design becoming a dropdown menu
0:54
and all that kind of stuff in Bootstrap.
0:58
And in order for that to work
0:59
we have to follow a very precise layout
1:01
with lots of pieces involved.
1:02
So, just because I'm sure I'll make a mistake
1:05
I'm going to copy this over.
1:06
I got it by copying it from the Bootstrap site
1:09
and I'll put it over here.
1:12
So here, let's do a little cleanup and look at this.
1:16
So we're going to have a nav bar
1:18
and normally these are whitish
1:20
but if you say inverse
1:21
it's darkish, usually black and gray.
1:24
And over here we're going to have what's called
1:27
the hamburger menu when it collapses, right.
1:29
This is the toggle bit.
1:32
Here is that logo and then in this part
1:35
we're going to put as many items as we want
1:38
so I'll put three for now.
1:40
Let's look and see what we got.
1:43
It's probably not going to look good. Let's see.
1:46
Ooh, that looks better than I expected.
1:49
Remember when I did the theme overrides
1:51
it took some of these and put them in there.
1:54
Still need to do a little work
1:55
to get these items down and over
1:57
and of course to get help
1:59
donate, log in, and register
2:00
so we can do that really easy.
2:11
There, now we have the actual items.
2:13
Let's put a little bit of style in place
2:15
to make sure that those go down and over
2:17
like they're supposed to.
2:18
So down here for the navigation
2:19
let me just pace this
2:20
so you don't have to watch me type out.
2:22
So the image we're going to set to be a certain size
2:25
we set the width to be fixed
2:27
and that automatically scales the height
2:28
and we also push it over a little bit.
2:31
We take and set the margin a little bit higher.
2:34
And then these items, we're going to push them down.
2:37
That's only part of the solution
2:38
but let's see what we got.
2:40
Looking better, right?
2:41
This is looking really good.
2:43
But notice this is pushed
2:45
into the left a little more than this
2:47
so we need to do one more thing.
2:50
I want to target this register
2:52
so I'm going to give it an id
2:54
of Last, Nav, Link.
2:57
So I can push that one to the right.
3:00
For IDs, you'd say hash, so it'd say Last Nav Link
3:04
margin right, 50px might be decent.
3:10
There we go, cycle back and forth.
3:12
Eh, close enough, let's say 45.
3:16
Ooh pretty close, I'm going to call that close enough.
3:18
It doesn't actually matter just as long as
3:20
it has basically has the look and feel, right?
3:23
Now, let's see if we have any
3:24
responsive design behavior here.
3:26
Oh yeah, look at that.
3:28
How awesome is that? Bootstrap is really cool, isn't it?
3:32
How 'about that?
3:33
We got our navigation bits in place.
3:36
Now, remember, we do have other pages.
3:40
Here we go, we have our about and we have our home.
3:43
So if we go back and forth, notice
3:44
it's already taken that design
3:48
back and forth as we go here
3:49
so that's really, really great.
