Complete Guide to Using Thesis 2 for WordPress. Click Here.

≡ Menu

Step 20: Moving the Thesis 2 Nav Bar Below the Header

Let’s start customizing the awesome Thesis 2 Theme for WordPress.  There are several places to display the navigation bar.  The default is at the top of the page, above the header.  I personally like to see navigation menus displayed below the header or logo images.  Again, this is mostly personal preference.  We will use this exercise to learn to manipulate the Thesis 2 Theme to change the way our website looks.

From your WordPress Dashboard, click the Thesis 2 menu option in the left sidebar.  You will now be presented with the Thesis 2 home page.  From here, click on “Skins”, then click “Skin Editor”.

Thesis 2 Skin Editor

You will be taken to the Thesis 2 HTML landing page with the “Home” template as the default page when you first enter this view.  We’ll cover page templates more in a future post.  For now, the important thing to realize is that we are operating on the HTML components of the website.

Thesis 2 HTML Home Landing Page

Next, notice the blue bar labeled “Nav Menu”.  This is the “code” that controls where the navigation menu will appear on a page in relation to other page elements.  Notice that this blue Nav Menu bar is placed above a white “Header” bar.  This is what controls the order in which these two items are displayed in relation to each other.

Thesis 2 HTML Landing Page

What we want to do is swap the order of Nav Menu and Header.  We can do this by left-clicking on the blue Nav Menu bar and dragging the bar to below the Header box.  It will light up yellow in the spot where the box (Nav Menu) will land when you un-click.

Thesis 2 Nav Bar Moved Below Header

In the picture below you can now see the Nav Menu blue bar is placed below the Header bar.

Thesis 2 Nav Menu Moved Below Header

Click the green “Save Template” button in the top right of the page.  You will see a confirmation that your template was saved.

Thesis 2 Save Template Button

Refresh your browser on your website and you will now see the navigation menu is displayed below your header.  Yes, customizing your website with the Thesis 2 Theme can be that easy.

About the author: I’m a techie, a gadget geek, a former programmer, and all-around technology nut. Currently I’m a business analyst for a technology company. I love what technology can do for us. I love smartphones and apps for everything. Building sites with Thesis 2.0 and WordPress help me to reconnect with the feeling of building something tangible.

I’m on: Google+ and Twitter

{ 23 comments… add one }
  • Lucas February 21, 2013, 4:22 PM

    Hi Doug,
    I’ve been loving these tutorials – thank you so much for the help. I’ve been doing great, up until this step; my Skin Editor only has the “Home” and “Body” headings, and the rest looks like it has to be created. I tried to bypass this, but by Step 22, it looks like things get even more involved. Am I missing something? Again, thanks man – I really like your simple, easy-to-understanding teaching style. Very generous of you to share these materials.

  • Doug Macklem February 21, 2013, 6:05 PM

    Thanks for the feedback. I’m glad these steps are helping.

    Did you activate the Thesis Classic Skin? From the WordPress Dashboard click on Thesis => Thesis Home => Skins => Select Skin. If the “Thesis Classic” skin isn’t the active skin, activate it. The blank one has almost nothing in it.

    Another thing to look for when you move your cursor over the boxes, click the black arrow to expand the content. It may be that they are collapsed down and hiding all the content.

  • Lucas February 21, 2013, 9:19 PM

    Hey Doug! Unfortunately, I’ve got both the Classic Skin activated, and have been attentive regarding the black arrows – still nothing. Is there anything else that might be causing this?

  • Lucas February 21, 2013, 9:23 PM

    Okay man, I just worked it out! It was reading as Classic, but I needed to reload it apparently. Thank you for catching that!

  • Doug Macklem February 21, 2013, 9:47 PM

    Glad I could help.

  • Lalit May 24, 2013, 8:09 AM

    Doug, first of all both thumbs up to you for arranging this awesome step by step and easy tutorial on thesis 2.

    Now my question … I moved Nav Menu below header but there is nothing to display … please help.

    Awaiting for your reply.

  • Doug Macklem May 27, 2013, 8:41 AM

    Lalit: thanks! Can you provide a link to your site so I can check it out? Also, have you added at least one page or post under each category you are using in your nav menu? I believe you need content before the item shows up on the menu.

  • Lizz May 29, 2013, 2:17 PM

    I’m working on a redesign, and moving from Thesis 1.8.2 to 2.0… what I’m trying to do is get my header image (transparent .png) to overlap my nav bar (which is under the header).
    I’ve set my nav bar top margin to -20px, but now I can’t figure out how to get the header image on TOP of the nav.
    Ideas?

  • Doug Macklem May 30, 2013, 6:21 PM

    Lizz: I checked out your site and it seems to still be running 1.8.2. How are you testing/building the v2.0 site? I wanted to see what you are trying to do as I’m a little unclear. I’m not an expert by any means but using Chrome web browser built-in tools I can usually figure things out. Are you hosting the new site somewhere I can look at it?

  • Steve June 28, 2013, 12:07 PM

    Hi Doug,

    Did what you said and everything worked, except when I navigate to another page the nav bar goes back up above the header…

    Please let me know,
    Thank you

  • Doug Macklem July 21, 2013, 8:01 PM

    You likely only changed the Home template. You will need to make the same change on all page templates for your site. See Step 43 for using Templates.

  • aditya October 17, 2013, 11:15 PM

    I did the change but only on the homepage the nav bar is below the header. The moment I click on sub menu or other menu items it again goes above the header.

    What could be the issue? Please see my structure here
    http://prntscr.com/1y1aco

  • Doug Macklem October 19, 2013, 8:11 AM

    Each page has its own template. You either need to make the same change on each template or “copy” your home page template to your other pages. Check out Step 43 for information on templates. http://thriftyzizel.com/step-43-how-to-use-thesis-2-templates/

  • monika February 13, 2014, 7:49 AM

    search box is not working in thesis2. when i search anythings, it shows blank page

  • Doug Macklem February 13, 2014, 8:16 AM

    What is your site and I’ll look at it. I did a quick search of the DIYThemes forums and nothing jumped out at me. I did see one suggestion to turn off all plug-ins and see if this helps.

  • matt March 6, 2014, 4:38 PM

    Doug,
    Thanks for all of the amazing tips. I tried this tip and put the navigation menu between the header and the column box but it’s throwing it into my sidebar. I’m using the new pearsonified skin, I don’t know if this is messing it up.

  • Doug Macklem April 13, 2014, 8:41 AM

    Sorry for the late response. Real comments are getting lost in the spam.

    It looks like you moved your menu into the columns div instead of after the header div and before columns. Your site looks nice.

  • Jem November 26, 2014, 2:26 PM

    Hi! I’ve been trying several tutorials regarding this but can’t get it right. The Menu Bar is in the middle of the content. I’ve done exactly what you said. I’ve gone thru DIY forum and still can’t get it right. What do you think I’m doing wrong? Thanks for your kind help.

  • Doug Macklem February 24, 2015, 5:53 PM

    Sorry for the late reply. It looks like you fixed it. BTW, I really like your site design with the cards for each post in a two-by-two fashion. I’ve been wanting to learn how to do this.

  • Garreth March 30, 2015, 7:24 AM

    Very helpful post – took less than a minute to read, and a minute to implement. Job done – thanks for helping me move my menu!

  • Doug Macklem September 14, 2015, 8:15 PM

    Thanks! I’m glad to help.

  • Johan November 4, 2015, 9:00 AM

    Hi Doug,

    I’m running Pearsonified skin and as you can see from my site, the menu sits at the top and is mostly invisible. I’ve tried moving the NAV BAR around as you explained but it’s stuck there. Is there another way I can move it to between the header and the body throughout my site? Thank you for all your articles. I really appreciate the help!!!

  • Doug Macklem November 8, 2015, 4:53 PM

    I tried navigating to your site but it appears to require a log-in. I’d be glad to help if I could see your site.

Leave a Comment