In this session we address a member’s question about how to create a navigation menu that will allow it to be styled vertically in the sidebar. The key to this is changing the menu’s CSS class and we show you how to do this with the widgets reloaded plugin.
May I ask you a question regarding the vertical navigation on the sidebar? Because I was successfully implementing that on my test site and my question is regarding the drop down menus. Is there a way to just show that menu in there, in the (00.23) as a list without the drop down effect?
Yes, there is. But what you have to do is you have to give the menu a different class name. For example you know, this menu has a class name of menu, right? This is a WordPress menu but the WordPress menu automatically gives it the class name of menu which is exactly the same thing as the Thesis menu does. Thesis menu gives its UL a class of menu as well. And so what happens is all of the Thesis CSS gets automatically applied to your new WordPress menu. And the normal method of installing a WordPress menu doesn’t give you control over that.
So if we go to… let’s see, let’s go to menus, Appearance and Menus. And actually..
Because I was looking if there is a form field…
Here it is, here it is. See this on the screen options? You can come over here and go to CSS classes, show advanced menu properties, go to CSS classes and hit save there. And then I believe that we can… where does that CSS class get applied? So primary menu… okay, I said I want to show CSS classes. Maybe the classes are…
Not for the menu itself. I wonder if we get a chance to… when we create a new menu, if we get a chance to do that. Let’s call it category for a second. Create a menu… is it going to give me a chance to… no, it’s not. It’s not giving me a chance to add a custom class there.
So then what you would do instead of this is you use a plugin like Widgets Reloaded and we’ll go do that instead. So plugins, let’s see… search for Widgets Reloaded. Widgets Reloaded has a plugin… or it’s widget replaces the standard WordPress menu widget and it gives you the option to assign a class.
So now if we go to our widgets and let’s say in sidebar 1, if we just take our menus plugin… okay, where did you go?
Yeah, I don’t see it. It went on vacation.
Boy, it looks like it doesn’t… I don’t think I’m using it here anywhere. Let’s see…
Does it come by default with Thesis or WordPress?
It does come by default with WordPress and what this plugin used to is it used to replace that with… navigation menu. I’m sorry, there it is. It replaces the menu that comes default with WordPress with this one. So now you can give it a container class of say, my menu… oh no, there it is. There’s its menu class, nav menu which is automatically going to override what happens by default which is menu. And so if we come over to the site now, refresh that. Okay here is the… this is actually the… this is the menu now. It doesn’t look like the menu because it’s just an unordered list and it also looks like a menu because of the way it’s… the way that text is centered. But having said that, you can now go and ahead the styling to it because it has been… now, instead of being class menu, it’s now class nav menu.
I think we can see what happens if we delete that, go back to menu… now, it look like this which is what’s going on here.
Yeah, that is the same style than the one up there.
So that’s the tool to help you do that. All you need to do is give it a different menu class and you got it made.
Sweet. Oh, that’s fantastic.
Yeah. Thank you so much.
Hey, you’re welcome.
I’m very excited about taking all these tutorials and I see all the knowledge that you have to share and this is fantastic.
I’m delighted to have you with us.
Thank you so much.
You have a great day.
You too. Bye bye.