1

I am using jquery mega menu plugin and I want to make the right and left padding a little smaller on each menu on the top menu bar.

I can go into the css and change the padding (I am using the black skin):

.black ul.mega-menu li a {float: left; display: block; color: #fff; 
 padding: 12px 38px 12px 25px; background: url(images/bg_black.png)
  repeat-x 100% 0; text-shadow: 1px 1px 1px #000; text-decoration: none;}

to this

.black ul.mega-menu li a {float: left; display: block; color: #fff; 
padding: 12px 28px 12px 15px; background: url(images/bg_black.png)
repeat-x 100% 0; text-shadow: 1px 1px 1px #000; text-decoration: none;}

NOTE: i just changed the padding above to 12px 28px 12px 15px;

but the issue here is that the dropdown menus now no longer line up properly under the menu.

Is there anyway to change the padding on the menu buttons and still keep the sub menu items lined up properly.

leora
  • 188,729
  • 360
  • 878
  • 1,366
  • Are you sure it doesn't work? Which browser are you testing with. I tried changing the values with the developer tools in chrome and I had the problem you seem to have had, however I downloaded the plugin/css from the website and I'm testing the basic example page they give you and as long as I change the values in the actual css to what you said, it works fine.. When changing the values via developer tools though it doesn't work (my guess is the alignment values are calculated @ document ready and not on each click. – Matt Wolfe Feb 25 '12 at 01:36
  • @Matt Wolfe - i think you are right . . i just tested in firebug once the page was loaded – leora Feb 25 '12 at 03:29

2 Answers2

2

Changing the padding shouldnt change the way it actually lines up - the plugin calculates the position of the sub-menu based on its total width and the location of the parent item. These are the inline styles you see being applied to the containers. If it can it will always try to center it, if this is not possible then it will left align the sub-menu.

The link below shows an example of the menu with the padding reduced as in your example:

http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/menu3.html

In this case, due to the width of the menu only the "Services" tab is centered. The rest are aligned agains the left side. Are you seeing different behaviour in your example?

Lee
  • 740
  • 1
  • 6
  • 12
1

In this case, the sub menu position is set inline.

So, if you change the padding as described above, then you need to adjust the margin-left bit in the inline styles.

For the service tab, change the margin-left from

<div class="sub-container mega" style="left: 429px; margin-left: -40px; top: 40px; z-index: 1000; ">

to

<div class="sub-container mega" style="left: 429px; margin-left: -115px; top: 40px; z-index: 1000; ">

Or something similar. Then do that for each tab as needed.

Note: the # won't always be the same. You will need to fiddle with it. It might be more or less than -115px

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86