Pure CSS Mega Menu

[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

[100asa]

How to have menu bar with no gradient background, but trasparent?

[picaflor-azul]

How to have menu bar with no gradient background, but trasparent?

You will edit the includes/templates/override/css/stylesheet_mega_menu.css file.

Thanks,

Anne