Build Your Own Business Website header image

Using and Styling a Vertical 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.

In this video, we discuss how to insert a WordPress navigation menu in a sidebar and style it using custom CSS.  We show how to insert a CSS rule to make the width of each menu consistent, remove the border, adjust the font size and add color to the hover and to the nav menu.

Video Transcript

So let’s go ahead and begin with a navigation menu, vertical navigation menu. So this is the site that I was working on last weekend. I still actually have it working properly but if we go to the dashboard and then down to Appearance and Menus, you can see I’ve created this menu that I’ve called sidebar menu and in that menu, I have placed all the pages in the site. So these are all the elements that are inside of this new menu and I saved it.

And then I went to widgets and in sidebar 1, I dragged the custom menu widget over to sidebar 1 and from that, selected the sidebar menu. Okay so this is how we have inserted the menu into this sidebar.

And then if we go back to the site and say look at Bananas, here’s what that looks like right now. It has enlarged parts taken, the appearance of the Thesis nav menu and if we don’t make any changes to this, it’s going to be the default behavior here for this. But that’s of course, not what she wants it to look like. She wants it to look nice and interesting and so, that’s what we’re going to do here.

We’re going to open this up in Firefox and then we’ll inspect the element in Firebug and we’ll also take a look at it at Web Developer. So in Firebug, you can see here that we’ve got our sidebar, UL sidebar list and then there is a… this is the widget which is LI id nav menu 3. And then there’s the title and then this widget or this menu system creates a… wraps this menu in a div. So it’s div class menu sidebar menu container and the name of our menu is UL id menu sidebar menu and each of these things below are our ids or I mean, LIs. And the styling of the LI comes from the a, from the link.

And so, we are going to be styling both the sidebar menu and the LI id… I mean, the LI item and the link here.

So we’re going to start off by adding some styling to the overall… well, to the LI items. We’re going to make these things 300 pixels wide so that each row fills up the space first. And so, I’m going to grab the… let’s see, menu sidebar menu. I’m going to grab that, copy and so it’s .custom UL #… paste menu sidebar menu so now that’s this UL right here. And then we want to grab this id…I mean, I’m sorry… this LI. I keep saying that, don’t I? So submenu LI and then we’re going to make those 300 pixels wide. It could be… use zeros, it would be better.

Okay so now these things are all 300 pixels wide and let’s see, I want to get rid of the border that’s around these and that border is actually on the menu, on the UL menu, I believe. So if we go to UL, you have menu, it’s got this little bit of border and that border. So the first thing we’re going to get rid of is custom menu sidebar menu, I think. Yeah, we’re just going to ahead and copy this, paste it above, get rid of the LI, say border: none.

Okay and that got rid of part of the border but you can still see we’ve got a little border around this. And so, that little bit of border is coming from, I think it’s coming from this actually, this LI here. Maybe not, maybe this is coming from the a. Let’s see, border style solid, border width… okay, so it’s coming from menu a so we’re going to get rid of that there too. So we’re going to go ahead and copy this and that’s going to be a and again, I’m going to say border: none.

Okay so there we go. We got rid of all the borders there. So now, what we want to do is add some color. Well first, let’s address the text.

So most of the styling, just like the Thesis nav menu, most of the styling that you she here really comes in this link. So in this case, UL menu sidebar LI a… we could probably even get rid of the LI where and it will be a little bit similar to the way that Thesis does that. So we’ve got border: none, let’s give it a font size of 14 pixels. It’s going to drop it down a little bit and then let’s get rid of the text transform and it’s none, I believe. Is it none or is it normal? No, it’s none, right. Okay, got rid of the text transform and then I think at this size, this spacing is too great. So what we’re going to do is we’re going to say… what is that? It’s not…I’ve forgotten what that’s called now. Letter spacing, that’s what it is. So we’ll go letter spacing and then we’ll just make it 1 px instead of 2. It’s a little bit better-looking and then let’s give it a color. Now just for grins, I’m just going to use this little eyedropper here, Colorzilla, to pull a color out of the image here. So I’m just going to grab that yellow color. We’ll copy it and we’ll say background color colon that color there and I’ve got that color. And then I think I want to create a hover color so now, we’re going to take this, copy it, go down below… colon hover and then we’re going to get rid of all that stuff that we don’t need under hover. So background color and then we’ll use the Colorzilla again to pull a green color out. Just grab that green and grab that color. Okay so there’s the green.

Now I want to get rid of the underline so we’re going to say text transform… no, no… text decoration: none and I’d like it to be white… color: white. So now, when we hover over that, it’s white and we’ve got our green color.

Now, I know that Juliet wants a smaller space in between these as well. And so, what we have to do is identify what that bottom margin is coming from and I’m guessing it’s the LI items. And so, yeah, there’s that margin bottom. Effectively kill it here, it’s just going to go straight, right? So you could do that but what we’re going to do is we’re going to address this LI and actually, we can probably do it right here with this LI. Just say margin bottom colon… I don’t know, 3 px. We’ll draw this down a bit, there we go. And you know, if we wanted it to be a little bit wider, we could make it 5.

Okay so there is… so that is a method of inserting a you know, a WordPress navigation menu and a sidebar and then adding custom styling to it using custom CSS. And I hope that hits Juliet’s questions, I guess we’ll see.

2 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
2 comments… add one
  • bea alvarez October 19, 2011, 3:53 am

    Great tutorial! Thanks a bunch.
    I would like to know how to customize this custom widget menu to avoid the drop drown effect in sub-menu items.
    Is it possible to have these sub menu items visible underneath the parent menu item with indentation, a bullet or even add an image to it?

    • Rick Anderson October 19, 2011, 7:19 am

      So what you’re trying to do is to circumvent the Thesis menu behavior. It might be easiest simply to use a plugin that allows you change the ul class that is assigned to the menu. By default both WordPress and Thesis add the class .menu to a menu. Because of this all of the Thesis behavior is automatically transferred to the new menu.

      There is a plugin called “Widgets Reloaded” that allows you to change the name of that class. Once you change that class name all of the Thesis behavior disappears and you can write what you need from scratch.

      This would be a perfect question for a Wednesday Live Call in session. I’d be glad to demonstrate how to accomplish it;.

Leave a Comment

Cancel reply