Build Your Own Business Website header image

Change the Responsive Header Behavior for Tablet Devices

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.

We’ve created the 2 column responsive header in Thesis Classic but this may not come as a surprise to you, it’s doesn’t look that great responsively. Let’s take a look at it in the responsinator in the incognito window.

You can see that this is tiny and this has shrunk over. It just doesn’t look the way we want it to. What we really want this to be is all the way across the top and this to be all the way across the bottom.

If you were going to use the same media query rules that we have right now, you would end up having to negate a bunch of our styles. So instead of doing that we’re going to put all of these rules in a media query that is desktop only.

The very simple way to do that is in Custom CSS to go back down to our tablet, the larger mobile view. We take this at media all and max width total. Let’s give ourselves a closing bracket and a space. This will become min width. Min width w total.

And then we bring all of these structural rules that we created into that. So that is really all of this. All of those structural rules we now take out of that and put it into this media query. Remember that neat trick where you can select them all and then shift+tab? We’ll do that. Now they are all in their right spots. I love that.

Let’s save the Custom CSS. One of the things I just hate is reading poorly indented CSS. It’s like reading poorly indented HTML.

>>Chris: I was going to say it’s the HTML that gets me. I don’t know of any other software that puts it out like Thesis.

>>Rick: Nope, I don’t either and I take full advantage of it in my stuff because I love ready HTML that way.

>>Chris: Yes, it’s so much easier to find stuff.

>>Rick: Okay, we’re going to the responsinator. Now we can reload this. First I need to dump the cache over in GoDaddy. Now go to the responsinator and reload it. I have to dump Chrome’s cache too. Now reload it.

Now you’ve got the logo at the top. The responsive menu in its place and all the rest of this stuff works exactly as you would expect it to work before we did anything. Now you know I totally forgot however, in the interest of time, I forgot to execute the rationale for going to a full width.

The reason for going to a full width is to have the big bands so let’s do that too real quickly. The first thing we are going to do is entirely get rid of this sidebar background. Sidebar background is irrational in a full width layout.

So we get rid of that. And now we don’t need that special template style either so we can get rid of that. Our woof woof image we’ll leave for the time being. Our paw is okay.

The only container that we want the background color of white to be in now is the content area container. So we’ll say, content area container. Now that background is white.

Then we can add a style for header area. And now is when we have to go back and rebuild our custom variables because I was planning on using a custom variable there.

Let’s go back to the Skin Editor and CSS. We’ll create a variable, remember it was color 4. It’s the dark background color. Then that value was this one here. Save that and then let’s create the other variable which was the default button. And we called that button. And we had our text file that we pasted into that. Hit save. Save our CSS.

Now that we’ve done that come back and we’ll reload this with the styles back available to us. So header area then we’ll say background color colon and now we can grab our color 4 from there.

Then we’ll do our footer. Actually we don’t need it in the footer what we want it in is the footer area. So footer area, background color, color 1 and we save that. Now we should have all of our new styles available to us once we flush Chrome’s cache.

There we go. I want a little padding on top of that but we’ve got the darker green background here with the menu and the logo in it. We’ve got our revised input button. We’ve got our revised link button and we’ve got the green color that goes all the way across.

We could actually get rid of this top padding so that the body background doesn’t show through like that. I probably would do that. Then I might change this background color. But you’ve got the idea. That’s the idea of this, it’s not necessarily love Rick’s design concepts. It’s about how to implement these ideas.

Let’s look at it one more time in the responsinator to make sure that we are happy with the way everything looks. So it’s working. Everything has shaken out the way we wanted it to shake out.

0 Comments… add one
0 comments… add one

Leave a Comment