Center primary links like apple.com?

I'm using the Zen theme at http://www.heritagecollege.ca/ where the primary links are centered. You can take apart the style sheet from there. I basically took the styling clues from http://www.exploding-boy.com/2006/11/02/updated-centered-sliding-doors-m...

The tricky thing is in the template.php file because you have to add an extra span around the primary links plus you have to do some hacking for IE6/7.

I did this for the links.

function zen_menu_links($links) {
  if (!count($links)) {
    return '';
  }
  $level_tmp = explode('-', key($links));
  $level = $level_tmp[0];
  $output = "<ul class=\"links-$level\">\n";
  foreach ($links as $index => $link) {
    $output .= '<li';
    if (stristr($index, 'active')) {
      $output .= ' class="active"';
    }
    $output .= ">". l('<span>' . $link['title'] . '</span>', $link['href'], $link['attributes'], $link['query'], $link['fragment'],FALSE,TRUE) ."</li>\n";
  }
  $output .= '</ul>';

  return $output;
}

For the IE6/7 hack I referred to the zen-fixed theme and added this at the end of my zen_variables function.

      $vars['styles'] .= '<!--Hack to get the sliding door menus to work -->
                          <!--[if IE]>
                          <style type="text/css">
                            
                          /*\*//*/
                          #navigation ul li a {
                                  display: inline-block;
                                  white-space: nowrap;
                                  width: 1px;
                          }
                          
                          #navigation ul {
                                  padding-bottom: 0;
                                  margin-bottom: -1px;
                          }
                          /**/
                          
                          html #navigation ul li a {
                                  padding: 0;
                          }
                                  </style>
                          <! [endif]-->';

Hope that works for you :)

That's very handy, thanks for sharing that Timotheos,

I have one question though, how could I change the primary links in this theme to be aligned to the right side instead of the left or the center. Any thougths would be much appreciated.

Hi Timotheos,

that's a very nice tipp and exactly what I was looking for - unfortunately it doesn't work for me.

I've put the code into template.php, the span ist outputted too on the final page, but i'm missing something with the stylesheet. Where exactly is the "trick" to have the menus centered finally?

I'm using the Zen-Fixed-Theme, 5.x-1.x-dev (http://drupal.org/project/zen)

ipwa,

I have the primary links on the right, do this in your overrides.css:

#primary {
  float: right;
}

You may have to do some tweaking to #primary a, #primary li, and/or #primary ul if you want anything fancier to happen.

We have found that this solution works:

#primary ul {
    position: static;
    text-align: center;
}


#primary li {
    display: inline;
    font-size: 100%;
    margin-right: 5px;
    float:none;
}

#primary a {
    display: static;
    float:none;
}

The key here is resetting the #primary ul to position: static (thanks to Roger Lopez for finding that out... not setting this, in IE6, causes the block to render out of place...) and setting the #primary li to display:inline instead of float:whatever.

hope this helps

Thank you!

This is a beautiful solution and it worked perfectly!

Thank you johnvsc!

Works like a charm :)