Build Your Own Business Website header image

Example #2 – Create a 2 Column Header

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

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

Let’s go over here in the Thesis 2 Skin Editor to Custom CSS. We are going to start by writing some very basic responsive CSS.

I already have some CSS in here and this CSS comes from, again, that Resource articles page where I have the code snippets for Thesis Classic Responsive Skin. So I’m using some of the code snippets from that. In particular what I’m using are the media queries.

Create the Column Styles

I’m going to start by writing some rules for basic columns. To begin with I’m going to create column styles. And I prefer percentage widths so I’m going to define a 1/4, 1/3 and 2/3 columns. And these columns are all going to have these rules in common. They are going to float left. They are going to have a box sizing property of border box. This is a very basic rule.

Now I’m going to start specifying their widths and I’m going to specify those in the media query that only shows up in desktop views. This rule is going to start off with 1/4 and its width will be 25%. Then 1/3 and its width will be 33%. Then 2/3 and its width will be 66%.

When this doesn’t indent properly you’ll know that you did something wrong. I’ll just fix that.

The other thing I wanted up here is to specify padding. This is different than what I usually do. I usually leave columns without padding and specify padding for their contents but given what we are going to do today, this is better. That is xsingle.

Create the Header in the Front Page Template

I’ve saved that custom CSS and now let’s go to the Skin Editor and start making some changes. We’ll go to the Front Page and I’m going to create a column wrapper.

Using Self Clearing Div as Column Wrapper

That’s what this is, this is a column wrapper and those of you who are familiar with responsive design are also familiar with self clearing floats. This is a self clearing div by definition in Thesis Classic Responsive. So we are going to continue to use this self clearing div as our column wrapper any time we are creating columns.

Create a New HTML Container

The first step then is an HTML container and we’ll call it “header columns”. I’m going to give it a header tag. And then if you look at the column wrapper it’s got a class of columns. So that’s what I’m going to do, I’m going to give it the class of columns. That’s the class name that makes it self clearing.

Add Columns

I’ll shift drag this over into container. Then inside of that I’m going to put a right column. This is going to be header right column and I’ll give it a class of two hyphen thirds.

Notice the difference between what I wrote in CSS and what I did here? When I wrote it in CSS I put the dot there but when I’m writing it here I’m not putting the dot. That’s because this is asking me for the HTML class and the dot is not part of the HTML class. It’s part of the CSS selector.

If this had said HTML selector then I would have put the dot in front of it but it’s asking me for the class name so it doesn’t get the dot in front of it nor does the HTML get a pound sign in front of it. It’s asking for the ID not the ID selector.

Add Nav Menu

So I’m going to take the nav menu down and I’m going to shift drag it and drop it into header columns. Then I’m going to shift drag header right column and drop it into header columns. Then I’m going to shift drag header and drop it into header columns. Now open up the header and add another class. That class is going to be one hyphen third.

You can add multiple class names by simply leaving a space in between them. You cannot add multiple ID names. There is no such thing.

Let’s look at what we’ve done here. We’ve created a column wrapper. We’ve created our left column, giving it a class of 1/3 and putting it on top. We’ve got our right column, giving it a class of 2/3 and putting it on the bottom.

Review the Header on Website

Let’s save our template and come back over to the website and reload the page, now we have our menu in the left column and our logo or header image in the right column. You can see that here.

We created our header with a class of columns. We’ve got our header with a class of 1/3 and our other column with a class of 2/3 and everything fits in there nicely. That’s why I didn’t want to use padding. Although it looks like padding would have worked there fine.

Now as luck would have it this actually looks pretty good already in the responsinator. Everything is showing up. It would be nice if the logo was centered here but otherwise this is working pretty well without having to do anything special.

The reason I point that out to you is because more often than not when you do what I just did, it’s not going to look fine on mobile devices. More often than not you are going to need to tweak your CSS in order to make that work using media queries.

I guess I cheated a little bit by using this media query to define its width. We defined the width in the desktop view only so now the widths everywhere else are automatically 100%. And these things stayed the same everywhere – float left, border box, padding. This is what they look like in every mobile view and since they are wrapped up in self clearing div the fact that they float doesn’t matter.

Make Header Image Float Center

Let’s make that header image float to the center. I think we can just say div ID header at this point. Come up here to header styles and say pound sign header. No we don’t want to say that because we don’t want that to affect the menu. So we’re going to say class of header instead of pound sign header. Header text align center.

Let’s take a look at it in the responsinator. We should be good to go having centered those images. We need to fix a broken float. We’ll target the one to make it clear…actually what I’m really going to do is specify a width. Come down to wtotal and say dot header dot one third and then width colon 100%. We could say float none but I think we’ll leave it like that.

So now we’ve got the image in the middle but it looks like we need to make the menu 100% wide too. Header one third. Header two thirds should be a width of 100%. Let’s reload that. Flush the cache. And make sure that those classes are showing up.

Chris: Go ahead and view source. Pull up the CSS file and shift refresh on it to try and force the resource to reload.

Rick: It’s indenting the code wrong which suggests that there is an error in it. Oh header two thirds is not a thing. That’s the problem. I don’t even see any reason for not keeping that. Header one third, header two thirds. It’s actually header dot one third. We’re going to have to give our header class a class of columns I think.

If I say header space two thirds I could even do that here. Header space one third. Use the header element and the column inside of it so I don’t have to get a class. There we go. It’s behaving how we expected.

0 Comments… add one
0 comments… add one

Leave a Comment