Moving your menu to be inline with your logo

Nav Menu on right of logo

You see many sites these days that have the menu inline with their site logo. Generally, you see the logo on the left with the menu items on the right.

If this is something you’ve wanted to accomplish for your site, then this quick tutorial will show you how.

I’ve seen this done in other tutorials where Php changes were needed. However, for this tutorial, we will be using the visual editor and then some CSS to achieve this.

Let’s get started.

1) Move your menu into the header container

You need to use the visual editor to move the navigation menu block into the header container.

To start, goto the Thesis -> Skin Editor

Thesis Skin Editor Menu Item

Thesis Skin Editor Menu Item

This is where we will be making our visual changes.

2) Move the Nav Menu block

We are going to use the Skin Editor visual editor to moe the Nav Menu box/block. For my site (and if you’ve followed my other tutorials) the Nav Menu is below the Header block.

Nav Menu block below header container

Nav Menu block below header container

What we need to do is move this Nav Menu block into the Header block container.To do this, we need to hold down the shift key, hover over the Nav Manu block, click and hold the left mouse button, then drag and drop in in the Header container block.

Nav Menu in header container

Nav Menu in header container

Once done, you need to hover over the Nav Manu block again, click and hold the left mouse button, then drag it to be below the Site Tagline.

Nav Menu in place inside the header container

Nav Menu in place inside the header container

Finally, click on the green Save Template button to save these changes. Then repeat this step for all the other pages (you can see them by clicking on the yellow Home button).

3) Next, we move the menu to the right-hand position

So, now the menu has moved into the header block and will look something like this (this is how it looks on this site)

Nav Menu in Header

Nav Menu in Header

To move the menu into the correct position, we need to add the following CSS code.

Go to Thesis -> Custom CSS and add the following:

.menu
{
  float: right;
  margin-top: -50px;
}

This code moves you menu over to the right with the float command. Then the margin of -50px moves the menu up the screen. You may want to try experimenting with the number of pixels to suit your design.

If you have a larger menu, you may need to reduce the font size of the menu to fit.

After these changes your menu should look something like the following:

Nav Menu on right of logo

Nav Menu on right of logo

If you want to see an example of this, then take a look at this tutorial video I made on this change.

Why not check out the other tutorials

I hope this was helpful. If so, why not check out some of our other tutorials.

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