How to Create a Header with a Logo Image Beside the Navigation Menu
http://www.byobwebsite.com/answers/ho...
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.