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 http://forum.opencart.com/viewtopic.php ... es#p259374
But how do I get the horizontal menu categories to align to the center?
Thanks!!
You can add a wrapper around the menu's div and set width of the wrapper as 100% and text align to be center.
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
and css
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.
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>
Code: Select all
/* menu wrapper */
#menuwrapper {
text-align: center;
width: 100%;Thanks again for your help marketinSG. I may well but some of your modules for this shop.
Affiliate Homepage Link and Promote All Products
Hide Empty Shopping Cart
Remove Shipping and Handling from Affiliate Commission
Move Affiliate Info to Top of Orders Page
the wrapper should wrap the div menu. Not the other way round.
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;
}
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
and CSS of entire /*menu*/ section:
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>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;It seems you changed your categories and have more now. You can align it by adding text align attribute to menu div.
Yes I've added more categories. I've added the text align attribute as you say, to the #menu div. See code:
But still hasn't centered the menu categories. See it at http://www.thetatpile.com/
Can you advise?
Thanks again for your time!
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;Can you advise?
Thanks again for your time!
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.
I see that this is an old post with no good solutions posted. I struggled with this for a while, and found something that works for me - hope it will help someone else.
Basically I just changed the CSS for the <ul> and <li> as follow:
The main thing to note is the <ul> should have text-align to center and the margins set to auto, and the <li> should be set to display: inline-block.
Basically I just changed the CSS for the <ul> and <li> as follow:
Code: Select all
.main-menu1 ul {
list-style: none;
padding:0;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.main-menu1 > ul > li {
position: relative;
z-index: 20;
display: inline-block;
}
inline block would do better than float if you would want to center the boxes. You can't align center with a float 
Who is online
Users browsing this forum: No registered users and 9 guests
