Build Your Own Business Website header image

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.

Lesson 10 – Part 2 – Configure Thesis Navigation Menu Design Options

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.

Welcome back to part two of Lesson 10 of the Build Your Own E-Commerce Website tutorial series. In this lesson we are going to configure Thesis Design Options for the navigation menu.

First, I want you to take a look at our example to see what we’re trying to accomplish. That is thesisestore.com, and this is what we are trying to accomplish. Actually this is not exactly what we’re trying for since we have fewer tabs. What we’re going to do is to make each of the tabs the same width and then the submenus will all be the same width as the tab as well.

If we come back over here this is the website that I built for the demonstration of this lesson. We’re at Thesis e-Store Lesson 10. I am going to go into the wp_admin. Here we are at our dashboard and what we’re going to do is come down here to Thesis Design Options and then to Fonts, Colors & More! and expand the navigation menu.

Text Definitions – Design Options

Next we’ll change the text style and size. I want that text style to be Georgia, so I’m going to come down here and select that. I think 11 points is too small so I’m going to pick 12 point for our menu size.

Link Definitions – Design Options

Here you can see those four behaviors I talked about for link behavior. Here are the colors for the default link text, the current link text and the current parent link text . We are going to make the first ones white, FFFFFF,– those are going to be the text color of the first two. Then the current link and current parent link text color are going to stay black.

Background Definitions

Not only do you have text colors that follow that pattern but we also have background color that follows those patterns.  To further configure the navigation menu we’ll change those backgrounds.  Here are the colors for the link background, the default background, there’s the hover background, there’s the current background and then the current parent background. So the link background and the link text color go together. The link text hover and the hover background color go together.

Anyway, let’s change these backgrounds to make them more colorful. We’re going to take a nice red for this – EE0000, and then a darker red for our hover background color – 9B0000. I think those two look very nice together.  Then our current background color is not going to stay white; it is going to be a light yellow which is FFFF81. Then our parent color is going to be a light green and that is C9F17A, and that is our current parent background color.

Border

We’re going to make the border width of our navigation menu  0. At 0 the color doesn’t matter and we’re going to leave our submenu at 150 pixels but we’re probably going to have to come back and change this.

So we’ll go ahead and save. Then let’s take a look at what it looks like. The yellow is our current color, there’s our hover the dark red, here is our current color which is this yellow and then our parent color is that light green. So those are all of our colors and that wraps up Part 2 of this lesson, Configure Thesis Navigation Menu Design Options.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment