Build Your Own Business Website header image

Menu

Help! My Slider is Covering Up My Menu!

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

In this session we demonstrate how to move a slider that is covering up the drop down menu by reviewing and changing z-indexes. Rick: Okay. Member: Okay now, this one because I've seen this problem before, I know I've overcome it but I don't seem to be able to do it now. Yeah, okay they

How to Add Space Between the Header Image and the Menu in Classic Responsive

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

In this session we demonstrate how to add a space between the header image and the menu in Classic Responsive by adding a margin bottom to the header. We also show its 3D view that gives a sense of the layers that are involved and where things are located. Rick: Anything else? Member: I was

Upgrade a Thesis 1.8.5 Site to Thesis 2.1 Using the Classic Responsive Skin – Part 5 – Style the Thesis 2.1 Classic Responsive Menu

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

One of the things that we want to do in this upgrade from Thesis 1.8.5 to Thesis 2.1 is change the background color because all the background color is transparent. And we want to go from orange to that brown in our nav menu. From this color to this color. Otherwise, everything else is transparent

Thesis 2.1 for DIY Website Builders – Part 6 – Move the Menu Below the Header Image Using the Thesis 2.1 Skin Editor

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

So armed with this knowledge of the relationship of Thesis 2.1 boxes to actual pages, we are going to move this menu from above the header image to below it. We're going to come over here to our Thesis 2.1 Skin Editor and we're going to move that Nav Menu. The way you do that

Thesis 2 – Troubleshooting Menu Styling

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

In this session we troubleshoot menu styling in Thesis 2. The submenu isn’t taking the same styling as the main menu and there is an extra border. We review the code and show how to fix the problems. We also show how to give the submenu an absolute width in the Custom CSS to give

How to Create an apple.com Style Menu in Thesis 2 – Part 4 – Add Border and Corner Radius

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

The next thing we're going to do is give our apple.com style menu a border and give it some corner radiuses. We'll come back over to this and our border, we're just going to give it a 1 border width. It's going to be solid but the border color is going to be slightly darker

How to Create an apple.com Style Menu in Thesis 2 – Part 3 – Create the Gradient Background

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

We have the structure of our apple.com style menu spread out across this and now we're going to create the gradient background for it. Actually, I'm missing one color but I'll get that in a moment. We're going to come over here to ColorZilla Gradient Generator. And in fact, we're going to start off by

How to Create an apple.com Style Menu in Thesis 2 – Part 2 – Adjust the Menu Item Widths

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now that we've discussed the characteristics of an apple.com style menu and created the basic menu in Thesis 2, we'll move on to styling the menu and specifically we'll begin by adjusting the menu item widths. First we're going to get rid of the background color that extends all the way across here. This background

How to Create an apple.com Style Menu in Thesis 2

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

In this seminar we show how to create a simple, clean menu with no drop downs for a Thesis 2 website just like the menu you see on the apple.com site. We take you through the steps of adjusting menu item widths so they spread evenly across the page, creating a gradient background using your own color scheme in ColorZilla and adding border and radius to the menu. We demonstrate how to create this type of menu in our Agility Nude skin but you can do this in any Thesis 2 skin.

Configuring a Header with Menu to be Responsive in Thesis 2

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

In this session we show how to configure a header with a menu to be responsive in Thesis 2. We talk about what to do with the header image and discuss the different ways of displaying the menu by adjusting its sizes and using a background. Member: The header banner that you helped me with,

Lesson 10 – Part 11 – Configuring a Responsive Menu in Thesis 2

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Let’s go to the Skin Editor now and use this multilevel drop down menu. But before we do that, I want to give you a little preview of it. Preview the Drop Down Responsive Menu This is the menu here and what this menu does is it creates this drop down with this little arrow

How to Add Multiple Menus to Thesis 2

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we demonstrate how to add multiple menus to Thesis 2. As usual, the menus themselves are created using the WordPress Menu system. We show how to add them using the Nav Menu box in the the Skin Editor which gives us a choice of menus to display.  We talk about how to

How to Change the Menu Colors in the Agility Skin for Thesis 2

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

In this session we show how to change the menu colors in the Agility Skin for Thesis 2 by changing the variable value. This will change the text color for that variable everywhere. Agility has variables for all the text colors including the primary menu color, hover color and the other background color. Member:  On

How to Create a Vertical Dropdown Menu in Thesis 2.0

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

In this session we show how to create a vertical dropdown menu in Thesis 2 using the jQuery Accordion Menu Widget plugin. We show where the menu is getting it’s styling and then how to change the menu class in the widget so that it has its own styling rather than the styling of the

When to Use a Widget Instead of a Menu

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

In this session we discuss when to use a widget instead of a menu. Menus in WordPress are designed to display horizontally but can be made to display vertically by adding some CSS. In this case, someone wants to create a vertical menu list but doesn’t want to use CSS. We talk about the different

Lesson 7 – Part 6 – Create the Menu

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to - ,

The next thing we're going to do is create our menu for this Professional Services/Business website using the Genesis theme. We're going to start off by creating the menu under Appearance and Menus. Assign Menu to the Primary Navigation I'm going to call the first one the Main Menu but really, you can call it