Pure CSS Mega Menu

[picaflor-azul]

If I understand you correctly, you want to centre the entire menu within the header. I share your grief. So many bells and whistles but no sweet solution for this.

One albeit messy and approximate way to do it is by editing the menu wrapper in stylesheet_mega_menu.css.

#mega-wrapper {
width: 980px; /*change 980px to an em value (eg 50em) that is only a few ems wider than the greatest width of your menu at various zooms. Applying an background colour will let you see the result. Too small a value and the menu may wordwrap.*/
margin:0 auto; /* auto must remain as it centralises menu.*/
display:block;
position: relative;
z-index:9999;
background:#ff0; /* Optional. For checking width. Can be retained if desired. */
padding-left:2em; /* this is the trick. Adjust this value until the menu looks near enough centred at various zooms. */
}

There are other ways to do this, (eg changing display:block; to display:table; etc) but I have yet to get them to work as desired.

Hope this helps.

One way to easily do this would be to add a margin-left to the .mega-menu li. You would need to play with the numbers until you get one that will center all of the links within the #mega-wrapper.

.mega-menu li {float:left;text-align:center;position:relative;margin-right:20px;margin-top:6px;margin-left:60px /*or whatever number of pixels works*/ ;border:none;}

Thanks,

Anne

[simon1066]

I'm attempting to add 'All Products' link to the bottom of the categories dropdown. I can achieve this by adding, in tpl_mega_menu.php, the all products link code like this:

            <div class="dropdown_1column">
                <div class="col_1 firstcolumn">
                   <div class="levels">
                       <?php

 // load the UL-generator class and produce the menu list dynamically from there
 require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
 $zen_CategoriesUL = new zen_categories_ul_generator;
 $menulist = $zen_CategoriesUL->buildTree(true);
 $menulist = str_replace('"level4"','"level5"',$menulist);
 $menulist = str_replace('"level3"','"level4"',$menulist);
 $menulist = str_replace('"level2"','"level3"',$menulist);
 $menulist = str_replace('"level1"','"level2"',$menulist);
 $menulist = str_replace('<li class="submenu">','<li class="submenu">',$menulist);
 $menulist = str_replace("</li>\n</ul>\n</li>\n</ul>\n","</li>\n</ul>\n",$menulist);
 echo $menulist;
?>                        
                   </div>   <a href="<?php echo zen_href_link(FILENAME_PRODUCTS_ALL); ?>"><?php echo HEADER_TITLE_ALL_PRODUCTS; ?></a>
                </div>
               </div>

I'm having difficulty styling the link - applying inline css styling has no effect.

Does anyone have an ideas or better suggestions?

[simon1066]

applying inline css styling has no effect.

Now should read 'has limited effect'. I can change the size and colour - can't change 'ALL PRODUCTS' to 'All Products' even with text-decoration css.

Can't help thinking the way I'm adding the link is a bit of a bodge.

[picaflor-azul]

I'm attempting to add 'All Products' link to the bottom of the categories dropdown. I can achieve this by adding, in tpl_mega_menu.php, the all products link code like this:

            <div class="dropdown_1column">
                <div class="col_1 firstcolumn">
                   <div class="levels">
                       <?php

 // load the UL-generator class and produce the menu list dynamically from there
 require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
 $zen_CategoriesUL = new zen_categories_ul_generator;
 $menulist = $zen_CategoriesUL->buildTree(true);
 $menulist = str_replace('"level4"','"level5"',$menulist);
 $menulist = str_replace('"level3"','"level4"',$menulist);
 $menulist = str_replace('"level2"','"level3"',$menulist);
 $menulist = str_replace('"level1"','"level2"',$menulist);
 $menulist = str_replace('<li class="submenu">','<li class="submenu">',$menulist);
 $menulist = str_replace("</li>\n</ul>\n</li>\n</ul>\n","</li>\n</ul>\n",$menulist);
 echo $menulist;
?>                        
                   </div>   <a href="<?php echo zen_href_link(FILENAME_PRODUCTS_ALL); ?>"><?php echo HEADER_TITLE_ALL_PRODUCTS; ?></a>
                </div>
               </div>

I'm having difficulty styling the link - applying inline css styling has no effect.

Does anyone have an ideas or better suggestions?

If you post a link to your site I can take a look.

It would be better to add the link inside a ul tag as a list item.

Thanks,

Anne

[simon1066]

If you post a link to your site I can take a look.

It would be better to add the link inside a ul tag as a list item.

Thanks,

Anne

By George you're right, just replacing my added code with

<ul> <li><a href="<?php echo zen_href_link(FILENAME_PRODUCTS_ALL); ?>"><?php echo HEADER_TITLE_ALL_PRODUCTS; ?></a></li></ul>

seems to work perfectly.

Thanks so much.

[picaflor-azul]

By George you're right, just replacing my added code with

<ul> <li><a href="<?php echo zen_href_link(FILENAME_PRODUCTS_ALL); ?>"><?php echo HEADER_TITLE_ALL_PRODUCTS; ?></a></li></ul>

seems to work perfectly.

Thanks so much.

I am happy that it worked ;0

Thanks,

Anne

[liquidpics]

Hi Anne,

One quick question and I'm finished!!! Thanks to your help on here, I have now made a full width multiple Top Level dropdown which looks great!

The final part is to only display categories and subs/sub subs that have an active product in them. I thought I'd seen it mentioned in this thread, but after half an hour of searching I can't see it.

Thought I'd post a screenshot of the menu now, and will find some time to explain it for other soon.

Hope you can help with the active categories only issue.

Thanks a million

Kristian

[dharrison]

Hi Kristian

How did you achieve this? You are right the subject of categories is only touched on, no one actually explains how to do it.

Please do share. As I am trying to do the same.

[michaelpattisr]

Hello:

I have installed this mod, but having problems. You can see @ http://realestatesignstore.com/

Any Help would be great.

Michael

[dharrison]

Right I tried the blog post http://nigeltsblog.blogspot.co.uk/20...pdown-for.html to add all of my top categories, but I am only getting the one result come up. I have since changed the setup to sub-categories

Please could anyone advise. I am at the end of my tether here