In this session we show how to configure a header with a menu to be responsive in Thesis 2. We talk about what to do with the header image and discuss the different ways of displaying the menu by adjusting its sizes and using a background.
Member: The header banner that you helped me with, I realized afterward that since this is a responsive theme, that doesn’t translate well on the iPad or the iPhone so really, the only thing that I can think of, well and also the menu, we had the menu up in that top blue bar and I decided that you know, because then, when you go into something smaller, it just covers the entire logo so I told the one I’m creating this for that the menu area, it need to tie it on menu area.
Rick: Well, so first, this image here, if the whole thing has to be responsive, you don’t want it to be a background image.
Rick: You want it to be the image inside of this header columns thing. This header columns, single column thing has a place for you to put the header image in it and I would just put the header image in that because what will happen then is, it will shrink.
Member: It will shrink.
Rick: Right, it’ll scale down then if it’s put there and if it scales down to the point where it’s too small, you could do one of two things. You could either one, make this the header image and make this a text in a text widget so you’d use the 2 Column header.
Rick: At which point, when it got to be small, the text widget is dropped down below this header image or you could have two different images and one of them is the header image, the other one you just put in a text widget or something.
Member: Now, in your opinion now, there’s still no way to put the menu up above the logo, it either has to be all the way on the right-hand column or it can’t span both columns?
Rick: I see what you’re saying. Well, and which menu are you talking about, are you talking about the blue menu here?
Rick: And what you really wanted was you wanted it to sit right here and go over, right?
Member: Right, but then when you put it on a smaller device, it covered up the logo.
Member: So in my opinion, the best way to do this is to just give it its own space the way I’ve done here and remodel the banner there and remove that blue strip at the top.
Member: But I just didn’t have any other better answer for her.
Rick: No, I think you’re right that it’s going to be really difficult to make a menu here responsive in such a way that it doesn’t interfere with everything else.
Member: Right. The other thing she wants to do is above that blue bar, the very top in that white section, she wants to put another small menu. Of course I told her that if you put a menu there, again on a smaller device, it’s an issue, open it on a small device, the menu will again start to cover the logo so did she really want to do that.
Rick: Well, now it might not be too bad there especially a small menu because what you would do is you would just let that area get taller, right so when the menu starts to stack, you know, this white space just gets taller and it just sits on top of the blue line so the header image is no longer up to here, your header image just stops at the top of the blue line.
Rick: And then this..
Member: So that would be above the header area rather than in the header area then because right now..
Rick: Yes, it would be above the header area, right.
Member: Okay, because she’s trying to get everything in the header because she wanted those rounded little corners to show.
Rick: Well, you can still do the rounded little corners thing, it doesn’t have to be in the header to be rounded at the top. You could use those rounded corners, I mean you could create an auxiliary nav menu area that goes on top of this, it’s essentially just like this one here, right except it’s got a different name so that it can be styled differently and then you just make this background image the one with the corners, you just make that a background of that thing and just put the menu inside of it and it’ll be fine.