Full browser width

How can I make the background of the megamenu (dropdown) span the browser width?

Hi clubfredd,

could you provide us with a link to your website or information about what theme are you using ?

Best Regards,
Nop-Templates Support Team

Thanks for the reply.
Unfortunately, I have nopcommerce installed locally so I don't have a link.

The theme I am using as a base is the Beauty theme as that's what the client purchased and expects to be modified. I'm converting it into a responsive site, and thought that, based on my design modifications, the mega menu dropdown background would look good if it spanned the whole browser width.

On a different note, this is the first time I've used nopcommerce and the plugins here were amazingly written well. Not that I can completely understand all of it but the integration, performance and support is superb.

Hi clubfredd,

I am glad you like our products. We do our best to make them easy to use and integrate.
You can find and modify the css of the Mega Menu for the Beauty theme in this file:
Plugins\SevenSpikes.Nop.Plugins.MegaMenu\Themes\Beauty\Content\MegaMenu.css

I am very curious to see your modifications of the Beauty theme to be responsive. It would be great if you can share a link to a live site (when you can), so that we can take a look.

Thanks

I will do that definitely.

Anyway, I finally figured out how to make the background span the width of the browser. Now I am stuck with this particular bit:

From CategoryMenuTemplate.WithPictures.cshtml

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

The categories are divided in divs with class "row" containing 4 categories...

...
<div class="row-wrapper">
     <div class="row">
          <div class="box">..</div>
          <div class="box">..</div>
          ...
     </div>
     <div class="row">
          <div class="box">..</div>
          <div class="box">..</div>
          ...
     </div>
</div>

I want to remove that whole div.row container and just let div.box move freely within div.row-wrapper, like so:

<div class="row-wrapper">
     <div class="box">...</div>
     <div class="box">...</div>
     ...
</div>

Can you point me to where I can modify this to make it such?

Thanks again!

I tried on changing the "4" to say "10" and that took up all the div.box (great!) - BUT if I only have 6 categories then there will be extra divs with class "empty-box" :P

Hi clubfredd,

You can simply not use the DataTable helper method but use a foreach instead.
The code below will do exactly what you need:

<div class="row-wrapper">
                @foreach (SevenSpikes.Nop.Plugins.MegaMenu.Models.MegaMenuCategoryModel item in Model.CategoriesModels)
                {
                    <div class="box">
                        <div class="title">
                            <strong>
                                <a href="@Url.RouteUrl("Category", new { SeName = item.CategoryModel.SeName })" title="@item.CategoryModel.PictureModel.Title">
                                    @item.CategoryModel.Name</a>
                            </strong>
                        </div>
                        <!--title-->
                        <div class="picture">
                            <a href="@Url.RouteUrl("Category", new { SeName = item.CategoryModel.SeName })" title="@item.CategoryModel.PictureModel.Title">
                                <img alt="@item.CategoryModel.PictureModel.AlternateText" src="@item.CategoryModel.PictureModel.ImageUrl"
                                      title="@item.CategoryModel.PictureModel.Title" /></a>
                        </div>
                        <!--picture-->
                        <ul class="subcategories">
                            @foreach (var subCategory in item.SubCategories.Take(megaMenuSettings.NumberOfCategories))
                            {
                                <li>
                                    <a href="@Url.RouteUrl("Category", new { SeName = subCategory.CategoryModel.SeName })" title="@subCategory.CategoryModel.Name">
                                        @subCategory.CategoryModel.Name</a>
                                </li>
                            }

                            @if (item.SubCategories.Count == megaMenuSettings.NumberOfCategories)
                            {
                                <li>
                                    <a class="view-all" href="@Url.RouteUrl("Category", new { SeName = item.CategoryModel.SeName })">@T("SevenSpikes.MegaMenu.ViewAllCategories")</a>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>

Hope this helps!

Excellent! It most definitely does.
Thank you so much.

Hi Boyko,

Thanks for you help on the previous post. I'm posting it here because I think it's appropriate since you helped me out with the foreach method.

On the CategoryMenuTemplate.WithPictures.cshtml:

<div class="dropdown categories fullWidth [email protected]">
                        @(Html.DataTable<SevenSpikes.Nop.Plugins.MegaMenu.Models.MegaMenuCategoryModel>(category.SubCategories, 4, "row", "box",
                                    @<text>

I would like to show child subcategories and all grandchild subcategories for each child category on the dropdown. The code above does this, but would like to use the foreach method as well.

Again, I appreciate all your help!

Hi,

Unfortunately the grandchild categories are not available in the model, so you won't be able to show them anyway. As to replacing DataTable helper with a foreach you can refer to the post above.

Best Regards,
Nop-Templates.com Support Team