On the site I'm using this theme I am seeing oddly varying column width's in the megamenu drop down menus. Every menu should be single column on this site. Upon "firebugging" the output, I'm seeing that menu items with 2 items are getting 2 column setting and menu items with 3 are getting 3 column setting. Also, menu's with 3 visible and 1 hidden item are getting 4 column setting. A menu with 2 child items should only get a single column drop down.

The count returned is the number of child menu items. Breaking the column count selection up by this count is probably not was intended. It also appears to be including "hidden" menu items in the count.

This section of code in theme/theme.inc:

     switch (count($value['below'])) { // choose mega class (div width based on the numbers of columns)
        case 1:
          $class = 'one-col' . $altclass;
          break;
        case 2:
          $class = 'two-col' . $altclass;
          break;
        case 3:
          $class = 'three-col' . $altclass;
          break;
        case 4:
          $class = 'four-col' . $altclass;
          break;
        case 5:
          $class = 'five-col' . $altclass;
          break;
        case 6:
          $class = 'six-col' . $altclass;
          break;
      }

As an interim fix, I commented out the whole switch statement but the line:

          $class = 'one-col' . $altclass;

That made all my menus have a predictable look. No multi-columns, but in this case I don't need them.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

cehfisher’s picture

I had the same issue of variable widths on the drop down and I solved it with two lines of CSS. BTW, I am only using one column drop downs, so I do not know if this solution will work for other using multi-columns.

In the themes/marinelli/css/primary-links.css file, add the following lines of code under ".mega":
white-space: nowrap;
width: auto;

Hope this solution works for someone else as well!

atodd’s picture

Hello,

I am new to Drupal and have installed and would like to use the Megamenu but it is not working correctly. I have searched and everyone seems to want the opposite that I need! I need the menu to create columns because I have several 2nd level items with several 3rd level items under them. Here is my structure in the Main Menu links manager:

Top Level
---Second Level Item
-----Third Level Item
-----Third Level Item
-----Third Level Item
---Second Level Item
-----Third Level Item
-----Third Level Item
-----Third Level Item
---Etc...

No matter what I do, the menu will not put the links into columns. It stays really narrow and puts links that have two words or more onto multiple lines (see picture). Is there any way to define the number of columns? If anyone can help me I would be greatly appreciative.

CreativeJS’s picture

Thank you mrfreshly and atodd. A combination of your fixes helped me fix my issue!

bootn’s picture

Mate you saved me a lot of time and hassle! Thanks heaps for this solution, works great!

photodemon’s picture

I'm having a width issue as well, and I was referred to your post here. I tried adding the code you mentioned but it doesn't work for me. What am I doing wrong? Here's what it looks like:

.mega{ /* submenu container */
	position:absolute;
	top:0px;
	left:-9999px; /* hide when not required */
	margin:0px;
	white-space:nowrap;
	width:auto

Did I not put it in the right spot?

EDIT: Thanks to mshepherd, I got it working. He suggested I add "!important" to both lines so the commands don't get overridden. Now, it looks like this:

.mega{ /* submenu container */
	position:absolute;
	top:0px;
	left:-9999px; /* hide when not required */
	margin:0px;
	white-space:nowrap !important;
	width:auto !important;

So much nicer-looking now. Maybe this will help someone else.

dimapv’s picture

FileSize
31.55 KB

Hello!

I have the same problem, and after adding

.mega{ /* submenu container */
	position:absolute;
	top:0px;
	left:-9999px; /* hide when not required */
	margin:0px;
	white-space:nowrap;
	width:auto

was no effect to me. After I add code

.mega{ /* submenu container */
	position:absolute;
	top:0px;
	left:-9999px; /* hide when not required */
	margin:0px;
	white-space:nowrap !important;
	width:auto !important;

apperars effect as you can see in attached picture. Please, help me to avoid of this bag. Thank.

avoura’s picture

your suggestion of
In the themes/marinelli/css/primary-links.css file, add the following lines of code under ".mega":

white-space: nowrap;
width: auto;

worked perfectly for me

kamalpalei’s picture

Hi All
I added below two lines in .mega section in file themes/marinelli/css/primary-links.css.

white-space:nowrap !important;
width:auto !important;

After that width reduced and looks good, but the drop down menu always floats at extreme left side.
Ideally it should start from main menu tab, but it starts always from left extreme.
Please see the screenshot attached.

Please give me some pointer how can I fix this issue.

Regards
Kamal

gabocharrua’s picture

That worked for me too!! thanks man!

mark@redhorseinteractive.com’s picture

The 2 lines

white-space: nowrap;
width: auto;

Did wonders for me... wow, a discussion that actually had a solution that worked.
I wish I knew how to get multi columns to work (though I don't need them now it would be nice to know). That seems a mystery , to me.

thx all

mark@redhorseinteractive.com’s picture

FileSize
44.25 KB

The 2 lines

white-space: nowrap;
width: auto;

Did wonders for me... wow, a discussion that actually had a solution that worked.
I wish I knew how to get multi columns to work (though I don't need them now it would be nice to know). That seems a mystery , to me.
It just gets all buggered up (see attached). Any ideas anyone? Share the love.

thx all

batpurev’s picture

FileSize
64.52 KB

hi guys, i isntalled a fresh D7.21 with Marinelle and megamenu but having trouble showing the dropdown menu i.e lvl 2 and lvl 3 menu items. Tried everything that i could google with no luck. The menu items show up only when i give a block position say 'Search area or Topbar' then it is shown as independent of the original menu. I end up having 2 menus. If i give position 'None' then nowhere shown! Help me guys...

batpurev’s picture

FileSize
20.71 KB

i am a noob and there was the solution see from attached image. Now i have this whitespace issue discussed above hope there are solutions already

vasco monteiro’s picture

To get multi columns work, you must use 3 level menu item, where the 2º level is the column title of the dropdown area. http://www.cmsquickstart.com/blog/drupal-theme-design-tutorial-2-mega-menus

mrfreshly’s picture

Status: Active » Closed (fixed)
rick3455’s picture

.mega{ /* submenu container */
position:absolute;
top:0px;
left:-9999px; /* hide when not required */
margin:0px;
white-space:nowrap !important;
width:auto !important;

it has worked for me. Thanks #1 cehfisher, #6 dimapv