JQuery Mega Menu Full Width Menu Item

0
votes

I am new to css and jquery and have a problem with a menu item. I have a Jquery Mega Menu and I want to have the Attorney Profile menu item be 1 single row instead of the two it is now. Normally I would post code but there just is to much. So I am going to post a link to the actual working site.

I tried adding fullwidth but no success.

$(document).ready(function($){
    $('#mega-menu-tut').dcMegaMenu({
        rowItems: '1',
        speed: 'fast'
        fullWidth: true
  });
 });

I also tried to modify the css here: 

.dcjq-mega-menu ul.menu li .sub li.mega-hdr { /* Sub-menu headers - i.e. 2nd level navigation */
     float: left; /* Float the sub-menus and give them a fixed width to from the mega menu    rows */
     width: 130px; 
     height: 165px;
     margin: 0 2px 7px 2px;
     border: 3px solid #ccc;
}

But that just modifies that actual inside menu.

Here is the active site: http://gdisinc.com/barker/default.php

Notice if you roll your mouse over Attorney Profiles it will show two rows. How can I make that one row that matches the width of the site which is 960px. Thank you!

PS: I used this menu system: http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/getting-started/

2
javascriptjquerycss

2 Answers

1
votes

You can change the padding on this style

.dcjq-mega-menu ul.menu li a

to 

padding:12px 20px;

The elements in the have a width based on their content, so reducing font-size for navigation items would work as well. Fixes for such problems are easily found using Chrome's Web Inspector / Firefox's Firebug etc.

Would be probably good to not have the small divider after contact us tab as well. You could achieve this by adding a :last-child class like this:

.dcjq-mega-menu ul.menu li:last-child a { background:none; }

The problem is that the CSS selector here is not very readable and can lead to very annoying problems later on. If you can, always change such long declarations to a single class:

.last-menu-item { background:none; }

As well, keep in mind that :last-child is not supported on Internet Explorer < 9. http://caniuse.com/#search=last-child

Welcome to the world of CSS ... :)

0
votes

It looks like you'll need to change the "rowitems" option here:

$(document).ready(function($){
  $('#mega-menu-tut').dcMegaMenu({
    rowItems: '3',
    speed: 'fast'
  });
});

If you change it to '5' it should display all of the items on the same row. Take a look at the examples:

http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/examples/

It doesn't look like there is a way to configure this effect per menu item unless you split the menu up into separate instances of the MegaMenu.