Build Your Own Business Website header image

How to Create a Header with a Logo Image Beside the Navigation Menu

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

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.

A member asked for help in creating a header with a logo image on the left and the navigation menu on the right. This requires us to have 3 images, a main background image, a logo image and “current” menu condition image. We demonstrate how to add a background image for the header and then create a function that adds the logo image and the navigation menu to the header. Then we style all of this with CSS.
One interesting thing we address is a problem with IE8. Thesis has a special CSS rule for IE that makes it so our menu doesn’t display properly. We troubleshoot this and then fix it.

Video Transcript

Okay, yeah Rick, you can hear me okay now?

Yeah, it’s soft but I can hear you.

Alright, yeah. My question is quite simple. I’ve been looking at a site which has a very thin, slim navigation menu right on the top and it looks like there’s no header but just this thin navigation menu. I want to recreate that. I just want to know just how that’s done and what’s the best way to structure that.

Perfect and this is the site, right?

Yeah, that’s the site yeah.

This is the site and so what this is is a background image that is repeated across the top and then it is a logo and then it has this text and then it’s got this little tiny background image for the current tab. And so I prepared this presentation here this afternoon and we’re going to essentially do that here on our Community News Case Study site. You can see I’ve already played around with it a little bit just to get some of the preliminary stuff out of the way. But what I did was I created 3 images, I created a background image, I created a little logo image, and I created this little triangle image and we’re going to apply those in this Community News Case Study site. And so the first thing to do though is to go on to our Design Options and set a few things. Actually, you’ll see that under the Nav menu, I chose a different font. I made the font larger, I changed link color and that kind of stuff, and then I made the background color all the same this dark blue which is going to be the color of the band across the top. And then I also made the border go away by giving it a 0 there.

And the other thing we need to do is go to our header, pardon me, not there. Over here go to our header, hide both the logo and the tag line and I think that’s just about it. So we’ll go ahead and save this and you can see a bit how it has changed then. So now what we need to do is we need to create a function, a function that adds that logo. Well, first the function needs to remove this Nav menu from above the header, add that logo to the header, add this menu to the header and yeah, that’s what we need to do with that. And so in custom functions php, this is the custom functions php that we’re using to do this Community News site. So here is the function that I wrote and I’m going to uncomment these lines. So the function is called…well, the first thing we do is we remove the Thesis Nav menu so it’s remove action Thesis hook before header Thesis Nav menu and then we have our function byob custom header. And the only thing we’re doing in this function is we are creating a link with an image. And that link is back to our home page so http:www.community.byobtutorial.com that takes us back to our homepage and then we just have the image address for that image. And I stored that under thesis_18 Custom Images folder and it’s called logo.png and then I added a couple other things like alt text and title to it as well and then we close out that link.

And so all we really have no HTML structure really except for just an image link that sits in here and then we are going to add this function. So we’re going to add action Thesis hook header, that’s what we’re going to put inside the header and the function name is byob custom header. So to this hook, we are hooking this function here and then after that, to the same hook, we are going to hook the Thesis Nav menu. So it’s a pretty simple structure to kind of reorganize or rearrange, to insert a logo and then to put the Nav menu beside it.

So you haven’t gotten rid of the header yet, you haven’t got rid of the header. You just put this Nav menu inside the header.

Yes. What I’ve done is I’ve put the image inside the header first and then after I put the image in the header, then I put the Nav menu in the header.

Right, right.

Okay. So I didn’t get rid of the header, I just turned off the logo and the tag line so there’s nothing displayed and then I add image and put the Nav menu back in the header. You may remember that the default location for the Thesis Nav menu is the hook before header, right? That’s where it’s hooked right now which is why we removed it from that hook. Okay so that’s all the code, that’s all the php and HTML code. Everything else becomes css. So I’m going to upload that custom functions php file, upload that to the site, come back over here now and refresh it. I must have failed to upload it. Let’s see, let’s just make sure we’ll connect to the right place again. Community… I might have had the wrong site connected. So Themes, thesis_18, custom… actually, it’s important to notice that I put those 3 images in here. So there’s the logo.png, there’s that header background image.png, and then there’s that little white arrow called current.png. So those 3 images are also on the site now. So then we go to custom functions php and we upload that and let’s try that again. Okay, I have done something wrong, oddly enough even though I practiced this. What did I do wrong? I didn’t save it. You don’t practice saving, I didn’t save the change. Okay, there we go. Now, we’ll refresh this page.

Okay so there’s our little logo and here is our Nav menu and now what we’re going to do is we’re going to use css to give you all the rest of the effects that you’re looking for. And so we’re going to open it up in Firefox in order to make that work and refresh this in Firefox. Okay and we’ll go to custom css and I’ve given us spots to make these changes here. So the first thing we want to do is give ourselves that background image and so that’s going to be under body and this background image is 20 pixels wide and 90 pixels tall. And we’re going to repeat it all the way across the top over and over and over again.

So that is going to be body.custom and then opening parenthesis and or bracket and closing bracket and then background image: and then…let’s see. Yes, URL opening parenthesis, opening quotation marks… I think it’s single quotation marks actually. http://www.community.byobtutorial.com/ and in order to avoid typing all the rest of the stuff… let’ go to Images. We’ll pick up wp content themes Thesis_18 custom and images off of Filezilla and let’s see… then back slash and then that was called… I forgot. It’s called headerbackground.png so we’ll copy that, come back over here, paste it, and then single quotes and then closing parenthesis and then semi-colon and over. Now, is that showing up yet? It doesn’t look like it’s showing up yet. Oh yeah, there it is. So right now what it’s doing is it’s repeating both in the X and in the Y direction so what we’re going to do here is say background repeat or repeat:repeat-x; So now it only repeats in the X direction. So if we close it, you can see there’s our band.

So the next thing we have to do is we have to make this space here, we have to make it transparent so that you can see the band behind it. And if we right click on that element to see what that is, if we look at div id page, you can see that it’s got a background color of white ffffff so this what we need to change in order to make that background color go away. So then we’ll come here and we’ll say .custom #page and then that is going to be background color: transparent; Okay so now we’ve got our background image running all the way across there.

The next thing to do then is to bring this… well, first let’s just split… let’s move these things into place. So we’ll start off with header and so you can see the header’s got padding and page has got padding. So we’re going to get rid of all of the page padding actually or at least the top padding. Padding-top:0px, okay that popped that up and we’ll leave the header padding alone for a moment. But the next thing we want to do is we want to take this image and float it left so that the menu bar can come up beside it. So that is going to be .custom #header because that’s where we attached it… img and then we are going to say float left. Okay so now that floated left and allowed the menu to drop up beside it. Although I think we want the menu to float to the right so we’ll do that here real quick. We’ll say .custom UL .menu which is… you can see the entire… you can see what we’re talking about is this right here, the UL class menu.

And right now, because we haven’t told it to float, its space actually goes over the top of the graphic even though it doesn’t. But once we float it to the right, that’s the space given to the menu will go down to its minimum size. So float:right; Okay so now, it’s dropped over there and UL menu is only as big as the menu is and we have you know, a whole bunch of that functionality…whoops. Something funny happened though. You know what, I think I screwed up my css in here someplace. What did I do wrong? Because now my page is entirely thrown off…oh, something happened to content to… what did I do to make that happen? I’m going to stick this and then refresh that screen, see what happens. Padding top 0 pixels background color transparent custom header image float left custom UL menu float right.

Okay so the problem is caused by this statement – custom UL menu float…okay. Float right is correct but we also want to clear both, clear:both; Is that it? No, clear right not left. Nope, that didn’t do it either. Crazy, it did not do that to me earlier today and so why is that the case? Because I don’t need the clear… float right menu float left… you know, it almost feels to me like I’ve got an error in here that’s throwing something off. If I float left, it doesn’t fix it. If I don’t float at all, that does fix it. Odd.Okay, well I’m going to leave that alone for a moment while I think about it. I’m not exactly sure why that…what’s happening is with this floating right, it is giving space in between Community News and this for it to pop up, right? So I could pop it in between is what’s happening so it’s trying to move itself up in between and then as it moves over then this doesn’t have any room anymore and then it drops down below it.

And so now I would have thought that content would have floated left. Well, maybe I just say clear…maybe I clear both under header. Let’s try that. So .custom #header clear:both; and then this should allow float right. No, that didn’t work. Okay, well I’m going to leave that float out of it for the moment and then try to figure out what that problem is. Okay so but we still have…and we could easily just give ourselves some margin right, to move it over too. Margin left: what is that? 400 pixels?Maybe 450. So now our menu pretty much goes to the edge so that gives us the same result although as soon as you add a new menu item, we will need to come back in here and change that. Now let’s you know, there are a lot of different ways to get a task done and I figure, as long as it looks the way you want it to look, it’s almost good enough. Okay so…Brian says, “Welcome to float hell.” And yes, you guys do get a chance to see me troubleshoot problems. Okay, even when I practice beforehand. So we got this… the only thing we only have left to do really is to get this little background image to show up under the current tab.

And so…and this is going to be similar to an answer that I gave this morning actually, I think, because what we have to do is we have to reference…well, the first thing we have to do is we have to make these menu items bigger because what we’re going to do is we are going to make that little triangle a background image to these tabs and I guess I must do that first. So we do .custom .menu a and then we’re going to rather type this stuff, we’re going to steal this background image and paste it there. And then instead of being header background png, it is actually…what did I say that was? Current.png, okay and we don’t want to repeat so instead of background repeat X, we’re going to say no repeat. No repeat, I think I need a hyphen in there. Yeah, no repeat and then we need to give it a position so background position: and that’s going to be bottom center. Okay, so now with the triangle here, now we need to make the bottom of this tab down to the bottom of this thing. And so what I would do then is give it myself some padding…oh, pardon me. That’s current menu a and actually, what we really want here is .current a and now only the current one has the arrow.

But now we need to make this larger so that the arrow is down where you want it and so we’re going to come… we’re going to steal most of this code. Copy, paste it above it, get rid of that current and we are going to do what? We are going to add padding. What happens if we give it 20 pixels all the way around? Okay, margin left, let’s make it 400. Let’s make it 350. Okay, okay that works. So then that’s not quite enough though for the bottom. So then what we’ll do is we’ll say the top is 20 pixels. Well actually, we’ve got a little…we’d rather this just be a little bit more centered so let’s make the top 10 pixels. Let’s make left and right 20 pixels. Let’s make the bottom 30 pixels and then 20 pixels. Okay so now this is a little bit better centered, needs to be more than 30 pixels though, looks like. Let’s call it 30, is that 5 maybe? Almost. Let’s see, let’s make the top a little bit more. Let’s make it 15. There we go.

And so now what happens is that little arrow, bottom of that arrow is sitting you know, on the bottom line of the blue and hang on a second…and it would all be perfect had I figured out that…if I got that float thing right. And I’m not quite sure why that…oh, let’s get rid of some of the… let’s get rid of the padding on the left and the right of this… of the header. So the header…oh, it doesn’t have much padding left and right. The top padding is fine so in terms of its padding, it’s got padding top and bottom, padding left and right is 1.1. So we could say here padding: 2.2 em and then 0. So that covers…this gets top and bottom and this gets left and right and that punches… gets rid of some of this space here. So does that look basically what you want it to look like?

Yeah, exactly Rick. Fantastic.

Okay. So I will…I’m going to post this code…well, first actually, we have to do… all we’ve done is played with the code. The very first thing we have to do is add it to our custom css file now. Copy, custom css, and paste it. Okay, save it, upload it, and just check it. See if it looks right in these other versions of the site. Okay, it does. Let’s look at it in Internet Explorer. Here’s the… drumroll please. Let’s see whether or not it works in Internet Explorer. It’s not hard to get stuff to work in Internet Explorer but it’s important to test because…there it is. It’s not working in Internet Explorer and because it needs that float right. If we open this up in…or float left. Float left would work also. If we open this up, open up the developer tools and say go to css and go to custom css and then if we scroll down here to…where to go? Image, okay that’s float left… UL menu. If we add an attribute, let’s say float: right. No, float left. Isn’t that funny? Why would that be the case? Okay now I’m sorry, I suggest that we check it out here. Let’s see, okay what am I doing wrong here? Let’s refresh this thing. It looked better a moment ago. Okay, go back to developer tools, custom css. You know, it’s because we need to explicitly set… I forgot. In Internet Explorer, that’s the one IE thing in Thesis. You know, Thesis got an only IE stylesheet and it makes the…it sets the width of the menu to be 100%. I think that’s what it is.

I think we need to come here and we need to say…we just need to give it an explicit width. So call it width: … well, it looks like it’s about 500 pixels, 500 px. Okay, 450. No, that’s not it. 500 px, that was it. So we need to give the menu item an explicit width as well because without an explicit width, the IE fix for the Thesis Nav menu, breaks our little scheme here and I should’ve remembered that. But we’ll just go ahead and come back over here and do that to it. UL menu and then width: 550 px; Save the document, upload the document, refresh the document. Okay and what else did I do? I think I had a float on that too didn’t I, that I forgot about? Did I? Custom css, UL menu, add attribute, float. If I float left, what happens? If I float right, what happens? So…oh, it didn’t. I didn’t upload the silly fix thing. I didn’t upload custom css. Okay, refresh it now, there we go. Actually, it’s a good thing we came to IE because I totally forgot that Thesis has this extra Internet Explorer setting for the Nav menu which sets it width to 100% which then makes… which interferes with its ability then to float up beside this in Internet Explorer. That doesn’t apply in any of the other browsers but it applies here. So well, any other questions about that?

That’s brilliant. Thanks so much Rick and that’s a fantastic…I certainly could understand it now.

I’ll post the code on the forum so that you can you know, capture the code and practice with it too. See how to make it work. Okay? Great anyway, it was a fun little trick so I enjoyed working it out so…

Okay, thanks Rick.

You betcha. Bye bye.

1 Comment… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
1 comment… add one
  • Susan Ngigi September 30, 2017, 5:17 am

    Hello Rick,
    Hope you are well. I have been following you on youtube and I like your work. I wanted to know how to add new text tag line to the header. please kindly assist. I have shares a message with you on skype as susancikudenise. hope to hear from your soon. Do have a great day.

    Thank you Susan

Leave a Comment

Cancel reply