center align horizontal menu categories

[grduniam]

Version 1.5.2.1

The horizontal menu categories is aligned to the left on the demo store.

I see you can align it to the right by adding in the #menu ul a float: right. As mentioned here viewtopic.php?f=21&t=55140&p=259374&hilit=align+horizontal+menu+categories#p259374

But how do I get the horizontal menu categories to align to the center?


Thanks!!

[MarketInSG]

You can add a wrapper around the menu's div and set width of the wrapper as 100% and text align to be center.

[grduniam]

Tried doing that and putting the wrapper div around the menu's div and it didn't change it. So I've put it around the ul in the menu like the code below

Code: Select all

<?php if ($categories) { ?>
<div id="menu">
<div id="menuwrapper">
  <ul>
    <?php foreach ($categories as $category) { ?>
    <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
      <?php if ($category['children']) { ?>
      <div>
        <?php for ($i = 0; $i < count($category['children']);) { ?>
        <ul>
          <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
          <?php for (; $i < $j; $i++) { ?>
          <?php if (isset($category['children'][$i])) { ?>
          <li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
          <?php } ?>
          <?php } ?>
        </ul>
        <?php } ?>
      </div>
      <?php } ?>
    </li>
    <?php } ?>
  </ul>
</div> 
</div>
<?php } ?>
<div id="notification"></div>


and css

Code: Select all

/* menu wrapper */
#menuwrapper {
   text-align: center;
   width: 100%;

But doing this turns the menu into a vertical menu. Where should I put the menu wrapper div?

Thanks again for your help marketinSG. I may well but some of your modules for this shop.

[grduniam]

See the site here for reference: http://thetatpile.com/

Thanks!!

[MarketInSG]

the wrapper should wrap the div menu. Not the other way round.

[MarketInSG]

Code: Select all

<?php if ($categories) { ?>
<div id="menuwrapper">
<div id="menu">
  <ul>
    <?php foreach ($categories as $category) { ?>
    <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
      <?php if ($category['children']) { ?>
      <div>
        <?php for ($i = 0; $i < count($category['children']);) { ?>
        <ul>
          <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
          <?php for (; $i < $j; $i++) { ?>
          <?php if (isset($category['children'][$i])) { ?>
          <li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
          <?php } ?>
          <?php } ?>
        </ul>
        <?php } ?>
      </div>
      <?php } ?>
    </li>
    <?php } ?>
  </ul>
</div>
</div>
<?php } ?>

Code: Select all

#menuwrapper {
width: 100%;
text-align: center;
}

#menu {
text-align: left;
}

This is the right way.

[brewer90]

wish you were able to get it worked out!

[grduniam]

Thanks again for the clarification MarketInSG.

Though I have done exactly what you've said as you can see in the codes below but it hasn't centered the category items. They are still left aligned. Can you advise if I've done something wrong? Thanks again

Code: Select all

</div>
<?php if ($categories) { ?>
<div id="menuwrapper">
<div id="menu">
  <ul>
    <?php foreach ($categories as $category) { ?>
    <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
      <?php if ($category['children']) { ?>
      <div>
        <?php for ($i = 0; $i < count($category['children']);) { ?>
        <ul>
          <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
          <?php for (; $i < $j; $i++) { ?>
          <?php if (isset($category['children'][$i])) { ?>
          <li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
          <?php } ?>
          <?php } ?>
        </ul>
        <?php } ?>
      </div>
      <?php } ?>
    </li>
    <?php } ?>
  </ul>
</div> 
</div>
<?php } ?>
<div id="notification"></div>

and CSS of entire /*menu*/ section:

Code: Select all

/* menu */
#menuwrapper{
   width: 100%;
   text-align: center;
}
#menu {
   background: url('../image/banner_top.jpg') center center repeat;
   height: 75px;
   margin-bottom: 15px;
   padding: 0px 5px;
}
#menu ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
#menu > ul > li {
   position: relative;
   float: left;
   z-index: 20;
   padding: 6px 5px 5px 0px;
}
#menu > ul > li:hover {
}
#menu > ul > li > a {
   font-size: 18px;
   color: #000000;
   line-height: 14px;
   text-decoration: none;
   display: block;
   padding: 6px 10px 6px 10px;
   margin-bottom: 5px;
   z-index: 6;
   position: relative;
}
#menu > ul > li:hover > a {
   background: #C0C0C0;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -khtml-border-radius: 5px;
   border-radius: 5px;
}
#menu > ul > li > div {
   display: none;
   background: #FFFFFF;
   position: absolute;
   z-index: 5;
   padding: 5px;
   border: 1px solid #000000;
   -webkit-border-radius: 0px 0px 5px 5px;
   -moz-border-radius: 0px 0px 5px 5px;
   -khtml-border-radius: 0px 0px 5px 5px;
   border-radius: 0px 0px 5px 5px;
   background: url('../image/menu.png');
}
#menu > ul > li:hover > div {
   display: table;
}
#menu > ul > li > div > ul {
   display: table-cell;
}
#menu > ul > li ul + ul {
   padding-left: 20px;
}
#menu > ul > li ul > li > a {
   text-decoration: none;
   padding: 4px;
   color: #FFFFFF;
   display: block;
   white-space: nowrap;
   min-width: 120px;
}
#menu > ul > li ul > li > a:hover {
   background: #000000;
}
#menu > ul > li > div > ul > li > a {
   color: #FFFFFF;

[MarketInSG]

It seems you changed your categories and have more now. You can align it by adding text align attribute to menu div.

[grduniam]

Yes I've added more categories. I've added the text align attribute as you say, to the #menu div. See code:

Code: Select all

/* menu */
#menuwrapper{
   width: 100%;
   text-align: center;
}
#menu {
   background: url('../image/banner_top.jpg') center center repeat;
   height: 75px;
   margin-bottom: 15px;
   padding: 0px 5px;
   width: 100%;
   text-align: center;

But still hasn't centered the menu categories. See it at http://www.thetatpile.com/

Can you advise?

Thanks again for your time!

[MarketInSG]

I just realised, the way you style it is not possible since there's a float: left there. Float it either to right else there's no way.