Build Your Own Business Website header image

How to customize the appearance of the navigation menu

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

A member asked about positioning the Thesis Navigation Menu and adding background images as backdrop in navigation bar. We discussed lessons available on the site and looked a various configurations for the Navigation Menu.  Included in the video is a discussion of:

  • Resources available in BYOB Video Lessons for nav customization
  • How to position your nav menu beside the header image
  • Available codes for the positioning the nav menu
  • Using background images in the nav menu
  • Assigning background images to individual menu items

Video Transcript

Rick: So the question… so you’re asking the question about the Nav bar. In what way do you want to change its location?

Sam: Okay I saw in one of the Thesis… many of the blogs that are out there. There was a…some girl had posted… I think it was the eCommerce one, how to kind of do an eCommerce thing and she had this one about t-shirts and stuff and it was… it looked really good. But her Nav bar was up to the right where your… you know, yours like saying right now, I’m looking at your page where the subscribe now button is, it’s up in that right hand corner. And then I’m not sure, I don’t remember but anyway, one of my ideas is also to add a graphic to the button instead of just the basic you know, WordPress block thing. So it was kind of moved out to that right hand corner.

Rick: Sure and so you know, actually, I have a video on this. Under Video Lessons, let’s see… this is under…where is that? Adding a Custom Image Beside… image in the header, not side of it. Well, I… no, that’s not it either. I do have a video on creating background images or on using a background as the backdrop for a navigation bar. And so, that video ends up with something that looks kind of like this where you’ve got a concept video, I’m sorry… concept image in the background and then the rest of the menu sits over the top of that. So I do have a video on that and that is this one here that the background image in the Thesis menu. I also have another video…oh, adding navigation beside the custom image header. So in this one, essentially, it creates this where you’ve got you know, a custom image here and then you’ve got navigation menu off to the side and I think actually, I’ve got a demonstration site set up for that. Yeah, so you’ve got this ability to have a small menu off the side. Is that what you’re talking about?

Sam: Yes sir, that’s right. Yes.

Rick: Okay so that’s the… the mechanism for accomplishing this really is having a couple of HTML structures that fit into the header. And so you have one HTML structure that is that holds this image and then you have another one that holds the navigation bar and you call that navigation bar inside of this HTML structure. And so the code for that is here. In this case, what I did was well, created a div called “my custom banner” that contained both that banner image and then also, no actually, no that’s right. The div only contained that banner image and then what I did was I hooked that banner and then hooks the Thesis nav menu after that to the hook before header.

Although it could also be the Thesis hook header and then customize or add a CSS to it so that that custom banner floated left and the menu floated right and then they sat side by side. So this is how you would move it up into the header space and then the method for putting a background image back in there is via the other set of videos. But then you also have the possibility of pardon me, this kind of a menu where this is actually an image that sits behind the text and each one of these is an individual image. And it could just as easily, I mean, actually, each one of these is the same image. But you know, you could put a red dot here and a blue dot there and a green dot there and a yellow dot there and a pink here and a star there…each image being completely different than the other and each one of these menu choices. Now is that something you were thinking about?

Sam: Yes sir, exactly.

Rick: Well the way to do that is to assign a background image to each one of these menu items. And the top level menu items are called “tabs” and each one of them has its own specific tab number. And so for example, if we look at this in Filezilla, select inspect element, you can see here that this is the menu, right? So the menu stretches all the way across and what I’ve got is a background image back there behind everything and then on top of that background image, I have a background image that fits in these tabs. So you’ve got tab 1, tab 2, tab 3, tab 4, tab 5, and tab 6, right? Each one of those is its own individual item and so you could assign a background image to tab 1 and that background image could be different than the background image you assign to tab 2 which could be different from the one you assign to tab 3.

And so if we look at the CSS for a moment, for just designing an image to a tab, that looks like… let’s see… custom home, oops…too far down…custom menu styles that look like this where you give it a height and a width. Well, you know, I’d want to change up the formatting of the text itself but then you assign it a background image that is the same height and width as you’ve spelled out. You’d assign a background image then you make sure it doesn’t repeat itself so it only happens once and then you give it its position whether it’s top center or bottom center or top left or top right or whatever. And in this case, since it’s one image, I can assign it to menu A and it’ll apply to each top level item. In fact, if I assign it to menu A, you would get similar to what Brian has on this site where he has described this tab for this…for menu A but unfortunately, it addresses itself to the rest of the items as well and so he doesn’t like the way this looks.

And what he should have done is he should have… well, if you were going to do this, you design it to tab 1 and tab 2 and tab 3, rather than menu A so that you could specify exactly which image goes there. But that is the selector to attach an image to this item only and not that one, that one or that one, is tab 1 and then tab 2 for the next one over and tab 3 for the next one over and so on and so forth. So that is the selector that you would create a background image for. Does that make sense?

Sam: Yes sir, it does. Thank you.

Rick: Okay, good. Do you need any follow up information on that?

Sam: No, I think for now that’ll be it. I just got to go play with it now so…

Rick: Okay. Well, great. Good luck, Sam. Thanks for joining us.

Sam: Thank you, really appreciate it.

Rick: You’re welcome.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment