Build Your Own Business Website header image

How to Add Space Between the Header Image and the Menu in Classic Responsive

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we demonstrate how to add a space between the header image and the menu in Classic Responsive by adding a margin bottom to the header. We also show its 3D view that gives a sense of the layers that are involved and where things are located.

Video Transcript

Rick: Anything else?

Member: I was going to try and work it out actually when you showed me the blog page before I noticed that the space between the navigation bar and the slide show wasn’t there.

Rick: Well, the slide show wasn’t there at all.

Member: Ah, that’s why okay so I’ve got to put it there; okay then.

Rick: Although I think it looks nice I don’t think you need any padding, do you?

Member: Ah, okay. It doesn’t look too bad here but on the front page; on the home page it doesn’t look good. It looks good there I think.

Rick: Yeah, I think this is just fine for the home page but once you get interior I think having the menu connected; I mean the only other thing you might do is kind of change this color a little bit, so it’s more like that color.

Member: Yeah, sure.

Rick: But besides that I think it really looks good just like it that.

Member: Yeah, it doesn’t look too bad there. I just put that header in just a few minutes ago that on the front page; home page I want it to I want a space between the header and the slider. It needs I think a white space between the header and the slider and I was going to try and work it out myself; and if you can, if I can just tell you how my head does working. The process that I thought that I was going to have to go through…

Rick: Uhuh.

Member: Because I have never done any of this without being you doing it for me; I’ve never had other than Thesis 1.8…

Rick: Okay.

Member: …and a few others before that I can’t remember how or why. I was thinking that I would need to go and find out what the is it the “class” or the “id” where that header is lined.

Rick: Yup.

Member: By looking at the editor if you know what I mean, does it make sense? Go and find out what that class or the “id” is?

Rick: Well, one of the easiest ways to do that is just to here inside the Firefox right-click on it and say “Inspect Element”.

Member: Ah…

Rick: Because as soon as you do that it’s going to take you directly to the thing and actually because you just clicked on the slide you got to work your way up a little bit. This is really <div>, this is really the wrapper of that meteor slides.

Member: I wish I understood how to read this stuff properly either looking at the code in here.

Rick: Well, you just have to sort of get a sense of the outline, right. You’ve got this <div> and inside of that <div> you’ve put a widget area and then you’ve got the menu. See you’ve got a box called feature and inside that box you put a widget area and a menu. And then you’ve got your columns which is the whole thing and above that you had the header, which is the thing up there. Now, what I would do if you want a space between this header and a feature; rather than adding it to the header I would add it to the feature. And so you could put a margin-top of something or the other, so.

Member: Yes.

Rick: margin-top: 26px;

Member: It’s amazing how that works doesn’t it? I think it’s incredible how it understands what to do.

Rick: Well, it’s a tool specifically design for you to test things. Alright, maybe 26px is too much so you’d go down to 20px but; but it just allows you to test it. And then…

Member: Maybe even less.

Rick: Yup, 16px; and so then you’re using “.feature” with a “margin-top: 16px;” and that would be your custom css. And that would only apply to the front page because that’s the only structure that you had it created; is on your front page. So, if you come back down to this thing and you said…well first we’ll paste our other code and then you just said “.feature {margin-top: 16px;}”. So, that’s what I would do; now if you really want a gap between the header and a menu then instead of  “.feature”, you’d pick “.header”. Now the net result on this page well actually, oh yeah margin-bottom; the net result of this page…

Member: Oh, okay explain that again please that why would you say header?

Rick: Well, because then it would apply to everywhere and you would automatically have the gap between the header and the menu.

Member: Oh, I see.

Rick: See so, if you really want the space there you would choose header and if you only want the space on the front page with the feature then you would choose the feature instead.

Member: Yes, feature I get it; okay.

Rick: So, that’s what it would look like if you use that with the header; right? Then this would drop down below.

Member: Yeah, no I like it the other way.

Rick: And if this was feature it wouldn’t have any effect on this one at all, because there’s no feature on this template. Okay, I’m going to put this code in the chat window so you have that but it does take a little bit of time to figure out you know when you inspect an element to figure out what specifically what is being referenced. But you got a clue here…

Member: Yes.

Rick: Because you got this little breadcrumb thing here right. I clicked on the header image I mean I clicked in the middle of the header image but you could click on the <a> or click on the div#header.header, right; or click on the div.container and see then it’s selecting everything, go back to div#header and see it’s selecting that. Sometimes it may help you to look at the 3d view where you can see all the layers of it.

Member: Oh, I see.

Rick: And actually it’s probably, it takes a little getting used to but…

Member: It’s amazing.

Rick: …you can click on the 3d view and when you click on something then; see you click on the “a” it selects that thing right. So, if you click the container it’s going all the way down. If you click on this section here, right?

Member: Uhuh.

Rick: It highlights that down here. I just clicked on the image and it shows up in the breadcrumb and if I go down a little bit lower it shows I click on the “a” and it goes down there into the “a”. And if I go lower still then it shows me I’ve clicked on the header and it highlights over here.

Member: Uhuh, okay.

Rick: So, you know this little process of clicking around on things…

Member: Wow, this is amazing.

Rick: It shows up like that here. And so you can see that your little title is really made up of three different layers, right. It has got the link and then it’s got the h2 and then it’s got the div that wraps the whole thing.

Member: Yes.

Rick: And as you click through here you can see each one highlighted. So, sometimes flipping into this 3d view gives you a sense of the layers involved; you know where each thing is.

Member: Yes.

Rick: Right, because clicking down here…

Member: And you just using a mouse to turn that around?

Rick: I am, yeah. Mouse with a left-mouse button.

Member: Ah.

Rick: Now, the first time you try you’re going to see it’s kind of squarely but this is not entirely unlike work I use to do as an architect. So, I’m kind of used to how this thing works all around but…

Member: Ah, yes of course.

Rick: But then as you click on different things…

Member: I have enough problems trying to work out google is, little lately though.

Rick: Well, okay but it’s just another tool for you to help try and see what’s going on.

Member: Yeah, yeah that’s amazing.

Rick: Because when you click on something here it shows up here highlighted and also here in the breadcrumb.

Member: What does the “a” stands for?

Rick: “a” stands for link, it’s an <a> tag which is the html link tag.

Member: okay.

Rick: Okay?

Member: Yeah, no this has been great. Thank you so much that sort of really clarified the frames around the images that had been really puzzling me for some time.

Rick: Well, the way you get the frames around an image is to give it a background-color, a border and then padding. That’s how the frame is created.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment