Build Your Own Business Website header image

Part 20 – Set up the Menu Styles

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.

The next thing we are going to do is to set up our styles on the new site. We’re going to start off with our menu style and the way we’re going to style this is with this new box I just created. It is the Thesis Style Manager Box and will be available to everybody soon.

Thesis Style Manager Box

Let’s come over to manage boxes. Upload a new box and choose Thesis Style Manager. Go ahead and save the box. What this does is it adds two menus. It adds the style manager and it adds additional styles.

The Additional Styles Section

We are going to start looking at additional styles. There’s a whole range of Thesis Classic styles that you can customize. You can have as many styles as you want. You can have as many container styles as you want. You can have as many widgets styles, as many text styles, link styles, list styles as you want plus you can have custom media query stuff.

Right now there aren’t any styles. It does say Un-named menu style 1 but anytime you see something that says un-named it means that first you have to go create it and give it a name. Then you can come over here and style it.

The reason for that is that I don’t know how many menu styles you want. You might want 20 menu styles so if I give you an arbitrary number, you might want one more. The only way to do that efficiently without making everybody wade through some number of menu styles is to have a system that scopes the number of styles you want to use and that’s where the Style Manager comes in.

The Style Manager Section

The Style manager scopes what you want to do. It essentially allows you to choose how many menu styles, container styles, widgets styles, text styles, link styles and list styles you want to use. Then it gives you the choice of naming them.

Add Our Menu Style

Let’s come over to choose the elements to configure. Actually let me point out that if you come over to Menu Style Configuration there’s no menu styles right? Well, we’re only going to need one menu style so put in 1 here. Let’s give that one a name so I can identify what it is on the other page. I’m going to call it the Main Sidebar Menu.

If you have a bunch of styles the description you add here helps you figure out what the style is. This is going to be the Original Sidebar Static Menu. Let’s save this now.

Know the Selector You Need to Style

Go back over to additional styles. Choose menu and now we’ve got the main sidebar menu. It’s absolutely critical you, in all of these styles, that you know the selector that you want to style. Remember we changed the selector of the menu to side menu. So we’re going to say .side-menu.

Obviously this system only works if you understand how to use selectors, how to figure out what selector to use and how to use them. If you don’t know how to do that, this is not going to be very useful to you.

That’s the only thing you really need to know and it’ll make writing all the rest of the CSS easier. I’m going to show you how that works in this process but that will be the thing you have to work on.

The menu selector that we’re going to choose is .side-menu because we gave the menu the class of side-menu. This CSS will write the selector as so that it applies to specific typical Thesis menus.

So all of the Thesis styles apply plus all of these styles apply which for a typical drop-down menu is what you’re going to want. In a typical drop-down menu all the drop-down functionality exists under .menu and so you won’t want to remove the typical menu class.

However, this is not a drop down menu and since it’s not a drop down menu, I want to get rid of that default class. I don’t want any of that behavior. So I’ve unchecked that.

If it’s a submenu style you can check this and it will add the appropriate selectors to the CSS for submenus but it’s not a submenu style so it doesn’t matter.

Set Menu Options

You can show color options here and you can set menu link decoration. We’re going to set those to none and menu hover decoration to none. You can set menu item padding here. We’re going to set this to 10, 10, 10 and 10 so that’s essentially 10 pixels.

For these things you can use any form of CSS numbers so it could be or 10 em or 10 rem or 1.2 rem or 10 px. You can even use 10 in because those are all appropriate CSS dimensions right. If you just put the number in, it will automatically add px to it for you. You can use percentages, you can use anything you want just like in all the rest of Thesis. If you just use a number it’s going to add px to it.

We’ve already set up font family. Let’s do the colors now. We could check that box to get all of our colors. I want an almost white color for the text so that’s what I’m choosing. I’m going to use that in both the link text and the hover text color.

Then let’s look at background color. Come back over to my styles here and the link background color is going to be the main color and then for the hover background color I’m going to use the lighter one. I’ll use the darker one for something else.

Since we only have two pages and because most of our menu items are actually linked to the main page I’m not going to specify a current text color or current background color. I don’t want that to show up separately because most of the items would have the current text color if you were on the main page. So we’re not going to select that one and as such it will automatically just take the link color.

Saving the Options

I’m going to say save Thesis Classics. Oh no, pardon me. I saved the wrong thing and I lost it all. That’s the trick to this, you have got to push the right button. You have to push the correct button because you could end up with thousands of styles which would kill your server if they were all combined together.

To avoid that I break out each style into its own section so that you don’t end up with thousands of styles every save. You’re going to end up with dozens or hundreds but not thousands. I’ll quickly reset all those style.

So you save menu options and now I have to reload this CSS. Now it’s starting to kind of look like something but there’s a fundamental design flaw in this and that is that list items are displayed inline. We want our menu to look like this here so we need to change those list items to display:block.

Add Supplemental Styles

That takes us back over here to Style Manager because you can choose in your menu style configuration to show supplemental style options for the menu. Most of these supplemental styles you wouldn’t use on regular menu but for what we’re doing we are going to use them.

Check to include the supplemental styles for menu 1 and save that. And then come back over to additional styles and now you’ve got these main sidebar menu link supplemental styles.

Now we’re just going to use the link supplemental style. You could add a background image, you’ve got full control over that image if you do. So if you want to use background images for your menu you can.

You can specify a menu item height which we’re going to do. We’re going to make it 70 pixels. You can specify its box sizing which matters if you specify height. Typically you would choose border-box so that the dimensions are inclusive of the padding and border content-box. The way it normally works is dimensions are added and border are added to the dimensions.

If you said you wanted 70 pixels tall then you’d have the width of your border and the width of your padding added to that. So instead of 70, in this case it would 90 since we’re using 10 pixels of padding, plus any border that we added.

We’re going to use border-box instead. Here’s our display property which in this case is going to use block.

Let’s come back over and look at this. She’s got a little bit of margin in between each one of these things and she’s got a little border around them so we’re going to use both of those. We are going to customize the margin by putting 5 pixels of bottom margin below it and we’re going to customize the border.

Note how you have a lot of choices with border here. We’re going to choose a solid border with a 1 pixel width. We’re going to choose our dark purple color for our border color. So border color and now you could specify a board radius. You could specify a drop shadow color, specify offsets and blur or opacity for that drop shadow.

You’ve got these other options you could specify. We’re not going to specify them because that’s not the style of her site but we’ve got all these additional things that we’ve set up now.

Review the Menu and Make Corrections

Let’s save our menu options again and we come over and look at this. Reload our CSS file. So now you can see we’ve got boxes for each of these things. It looks like the font style is too big, our line height is too big and we want these things centered in the menu.

So let’s come back over to our main menu and look at font size. Take that back down to 16 pixels. In terms of font align, let’s center it and in terms of line height let’s give it 20px for line height. Now let’s see what it looks like. Reload the CSS file.

We now have our menus. But they’re not all two lines and maybe they’d look better if they were all two lines. So let’s go back over to our actual menu, appearance and menus. In our custom link we’re going to take this space here and put a break tag.

So we’ve got our break tag there and we’ll do that between About Annie and what is hypnotherapy. Hypnosis already is that way. Clinic locations needs that… and let’s add, contact by email. Save the menu and see how that looks now. There we go, contact by email, perfect.

If we click on these menu items they’re taking us down to the right spots and if we click on our go to top of page it’s still taking us back up here to the top. So that is working nicely. We pretty much have our menu laid out.

Review the Menu in the Responsinator

Before we move on let’s look at how the menu looks in in the Responsinator. Let’s do this in an incognito window so it doesn’t know we’re logged in. It doesn’t know we’re logged in, so clicking on the menu doesn’t make it go back and forth although it does put our menu there.

We’ve got the title and the content and that sort of thing and then keep on coming down here to our main content. Let’s go down to a tablet view. We’ve got some things that we want to fix in this menu.

Change Media Queries

In order to fix this menu we have to look at the Classic Responsive code and we’re going to do that here inside of the Skin Editor. Go to the CSS then come down and look at the media queries. So here in our media query, we have menu, display: none and show-menu, display: block.

We want to take these two things… actually, we don’t have submenus so we don’t really care about this. This is the only bit we’re going to grab and then come back over the Thesis and back over to additional styles.

Now what we’re going to do is come down to our media queries and in our tablet portrait media query, we’re going to paste that code. Except that instead of .menu it’s going to be .side-menu and this is fine like this. For brevity’s sake let’s get rid of all this extra. This is stuff that doesn’t exist because we’re not using the menu selector so we have to copy the code that allows for the clicking open and close and bring it into our own media query and use our own selector for that.

Now we don’t actually need a special selector for .show-menu we just need that special selector for the .side-menu. So we’re going to save our media query calls and now we’re going to refresh that page.

Let’s inspect that and open this link in a new tab. Let’s reload that CSS file and now our menu is up here. When we click that the menu shows up and then click it and the menu goes away. Now now we have our responsive menu that we were looking for. So we’ve got all that working properly for the menu. The menu is now set up.

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