Relocating your navigation menu

Website with menu moved

If you’re using the Classic Responsive theme, the default location for the navigation menu is above the header, at the top of the page.

The navigation menu default location

The navigation menu default location

Many, like myself, prefer to have the menu below the logo and header, it seems more natural a feel and, in my opinion, makes it look neater and easier flowing.

Let’s move the menu

To move the menu below the logo/header we use the visual builder element of Thesis. The following few steps will take you through this process.

1) Goto the Thesis -> Skin Editor

From the WordPress backend, goto the Thesis -> Skin Editor menu item. This is the part of the framework that allows you to visually change your website.

The Thesis Skin Editor menu item

The Thesis Skin Editor menu item

2) Locate the menu

Next, you need to locate the Navigation menu item. By default, it should be the top block on the screen

Find the navigation menu block

Find the navigation menu block

3) Relocate the menu block

This next step will move your menu position on the screen. Simply hover your mouse over the Nav Menu block, click and hold the left mouse button, then move the block below the Header block.

Nav menu moved

Nav menu moved

4) Save your changes

Once done, the change will not take effect until you have saved yoru changes. You will need to click on the green Save Template button in the top right of the page. This will update the template and your webpage will change, with the new location of your nav menu.

Save the page

Save the page

5) Now update the other pages

This change, as you can see from the few images above, has been done on the Home template – this is the template used by your homepage.

Other pages, such as archive (so, if you select to view some posts by category – they will generally be viewed using a different template such as archive), you will need to also update.

To change page, click on the Yellow button, which, if still on the first Home change should be called Home. A new drop-down box will now show with all the templates you have for your current homepage.

All website templates menu

All website templates menu

You will need to select each one at a time (select by clicking on them) – then, you will need to make the same change from steps 2-4 above.

You may not want to make this menu change on every page, and that is fine if that’s your design. Just know that if you wanted to move the menu site wide, you will need to do this for each of these templates.

Menu moved

Once completed, your menu should now be located to the place on the screen you moved it to. On my website, that is below the header block.

Website with menu moved

Website with menu moved

I hope this little tip/tutorial has helped you move your navigation to where best suites your website design.

Note: The changes in this post are for the Thesis Classic Responsive skin. Although some of the visual builder elements may be the same for other skins – the CSS changes may not work for other skins.

About the author: I’m a Software Engineer by trade and for a while I have been spending my time creating Websites and Blogs with Wordpress. I recently started to use the Thesis Framework and found only a few tutorials and help. So, I started this site to document what I learn and to share with others. I’m also available to help on a one to one basis for those that would like to work with me.

{ ( 0 comments… add one ) }

Leave a Comment