In this session we show how to add a background image to the Nav Menu in Thesis 2. The Nav Menu doesn’t have a way for us to add a background image other than by creating a new single element styles package. We show how to make the background transparent by using the menu package itself. We also talk about a future lesson demonstrating how to add individual images to the menu to have different images for each menu item.
Member: And like at that time too, you had also… like say what if you want a background in the nav menu?
Rick: Well so the nav menu does not currently have…
Member: Like a background image, I should say.
Rick: Right. So the nav menu doesn’t have a way for you to scribe a background image. So the way you would do a background image in the nav menu then is to actually create a new single package. So you’d come over here and say a single element style package.
Rick: Add the package. Actually, what I really want to do first is add an image. So let’s just choose a file, come over here to websites, BYOB website, graphics, tutorial graphics and then navigation menus. And I think menu background… I think this is the one. So add that… yeah, there it is. So there’s my background image that I’m going to add to this menu and then come back over here to css. Well actually, let’s go back to HTML for just a second. The nav menu has menu as its class, okay. So then come back over to css and we’re going to add a single element style. And the name is going to be menu background. The css selector will be .menu. Reference will be menu background. Come over to our options, go to our background, set the background image as that. We’re going to only repeat it in the x direction so we’re not going to repeat it vertically. We’ll only repeat it horizontally. And pretty much I think we can just say save.
Let’s see, come over to package though and let’s copy the reference. Paste the reference. Now we come over here. Okay, let’s save that. Yeah okay, so I’ve now added a background image to the menu. Now I also need to make the backgrounds transparent for these which I can by using the menu package itself. So where did that go? Menu… so I could come over here and go to link settings and links and say, this has got a background color. I could swap out that for transparent and now no color is going to show there. Come back over here and look at it and now that’s all… shows up right.
So that’s what you have to do in order to put a background image like that. On Wednesday, I’m going to probably demonstrating how to add individual images to the menu so you’d have a different image here for each menu item.