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