Pure CSS Mega Menu

[danielosko]

Hi Anne,

The Mega Menu was installed and worked great! However, I noticed that I had a large blank area at the bottom of every page on the website. (see pic). So I uninstalled the menu and all pages displayed normally, with only a few pixels of blank spaces which are wanted. I re-installed the menu and the menu once again worked great, but the large blank area returned.



If I simply remove the code in the tpl_header.php all pages display normally.., but when I include it I get like 12" of blank space.

<!--bof-mega menu display-->
<?php require($template->get_template_dir('tpl_mega_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_mega_menu.php'); ?>
<!--eof-mega menu display-->
<div class="clearBoth"></div>

Any ideas on how to resolve the issue?
Thank You Much!
Danny

[picaflor-azul]

Hi Anne,

The Mega Menu was installed and worked great! However, I noticed that I had a large blank area at the bottom of every page on the website. (see pic). So I uninstalled the menu and all pages displayed normally, with only a few pixels of blank spaces which are wanted. I re-installed the menu and the menu once again worked great, but the large blank area returned.



If I simply remove the code in the tpl_header.php all pages display normally.., but when I include it I get like 12" of blank space.

<!--bof-mega menu display-->
<?php require($template->get_template_dir('tpl_mega_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_mega_menu.php'); ?>
<!--eof-mega menu display-->
<div class="clearBoth"></div>

Any ideas on how to resolve the issue?
Thank You Much!
Danny

I have not looked at your site, but my guess is that it is the length of your manufacturers and/or shop categories that is causing the space.

Thanks,

Anne

[danielosko]

Wow Anne.., your GOOD!

That is exactly what is causing it. Do you know where in the CSS that I can make the spacing between the "Shop" category titles and also the "Brands" name titles smaller?

Thanks again,
Danny

[picaflor-azul]

Wow Anne.., your GOOD!

That is exactly what is causing it. Do you know where in the CSS that I can make the spacing between the "Shop" category titles and also the "Brands" name titles smaller?

Thanks again,
Danny

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

Thanks,

Anne

[danielosko]

Hi Anne,

Thanks, but the site is under development on my local server. I found out where to adjust the line spacing, (line height), here is the code:

.mega-menu li:hover div a {text-decoration:none;border:none;padding:0;line-height:15px;}

However, the "Brands" list of the manufacturer names is still too long. So I guess I'm left with one of three options:
1) Remove the "Brands" container
2) Shorten the list of manufacturer names within the "Brands" container
3) or preferably convert the "Brands" container into three columns.

Unfortunately, I can not find enough detailed information about doing any of them.

Any thoughts or tips?
Danka,
Danny

[danielosko]

Hi All,

I figured out how to make the "Brands" container into TWO columns instead of one.

First, open the tpl_mega_menu.php file.

Next, find:

<li class="manufacturers-li"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>" class="drop"><?php echo HEADER_TITLE_MANUFACTURERS; ?></a><!--bof shop by brand -->
<div class="dropdown_1column">
<div class="col_1 firstcolumn">

<ul >
<?php

$show_manufacturers= true;

// for large lists of manufacturers uncomment this section
/*
if (($_GET['main_page']==FILENAME_DEFAULT and ($_GET['cPath'] == '' or $_GET['cPath'] == 0)) or ($request_type == 'SSL')) {
$show_manufacturers= false;
} else {
$show_manufacturers= true;
}
*/

and REPLACE it with:

<li class="manufacturers-li"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>" class="drop"><?php echo HEADER_TITLE_MANUFACTURERS; ?></a><!--bof shop by brand -->
<div class="dropdown_2columns">
<div class="col_2">

<ul >
<?php

$show_manufacturers= true;

// for large lists of manufacturers uncomment this section

if (($_GET['main_page']==FILENAME_DEFAULT and ($_GET['cPath'] == '' or $_GET['cPath'] == 0)) or ($request_type == 'SSL')) {
$show_manufacturers= false;
} else {
$show_manufacturers= true;
}

That's it, you now have two columns in your "Brands" container.

Hope this helps someone else as well.
Danny

[picaflor-azul]

Hi All,

I figured out how to make the "Brands" container into TWO columns instead of one.

First, open the tpl_mega_menu.php file.

Next, find:



and REPLACE it with:



That's it, you now have two columns in your "Brands" container.

Hope this helps someone else as well.
Danny

Thanks for posting your solution ;) If you read further back in the thread I believe that there are also some suggestions for converting the catgegories drop down to a multi column which could be applied to the brands drop down as well.

Thanks,

Anne