Center Navigation Menu Text

Have a look in the stylesheet for the main top menu class, and add the text align center to this area.

Hi. I’m not sure exactly where I would add that. Could you be more specific please? If it’s any help, my site is:

Remembered Dreamz

Inside the admin of your website, look at Appearance in the leftside of your admin and click on Editor. Then on the right it should say something like Templates and list all the files that make up the template.

Down towards the bottom under Stylsheets it should provide a list of the stylesheets that make up your theme to give it the layout. In your instance, the style sheet is called style.css

Find this section:
/* +++++++++++ Top navigation +++++++++++++ */

Before you go making any changes make sure you do a select all and copy it to notepad and save it just in case you need to revert back to it before you make any changes.

I’ve found that section, but I see nowhere that I would place a “center text” code. Is there an extra code I need to add?

i found a line that says float: left, and i changed it to float: center, but that did nothing.

Does anybody know the code I would place under the Top Navigation section to center the page menu?

Leave float: left; as-is. You will want to add an additional line that says text-align: center;.

I tried that and it didn’t work. I placed it immediately underneath the float: left code and in another section. Do you know where exactly I would place the text: center code?

Anybody?

I just need to know where to place the ‘text: center’ code in my style sheet.

The problem is that it’s not that simple, which may be why you’re not really getting any replies on this. I played with some different settings on your site for awhile, and I wasn’t able to get the navigation bar to be centered without taking away the dynamic properties of WordPress menus.

It’s not impossible to do this, but it is very difficult to do when the width of your navigation bar is not explicitly set. If you feel that your navigation menu is static and won’t be changing much, then you should be able to specifically set the width, and then adjust the margins to get it centered.

Find the section of your style.css labelled “Top navigation” (it starts around line 297). The next section beneath that is labelled “Drop down menu CSS” (around line 351). We’ll be looking at both of these sections. Here’s what you need to do:

1. Change the width value under the section #navouter #nav ul#dropmenu, #navouter #nav ul#dropmenu ul from 100% to 580px.
2. In that same section from step 1, delete the the setting margin: 0;
3. The next set of changes is a little more complicated. Find the line of code that starts here: #navouter #nav ul{ }. You will need to change that section and the next section. This is what you start with:

   #navouter #nav ul{
   }
   
   #navouter #nav ul,
   #navouter #nav ul li{
       display: block;
       float: left;
       text-align: center;
       margin: 0px;
       padding: 0px;
       background-image: none;
       list-style-type: none;
   }

   And this is what you should end up with:

   #navouter #nav ul{
       margin: 0 auto;
   }
   
   #navouter #nav ul li{
       float: left;
   }
   
   #navouter #nav ul,
   #navouter #nav ul li{
       display: block;
       padding: 0px;
       background-image: none;
       list-style-type: none;
   }

I believe that should get it working for you… Just keep in mind that if you modify your menu at all, you may need to adjust the width setting, because it is no longer dynamic.

Hi JPry,

Thank you for taking the time to respond. I went ahead and tried your suggestion, but I still can’t seem to get the menu text centered. Is there any other way to do that?

Every browser I’m looking in is showing your menu centered. I tried IE7, Safari 5, and Firefox 3.6.

Maybe you need to clear your browser’s cache, and reload the page.

That was the problem. It now works. Thank you.

Do you happen to know how to center the header text at the top of my page?

Find this (around line 229):

/*       +++++++++++ Header +++++++++++++      */

#header #headerleft{
    display: block;
    float: left;
    width: 620px;
    padding-top: 6px;
}

Delete the width and float attributes, and add a text-align: center; attribute.