Thesis Website -Create Header with a Logo Image Beside the Navigation Menu

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.
Visit our website at http://www.byobwebsite.com/ for more video tutorials on building and customizing your own Thesis themed WordPress website.

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.

For the lesson and full video transcript visit: http://www.byobwebsite.com/answers/how-to-create-a-header-with-a-logo-image-b...

Category:

Education

Tags:

• Header
• Internet Explorer Issues
• Thesis Header
• Thesis Nav Menu
• tutorial