update the hover banner

Here is the problem, after changing the content of categories, the height of hover categories changed as well, which would effect the layout of banner

go to

Nop.Web/Themes/CustomMicroAnalytix/View/Catalog/TopMenu.cshtml
 Nop.Web/Themes/CustomMicroAnalytix/Content/styles.css

Update the code as below, just add class “holdercategory” and update the min-height of this part

In Nop.Web/Themes/CustomMicroAnalytix/View/TopMenu.cshtml

<ul class="top-menu container">

  @Html.Widget("header_menu_before")

  <li><a href="@Url.RouteUrl("HomePage")"><i class="glyphicon glyphicon-home"></i></a></li>

  @if (Model.Categories.Count > 0)
  {
  <li class="has-mega-menu">
  <a href="#" class="">
  SHOP BY CATEGORY
  </a>
  <div class="top-menu-triangle"></div>
  <div class="mega-menu">
  <div class="row">
  @foreach (var category in Model.Categories)
  {
  var cat = categories.Where(c => c.Name == category.Name).SingleOrDefault();
  var pictureId = cat.PictureId;
  var picURL = pictureService.GetPictureUrl(pictureId, pictureSize);

  <div class="col-xs-12 col-md-3 categoryholder">
  <div class="row">
  <div class="col-xs-12">
  <div class="group-heading"><strong>@category.Name</strong></div>
  </div>
  </div>
  <div class="row">
  <div class="col-xs-12 col-md-5 visible-md">
  <div class="img-holder">
  <a href="@Url.RouteUrl("Category", new { SeName = category.SeName })"><img style="border: none; " src="@picURL" alt=""></a>
  </div>
  </div>
  @if (category.SubCategories.Count > 0)
  {
  <div class="col-xs-12 col-md-7">
  <ul>

  @{
  var subCategoryCounter = 1;
  }
  @foreach (var subCategory in category.SubCategories)
  {
  if (subCategoryCounter <= 3)
  {
  <li><a href="@Url.RouteUrl("Category", new { SeName = subCategory.SeName })">@subCategory.Name</a></li>
  }
  else
  {
  <li><a href="@Url.RouteUrl("Category", new { SeName = category.SeName })"><strong>View All</strong></a></li>
  break;

  }

  subCategoryCounter++;
  }
  </ul>
  </div>
  }
  </div>
  </div>
  }
  </div>
  </div><!-- /.mega-menu -->
  </li>
  }

Update style.css

.categoryholder{
  margin:15px 0 0 0;
  min-height:210px !important;
}

How to update the hover banner to fix the bug of responsive