In this session we demonstrate how to add an additional banner above the promo bar in the Promo skin by creating a text box as the secondary header and placing it into the header inner box. We also show how to add an image in the sandbox page and add it to the new box created which adds a header image down below the menu.
How to add an additional header under the nav menu above the promo bar in the Promo theme. Well, are you still with me here? It’s hard to answer that question without being able to ask you questions about it. Okay, I just can’t hear you Mark but if I understand you correctly you’ve got a little logo here and under the menu you want to put some kind of an image under this menu, if I understand you correctly. If you have a microphone and speakers you might… Okay a full width one.
Well then the thing to do would be to create another box in this Promo skin that you would put in between them. I think I have the Promo skin installed here, we’ll activate it okay and we’ll come over to the skin editor and so you’ve got this header here and you’ve got the inner header with the site title and site tagline and then a navigation container and what I would do is just put it above the navigation container. Oh no, you want it below the menu so I’ll just put it here.
So you could create a text box, let’s take a text box for example and we’ll just call this Secondary Header, shift+drag it into the inner header box, drop it down below navigation, save the template. Of course this is only going to happen on the home template and then we’ll come back over to the site and let’s go to a sandbox page. Okay, sandbox and let’s see if I’ve already got a big banner showing up some place.
I don’t so we’ll just come down here to the bottom of this and we’ll add media and this is a big one I think, 1008 yeah, okay. I think I would probably center align it, I would link it to a custom URL, I would link this to the home page or link it to whatever you want to link it to actually. Obviously it doesn’t really matter and then add some kind of title, make sure we’re using the full size and now I have that right here that I can copy.
Come over here to skin content and look at my Secondary Header box and paste that HTML there. We’ll go ahead and disable the p tags, save the options, view the site and go to my blog page and there I have this header image. Now obviously, I don’t have as much room for all the things here as you do but go to my header image and I’ve got this header image now down below this. If this were smaller then this would be lining up with it and this image would be down below it.
That’s interesting, we might actually just want to clear both on this. I didn’t clear both anyway, navigation my position was absolute. Well, there may be a little bit of fuzzing around you have to do in order to make your alignment work up correctly but that’s how you actually add it. In your case, because your header image is quite smaller and your menu is quite small, it could very well be that simply inserting that header image in there is going to do the job.