Build Your Own Business Website header image

How to Convert a Flash Site to WordPress & Thesis 2.1 – Part 13 – Add a Responsive Header

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

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.

We’re nearing the end of the conversion of this flash site into Thesis 2.1. We just finished adding an image gallery and next up we’re going to add a responsive header.

Add Text Box for Mobile Logo

We’re going to take this logo image and place it on top of the header image when it’s in a mobile device. To begin we’re going to copy that text box content again and then we want to come over to this Skin Editor. Let’s just update this just in case we missed it.

Come over to the Skin Editor, go to the page template and we are going to add a new text box and we’ll call this Mobile Logo. I’m going to give it an id of mobile_logo then I’m going to drag it into the container above the header. I suppose I could probably even put it inside the header if I want to but I’m just going to leave it there. Save that template and then come over into the same thing on the front page. Mobile Logo and then drag that into the container and save that template.

Then we’ll come back over to the main part of the site and go to Skin Content. Open up our Mobile Logo and paste that same code. We’re going to disable the automatic p tags for it, save that.

Adjust Media Query for the Logo Image Placement

Now, we’re going to have the image sitting up here at the top, right which is not what we want and so what we’re going to do is essentially create a negative media query which will hide this element from anything larger than a given width.

In order for us to do that we have to come look at the media queries that Thesis 2.1 created. We’re going to inspect the element and go to resources and open up our css.css. Scroll down here to the bottom of our media queries. Media all max-width:450, media all max-width:650 and media all minimum width 900 pixels is what we’re going to do.

So we’ll come over to our Custom CSS and all the way down at the bottom of it. There’s its opening and closing braces and instead of max-width it’s going to min-width and then we’ll say 901 and then we’re going to say #mobile_logo display:none.

What this should do is that anything that has a minimum width of 901 pixels should hide the mobile logo so it’s only going to show up on something that is 900 pixels or less. Let’s save that and go to our site. You can see it’s not there now. Let’s go look at it in the responsinator, okay now you’ve got it sitting up there at the top in the mobile view.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one