Close

Custom style for final level/child of drop-down

baloghc
10 years ago
#3833 Quote
Avatar
  • 79
I added a background image of an arrow to our subcategories. (Seen here: http://oi40.tinypic.com/28jwv7o.jpg)

Is there a way to remove it from the final "child" or level of each drop-down, whether that be at level 3, 4, etc?
Nop 3.7 - ArtFactory
Nop 4.0 - Lavella, Venture, Smart, ArtFactory
Deni
10 years ago
#3837 Quote
Avatar
  • Moderator
  • 389
Hi, IMPRINTABLESWAREHOUSE

You have to change the logic in \Plugins\SevenSpikes.Nop.Plugins.MegaMenu\Views\MegaMenuCategoryMenuTemplate.InfiniteCategories.cshtml. You must replace this code

  
<li>
            <a href="@Url.RouteUrl("Category", new { SeName = subCategory.CategoryModel.SeName })" title="@subCategory.CategoryModel.Name">@subCategory.CategoryModel.Name</a>
            @if (subCategory.SubCategories.Count > 0)
            {
            <ul class="sublist">
                @CreateSubLists(subCategory.SubCategories, categoriesCountSetting, subCategory.CategoryModel.SeName)
            </ul>
            }
        </li>


with this one

<li>
            @if (subCategory.SubCategories.Count > 0)
            {
            <a href="@Url.RouteUrl("Category", new { SeName = subCategory.CategoryModel.SeName })" title="@subCategory.CategoryModel.Name">@subCategory.CategoryModel.Name</a>
            
            <ul class="sublist">
                @CreateSubLists(subCategory.SubCategories, categoriesCountSetting, subCategory.CategoryModel.SeName)
            </ul>
            }
            else{
            <a class="noBackgroundClass" href="@Url.RouteUrl("Category", new { SeName = subCategory.CategoryModel.SeName })" title="@subCategory.CategoryModel.Name">@subCategory.CategoryModel.Name</a>
           }
        </li>


Now you can remove the background via noBackgroundClass:

.noBackgroundClass {
     background-image: none;
}

I hope this helped!
Best Regards,
Mladen Staykov
Nop-Templates.com
baloghc
10 years ago
#3846 Quote
Avatar
  • 79
I accomplished this in the Deafault Clean theme using the following CSS:

.mega-menu .sublist .noBackgroundClass {
  background: white;
}

.mega-menu .sublist .noBackgroundClass a {
  color:black;
}

.mega-menu .sublist .noBackgroundClass:hover {
  background: white;
  color:black;
}

Thank you for all your help!!
Nop 3.7 - ArtFactory
Nop 4.0 - Lavella, Venture, Smart, ArtFactory