Build Your Own Business Website header image

How to Create Multiple Menus with Multiple Drop Down Levels – Part 3 – Style the Menus

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

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.

This is the third video in a tutorial series on how to create multiple WordPress menus with multiple drop down levels. In this session, we show how to create different menu styles. Using the BYOB Thesis WP Menus, you can add up to eight different menu styles and apply them to as many different menus as you wish.

Video Transcript

Rick: So does that make sense?

Member: Yes, that’s perfectly fine. One last question, let’s say if in terms of… can we just go back to WP menus section on dashboard?

Rick: Yeah, it’s right here.

Member: Yes, WP Menus. How do you, when you come to styling the second column, what is the use of the second and how do you use second and third column? Do you use third column at all or you leave it out because you’re not using Thesis Nav Menu? And if you have two different styling for the first and the second menu?

Rick: Well, you can have up to eight different menu styles. And you can apply those menu styles to as many menus as you wish. So for example, let’s say you got…let’s give ourselves two menu styles. And the first menu style is the blue menu style. Save that. And the second menu style is the green menu style. And save that. Now the main menu can either be blue or green. And the category menu can either be blue or green. They could both be green or they could be the same as nav menu. Now when we say “the same as nav menu” what we mean is the settings for some for most that you do in Thesis Design Options. So you have this Thesis Design Options Nav Menu, I mean you can make your link text red right? And we could make our hover background yellow. Ok, this is now the thesis Nav Menu Style. And to the extent that those menus use the Thesis Nav Menu style, then we style that way.

However, if we instead of using the Thesis Nav Menu Style, we use… well and so this third column here, gives you the opportunity to add additional styles to the Thesis Nav Menu. So for example, you could have normal spacing, you can get rid of all caps, you can make the text bold and if you hit save, these are things you can’t normally do with Thesis Nav Menu, but you can do it here and will apply as long as the Thesis Nav Menu applies to those, the Thesis Nav Menu Style. Now as soon as you go and make this style Blue instead and let’s… yeah… Menu Color that was I looking for. So your link text color now can be blue. Right? And we can hit save. And we come back over and refresh. And now this one has the styling of the blue menu and this one still has a styling of the Thesis Nav Menu.

Now you could also give this one the styling of the Green Menu. And then nobody has the style of the Thesis Nav Menu. Actually it’s there you just don’t see it, and the reason you don’t see it is because the text is white and background is white. But if we make our text style, you know green. And let say we make the background colors this color of gray. And let’s see let’s make the hover color yellow and hit save. Ok, nobody is using the Thesis Nav Menu anymore, now your category menu is using Green and your top menu is using Blue. So that’s how those things work together.

Member: Got it.

Rick: The Thesis Nav Menu style is going to apply to anything that you say same as Thesis Nav Menu. And if you are using the Thesis Nav Menu it automatically takes that. But if you’re not using a Thesis Nav Menu, then the other menus automatically takes the Thesis Nav Menu until you define the other menu styles.

Rick: Ok, is that makes sense?

Member: Yeah, absolutely. Perfect.

Rick: And does that really answer the question about how to organize the menus and everything?

Member: It does Rick, it does. I’m going to have a try out your advice.

Rick: Ok.

0 Comments… add one
0 comments… add one

Leave a Comment