Build Your Own Business Website header image

Lesson 8 – Part 4 – Style the Top Menu Area of Agility

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Now we’re going to work on adjusting the menu position. And the perfect way to handle that is to add some bottom margin or padding to this header area. That’s what we’re going to do although we’re not going to do it there. What we’re going to do is come over to the style for our header area.

Add Padding in the Header Area to Adjust Menu Position

Let’s come back over to css, to header area and under Options. We’ll just start off by adding some padding. Now we’re not going to add top padding here. I think our top padding is fine, isn’t it? Let’s refresh this. I think our top padding is fine.

But we’re going to add some bottom padding and that looks like about 20 pixels or so. Let’s try putting in 20 pixels and see if that does the trick. Not quite… another 5 pixels; so we go back to header area and adjust the bottom padding. There can be a bit of trial and error in figuring out the right amount. Let’s save that and double check it. I guess I didn’t save the css. Now that’s got our header pretty closely configured now.

What are Variables and How do you Use them in Agility?

And with that, I’m going to put that variable back into the top menu area. Remember we had this background and the background color was BC1. It was $bc1. Now we’ve got this line back stretching all the way across, right? And what we’re going to do is change the value of the variable BC1 and it will change everything that has that color to it.

Now when we talk about variables, the variables for Agility are down here. So you’ve got text color variables and we have background color variables and we have padding variables. These are built into Agility Nude.

And if you scroll all the way to the very last page of this document, you can see where the variables are being used. So background color 1 is being used in the top menu area, in the footer top area and in the top menu link. And the BC2 is the submit button, so on and so forth, right? That’s where these colors are currently being used.

In Agility, we’re only using BC1, BC2 and BC6. 3, 4, and 5 are currently unused and are available for you to go ahead and use. There are other versions of Agility that will be coming out that use those. But for the time being, BC1, 2, and 6 are the only 3 background colors that are currently being used.

Change a Variable Color

What we’re going to do is change that variable color. Now this color is a specific green. It’s this color here. So we come down to our primary menu color which is BC1 and instead of that color, it’s this color.

Now every place that color was used has been changed to green. And that’s the same green as that green color that was in the image. It overlays it perfectly and it evens out any unevenness that might exist between the actual height of that image and makes it look decent. So we’ve changed BC1 to a specific color now that is this main background color here.

Changing the Style of the Menu

And that brings us to changing the style of the menu. The menu in Agility is styled using this top menu package, that is, the top menu is styled using the top menu package and the bottom menu is styled using the footer menu package. These are two packages that are very similar to each other but they are, nevertheless, different styles for each individual situation.

Available Packages

When we looked at header area and top menu area, we were looking at packages that are called ‘single element style packages’. And that is a package that essentially applies to one thing only. But there are several different types of packages available here.

There’s a single element style. There’s the links. There’s the horizontal drop down menu which is the one that we’re looking at right now. It’s a horizontal drop down menu style and so it has different settings than the single element style package. And you would only use this horizontal drop down menu package to style a horizontal drop down menu. You wouldn’t use it for anything else. Whereas the single element style can be used for lots of things.

Anyway, if we come over here to our options, there are primarily two things you are styling. You are styling the text in the menu and you are styling the background of the menu. You also have a few other things like border and padding and stuff like that and that’s a different story, really.

Font Settings

In terms of font, in this case, what we’re going to do is take our font settings and we’re going to change those to Arial. But we’ll leave the font size 16 as it is. We’ll leave it as bold but we’re not going to use italic. We’re not going to use a font variant.

We’re using all caps here so we are going to come back over to text transform and we’ll say capitalize. And we’ll leave text align different but we do have letter spacing set up here but we’ll leave it set the way it is at 1 pixel. And what this does is it puts 1 pixel of space in between each letter. So those are our font settings.

Styling Menu Links

Then we come to the font and background settings and there are essentially 5 states for you to style. There is the link state which is what the menu looks like essentially by default. There is the hovered link state which is what the menu looks like when you hover over it. There is the active link state which I don’t use but it is what the menu looks like when you click on it but before you’ve released your mouse.

There is the current link state which is the menu item for the current page and then there is the current parent link state which is the menu item of the parent of the current page. Now as a practical matter, we are only going to style links, hovered links, and current links.

Let’s come back over here to the site and here we are on our front page and that color right there, this brown color, this is the current link state. It’s got that background color and this font color in its current state. What you see here, without me hovering over it, is the standard link state, what the menu looks like by default.

And then this is the hover state. So when you hover your mouse over it, the fact that it changes this color and goes to white, that’s the hover state. And then if you click down on it, that is the current state before you release it. But we aren’t going to use those so we’ll just jump back. So what we’re going to do is do the link state, the current state, and the hover state. Those are the states that we’re going to style. We’ll leave the other ones alone.

Link State

So in terms of our link state, we are currently using text color 3 as our link state and that’s not what I wanted. But text color 3 is this kind of reddish color right now as it’s set up. And so we’re going to change it to white.

You could do a couple of different things here. You could just ignore this text color here and type in white, fff, and that would be sufficient to make it the white color. Or you could change the variable to white or you could use a white colored variable.

In this case, I’m just going to use fff. But I could choose to use a different text color or use a variable. The text color 3 is my accent color variable. I’m not going to change that color to white because that’s not really what my accent text is going to be. So essentially, I’m not using the accent text color in my menu any longer.

Hover State

So the hover state has a background color of 2 and that is a lighter color green. Let’s go down to our hover menu color and let’s change that to this lighter color of green. And now, well we’re not getting our hover color quite yet. Let’s save the css for a second.

What did I do? I must have failed here someplace in my top menu link settings, links… I did. I failed to make that white, that is why. But I don’t actually want this to be white, I don’t think. But let’s just try that again, hit save. There we go.

But it didn’t turn out to Arial either. What on earth did I do there? Obviously, I set aside something. I didn’t save this. So we’re going back to Arial, font size stays the same. Font weight stays bold. Text transform goes down to capitalize. Letter spacing is 1.

Well, let’s just save the css, reload this and see how it looks now. I’m not getting my capitalization here. I don’t really know why that’s the case because I should be. Yeah, it is uppercase and I was pretty dang sure I said that it’s uppercase. Oh, my mistake absolutely. It’s uppercase, not capitalize but uppercase.

Capitalize means take the first letter and make it capital regardless of whether or not it actually is. Uppercase makes it all uppercase. And actually, I think that’s a little too bold so I’m going to take the bold off, essentially take it to default. There we go, that’s what I wanted it to look like.

Now we still have a problem with our hover color and probably because I put the wrong color in. I think that’s what I did. So if we come down to our menu hover color which is BC2… I did. I put the wrong color in. There’s the correct color. Now when you hover, it turns this light green.

Current State

Finally, we have the current color that we need to change. Let’s change the current background color. Right now, I’m using BC6 so let’s come down to BC6 which is the accent background color and let’s put that green in and hit save. Now that color shows up instead.

It also gives it a different text color and so probably, what I’m going to do with that is come back over to the top menu and just remove all the styles in the current menu. So current links, I’m just going to take everything out entirely. Hit save.

Change Width of the Menu

And now, the menu is essentially the way I want it except that this is a little too narrow. So I’m going to make this something like 240 pixels wide or something like that instead. So we go back over to the top menu and go to our submenu width and make it 240 pixels. Yeah, that’s a little bit better. And actually, I could make it so that lined up with finished projects which would make it about 220. But nevertheless, you see the point I’m making is that you can adjust the width of the drop down.

Save $200 on Membership Now!

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

Leave a Comment