1st level drop down displays on two rows with alot of extra width

I have this installed and set to "Categories in grid (with pictures) and when I hover over the menu bar, the category drops down and displays the sub-categories.  I have 5 sub-categories listed and for some reason it displays 4 on row 1 and then drops the 5th down to a 2nd row. however, there is still alot of room left on the first row for 3-4 more sub-categories to be listed.

How do I get them to not make a new row after 4 and stay on the same one?

Also, the drop-down area is fixed at a certain width and shows all this extra empty space to the right.  Is there a way I can set the drop-down to only be the width on the sub-category listings?

Hi Thomas,

The Nop Mega Menu is styled by design in a way that it has 4 subcategories on a line, so that if they have subcategories the sub-subcategories are well displayed and readable. However if you need to have 5 subcategories on a single line you need to perform the following changes:

1. Modify the Plugins\SevenSpikes.Nop.Plugins.MegaMenu\Views\MegaMenu\CategoryMenuTemplate.WithPictures.cshtml and edit it as shown below:

line 16:

@(Html.DataTable<SevenSpikes.Nop.Plugins.MegaMenu.Models.MegaMenuCategoryModel>(Model.CategoriesModels, 5, "row", "box",

the number in bold is the changed one.

2. Edit the Plugins\SevenSpikes.Nop.Plugins.MegaMenu\Themes\Allure\Content\MegaMenu.css file as shown below:

line: 99

.categories.fullWidth .box {
width: 20%;
height: 100%;
border-left: 1px dashed #e6e6e6;
border-bottom: 1px dashed #e6e6e6;
padding: 15px 10px;
display: table-cell;
float: none;
}

The number in bold is the changed one.

Hope that helps!