Comments on: Thesis 1.6 Nav Customization

By: mike

mike — Mon, 08 Feb 2010 08:37:02 +0000

Thanks, this tip was wonderful!

By: Matthew

Matthew — Wed, 27 Jan 2010 17:23:33 +0000

Hi Doug,

Easier said than done, I’m afraid. The menus are built on lists, floated left via CSS to force them into a horizontal layout. Unfortunately, floating lists left defies centering.

You can probably get around this, but it’s going to depend on your comfort level with CSS.

Without getting into code, the steps I would take are:

1) Set you list items to a fixed width, text-align center. Based on the width and spacing of each item, calculate the total width of your menu.

2) Constrain the containing div to the total width of the menu. This will place the list into a box of fixed dimensions, that we should be able to center on the page by setting margin: 0px auto; in CSS.

The key to all of this is in knowing the exact width of your menu items.

By: Doug Moore

Doug Moore — Wed, 27 Jan 2010 11:09:23 +0000

Matt thanks for the tutorial…

I would like to try and center up the menu. Any thoughts on how make that happen..

By: Matthew

Matthew — Thu, 14 Jan 2010 01:56:17 +0000

Sometimes when you copy and paste code from the web, it copies with “unstraightened quotes”, which can wreak havoc when pasted into your source code. By running them through a plain text editor first, those bad quotes are usually changed into proper straightened quotes, and thereafter function as intended.

I’m glad you found my article helpful.

By: Kayle Simon

Kayle Simon — Wed, 13 Jan 2010 19:15:27 +0000

I tried using BBEdit rather than adding the CSS code through the thesis admin window, and it worked great; so nevermind.

By: Kayle Simon

Kayle Simon — Wed, 13 Jan 2010 19:11:35 +0000

Love the look of your nav and with your helpful post, tried to recreate it, but the code just disappears when I put it into my css file. You aren’t clear on where the first code you specify goes, but I’m figuring that gets added to the php file? Actually I tried it in both places, and still can’t get this to work out.

Are there other settings in thesis that you haven’t told me about? It’s so weird, I copy and paste the CSS code into the custom file, click save, and the whole css file goes blank and has to be roaded. What am I doing wrong…it all looks okay to me, from a css code perspective, but perhaps the menu div isn’t being created correctly or something.