We are new to JoomlaBamboo and the Rasa2 template, so please feel free to refer me to appropriate docs if this is covered elsewhere:

We are converting from a Joomla 2.5 site to 3.x and upgrading the template. On the old site, we have a horizontal main menu with 8 items, and they all fit on one row. Using Rasa2, the menu items are spaced out with some padding on either side so they menu flows to a second row. We are trying to figure out if there are template settings to tighten the spacing or even decrease the font size *only* for this menu so everything fits on one row.

We might be able to live with the menu overflow except for one issue: if the user mouses over a menu item in the first row, the submenu drops down as expected. But the submenu is "transparent" to the menu item on the second row -- a ghost image of the second row item shows through and mouse clicks go to the items on the second row, not the items in the submenu. So there's no way to select a submenu option.

Old site: columbusaudubon.org
New site: columbusaudubon.org/development_3/

Any hints on how to proceed greatly appreciated!

Hi There,

A few ways you could do this

#menu ul>li a, #menu ul>li .zen-menu-heading {padding: 12px 15px 11px 10px;}

I've adjusted the second and last value

Cheers
Paul

Hi Paul,

Sorry, I'm missing one piece: Where are you putting that code?

Thanks,
Bill

Hi Bill,

With this template please check out this doc

docs.joomlabamboo.com/zen-grid-framework-4/theme/customisation.html

Cheers
Paul

Got it, added your code to the custom css file (and renamed); first problem solved.

Still curious about the second part, though. That's the issue where if the menu does run to a second row, the dropdown submenus don't work because the mouse "sees" the underlying first level choices underneath. (The ones that have dropped to the second row.)

I see that I can declare a screen width (in px) at which point the the menu will move to the sidebar. That avoids the problem, provided that I calculate and specify the exact width of the menu. But then if we happen to add something to the main menu, we have to start over. Not to mention if we count wrong.....:^)

So the question is whether there is a way to have the submenus work properly even if the menu does split to a second row? I did not see anything in the doc on this point, but as I mentioned we are new at this!

Thanks

Hi Bill,

With drop downs to work correctly they do need to be on the one line otherwise as you experienced it all goes out of kilter

If you add to the menu it would be a case of tweaking some settings or some code

#menu ul>li a, #menu ul>li .zen-menu-heading {padding: 12px 15px 11px 10px;}

To change the css you need to look at the second and last values - these are right and left padding

You could also adjust the collapse values as required - e.g. where the menu goes to the sidebar menu

Cheers
Paul

Got it, thanks!

I see what you are saying about adjustments, so no problem there. We will be careful when playing around with the menu....

You're welcome - good luck with the site

Cheers
Paul