Top Menu - Hamburger Image on categories

Hi all, i am using NopCommerce version 3.90.

I am wondering how to add a hamburger image to the right of the categories drop down on the top menu.

I have tried however it appears next to all of the drop down items, when i only want it to appear next to the word categories.

Has anyone got any ideas on how i can achieve this?

Thanks!

Hi,

You can do so by editing view file.

File Name: CategoryNavigation.cshtml
Path:      ..\Presentation\Nop.Web\Views\Catalog\CategoryNavigation.cshtml

You can add an image next to categories word. If your source is not updated it is on line number 60 you can add <img> after that line

@if (Model.Categories.Count > 0)
{
    <div class="block block-category-navigation">
        <div class="title">
            <strong>@T("Categories")</strong>
      <img src="Your Image Destination">
        </div>
        <div class="listbox">
            <ul class="list">
                @foreach (var category in Model.Categories)
                {
                    @RenderCategoryLine(category)
                }
            </ul>
        </div>
    </div>
}

Hi, thank you for your reply,

this is the code i currently have in this file, this is different to yours?

@model CategoryNavigationModel
@using Nop.Web.Models.Catalog;

@functions{
    public bool BreadCrumbContainsCurrentCategoryId(CategorySimpleModel category)
    {
        if (Model.CurrentCategoryId == 0)
            return false;

        if (category.Id == Model.CurrentCategoryId)
            return true;

        foreach (var subCategory in category.SubCategories)
        {
            if (BreadCrumbContainsCurrentCategoryId(subCategory))
            {
                return true;
            }
        }

        return false;
    }
}



@helper RenderCategoryLine(CategorySimpleModel category)
{
    bool active = category.Id == Model.CurrentCategoryId || category.SubCategories.Count(BreadCrumbContainsCurrentCategoryId) > 0;
    bool last = category.Id == Model.CurrentCategoryId;
    string liClass = active ? "active" : "inactive";
    if (last)
    {
        liClass += " last";
    }
    
    <li class="@liClass">
      <a href="@Url.RouteUrl("Category", new { SeName = category.SeName })">@category.Name
        @if (category.NumberOfProducts.HasValue)
        {  
          <text> </text>@T("Categories.TotalProducts", category.NumberOfProducts.Value)
        }
      </a>
      @{
        if (category.Id == Model.CurrentCategoryId ||
          category.SubCategories.Count(BreadCrumbContainsCurrentCategoryId) > 0)
        {
          if (category.SubCategories.Count > 0)
          {
        <ul class="sublist">
          @foreach (var subCategory in category.SubCategories)
          {
            @RenderCategoryLine(subCategory)
          }
        </ul>
          }
        }
      }
    </li>
}