Build Your Own Business Website header image

Move the Menu Below the Header Image Using the Thesis 2.3 Skin Editor

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

Watch the opening clip of this video to preview it,
the full video is available to free and paid members.

Now that you’ve gotten an introduction to the Thesis 2.3 Skin Editor we are going to begin customizing templates. During our Introduction to Thesis 2.3 seminar someone asked how to move the menu below the header image in Thesis 2.3. So that’s going to be our first task.

How to Move Elements in the Skin Editor

Let’s come over here and take the nav menu and just click and drag. That is one of the motions in the Skin Editor and this motion of click and drag allows you to move things around inside of the current box. You can’t move them into another box with just the drag.

This is inside the container box right now so you can move the nav menu but only inside the container box. And when you are moving this, when it turns bright yellow that’s a place it can go when you lift your finger off the mouse. I’ll drag it around and you can see the yellow areas that show up as I drag it around. That is clicking and dragging.

We’re going to click and drag the menu now to below the header. If we save the template now and come over and view the site our menu shows up below the heading.

How to Make Universal Changes on the Site

If we go to a page though the menu hasn’t moved because we have to actually make this change in every template.

We’ll go next to the Home template and now drag our nav menu down. Save the template. Then we’ll go to our Single template and drag the menu down. Again, save the template. Then go to the Page template, drag the menu down and save the template. Go to our Archive template and drag the menu down and save the template.

Edited Child Templates Don’t Get Changes from Parent

Now if you were to come over here to the 404 page you won’t see that change because it has been edited. So it’s not taking the parent, Page template, style since it’s been edited. So let’s just copy the Page template into it since so that it gets its original relationship back. We don’t need the edits we made earlier since we were just experimenting.

Come on down here to the Archive template and look at the Tag archive and you can see that the menu has been moved. The Tag archive is a child of the Archive and since we haven’t made any changes to the Tag template it is still following the exact same style as the parent.

Let’s look at Category. It has the changes as well. So all of the child templates of Archives have added this change that we made to the Archive template.

Actually the other template we should change is the Full Page template. The Landing Page doesn’t have a nav menu in it so it doesn’t matter.

So when you are making a change that you want to make to the entire site, you have to remember that you have to make those changes in all of the applicable templates.

0 Comments… add one
0 comments… add one

Leave a Comment