Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: Navigation and footer

Learn more about this course
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.