Build Your Own Business Website header image

Create a 2 Column Responsive Header in Thesis 2.3

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.

So we’re going to start off by creating a 2 column responsive header in Thesis 2.3 using the Classic Responsive theme.

We’re going to do this on the front page. And we’re going to continue this process of using the Thesis default stuff. We’re not going to replace these defaults we’re going to just add to this.

So what that really means is that this header right here is actually going to become a column and this container here is going to be the column wrapper. We’re going to use the header as the left box and the nav menu is going to be in the right box or column.

So we’re going to create another column called “header right column”. We’ll give it a class of right column. Then shift+drag that down into the header area container and then put it down below the header.

In the header we’re going to add one more class and that is going to be left column. We don’t strictly speaking need it but I’m going to do it anyway because I can use left column and right column classes for defining other instances of columns like this later.

We’ve got a left column and a right column and we put our nav menu into the right column. Oh, I see from my notes that I do want to add a wrapper for the container. So I’m just going to create one more HTML container called “header columns”.

I’m actually going to make it a header instead of a div and I’m going to give it the class of columns which we get from the feature box columns and the content columns. These two columns we’re using the same or a similar CSS rule there.

Drop that into the container and then drop header right into that and header left into that. So we’ve got header and header right. Let’s save our template.

Come back over to the site. Flush the cache and reload. Obviously there is some residual CSS here that I didn’t think was there. I can get rid of this rule. Let’s save the Custom CSS here and try that again. No, that’s not quite right.

Oh, I’m missing the underscore in right column. Because we’ve got the class of right so that’s picking up another style. Let’s go back over to the Skin Editor and change that to right underscore column. Now it’s going to work right.

We haven’t created any rules yet that this should be on the left and that this should be on the right. But we do have our structure now where we’ve got our header area, a container, columns. We’ve got the left column and the right column.

So now we are going to add a little bit of custom CSS to this to make those behave the way we want. I think I’m going to create just a bunch of rules for header here. We’ll just call this header. Then the first thing we need to do…if you know anything about floating columns you know that you are going to want to have a self clearing div that those columns sit inside of which is the primary reason for using this columns class. So that we can make that self clearing. Of course, we’ve got a nice variable for doing that easily.

We’re going to start with that. It’s going to be header area dot columns colon after. Then at the very bottom of our variable list at the moment is this here the z clear fix. It’s essentially all the code that you need in order to make this column wrapper self clearing.

So then all we have to do is say left column and right column. Left column dot right column and I’m going to setup some defaults for those. First off box sizing, border box. And then padding none. I think that’s all I need to do for those.

Then we are going to specify widths and float. So now we’re going to say in the header area, area dot left column. We’re going to say width and I’m going to say 30%. I prefer columns at percent widths. Then float left. Then our right column we’ll just say width colon 70%.

This is also evidence that lets you know you’ve done something wrong. If it doesn’t indent properly then you forgot something like the semicolon in that case. Width and then float. Usually I just float everything left which is what I’ll do here but you could float it right. It doesn’t matter that much.

Now we’ve got our columns set up, our self clearing div, some basic stuff so let’s save this. We’re now going to have columns the left and right. We do. In fact this is too small a logo so I want to change that out. I want to add some padding to this column to bring it down. We’re going to get rid of some color out of the menu and we’re going to center the menu in this space.

But before that what we’ll do is…we don’t want to have to do this on every template. So we’re going to come back over to the Skin Editor. First off we’ll create a new backup and call it part way header just in case we need to recover something that we don’t have.

Then we’re going to import skin data. Choose the file and we’re going to pick up my full width with two column header. Now every template has this layout. I didn’t actually create that extra column wrapper like we did above. I guess I decided that it was too inefficient. Because of that we’ll have to make a minor adjustment to the custom CSS.

And you see we get the custom CSS from where I was working on this the last time which is not where we are now. First I’m going to go back to the editor and copy that CSS. So we’ll go back to the part way header. And go to Custom CSS. Copy all of that and then go back to the Skin Editor and data manager. Then we’ll import that skin data again, full width.

Come back over to Custom CSS and paste that CSS back in there. Now I do have that stuff set up. Save my custom CSS. Go to the site and flush the cache. We’ve got an issue, it must be because I’ve used different classes. I guess I should have paid closer attention to what I did originally.

Let’s just make those classes the right classes for this. Something’s not right. Let’s go back to data manager. The import must not have worked. We’ll do that again. I hate it when I do a presentation and I flail around!

Let’s just check those classes again. It’s because I grabbed the wrong one. It’s not full width, it’s the fw 2 column header text. As you can see it’s good to come up with a naming convention that you recognize so you don’t make a mistake like I just did.

Okay, now this is going to work. Go to Custom CSS and save that. Come down to our…instead of header area columns. It’s header area container. The columns all look right. I also missed the z index, so where did I do that?

Now that we’ve gotten that far with it we’re just going to wrap up a few stylistic things. That starts with giving ourselves a little bit of padding. I think instead of padding zero, we’ll say padding and we’ll grab the half spacing, x 3 over 2, x double x half, 14 pixels. So we’ll grab the x spacing for that.

Then because of that we’re going to say 35% and 65% for the column widths. Then this right column we’re going to add a little bit more padding to the top. I’m going to try 20 pixels for the moment. Let’s see how that works.

Then I’m going to come down to menu and remember that in menu we gave it that background color. So we had a color that spanned all the way across. Now we want to get rid of that. Now we only want this background color in the link itself and not anywhere else. So if we save that we’ll be close.

So my header left column is supposed to have padding. That went away because header has a padding of zero so if I take that out it’ll work. Let’s go fix that CSS. In the left column it’s going to use the x half and in the right column the top will be x single and then space and then x half space, x half and x half. Let’s see how that does for the padding.

Actually before we check that I’m going to change my header image out to one that works better smaller. Now we can see what that all looks like. Flush the cache. There we go.

So I want to bring this down a little bit and I want to center it in the space and for the time being I’m just going to measure it, it’s about 370 pixels. We’ll do that by taking ul menu or right column menu. We’ll say width is 370 px. This margin left auto thing would be a perfect candidate for a variable. Let’s also just drop this down a bit more so in my right column let’s bring it down to 41.

We’ll use header area as our selector. Header area dot menu and then width colon 375 px and margin colon zero auto.

I like to use the variables because when stuff changes then it all changes proportionally. If you hard code padding like that then you have to go figure out a new number whereas if you do it this way it all stays proportional.

0 Comments… add one
0 comments… add one

Leave a Comment