Would it be possible to remove the style information from the cshtml so that we can use CSS to change styles. I have an example below.

Replace CategoryNavigation.cshtml with the code between the hashes and then uss CSS to alter margins.
e.g.
##############################################
@model IList<CategoryNavigationModel>
@using Nop.Core.Domain.Catalog
@using Nop.Core.Infrastructure
@using Nop.Services.Catalog
@using Nop.Web.Models.Catalog
@if (Model.Count > 0)
{
    <div class="block block-category-navigation">
        <div class="title">
            @T("Categories")
        </div>
        <div class="clear">
        </div>
        <div class="listbox">
            <ul>
                @foreach (var category in Model)
                {
                    <li  
                    @if (this.ShouldUseRtlTheme())
                        {
                        <text>class="@(category.IsActive ? "active" : "inactive") navigationlevelright@(category.NumberOfParentCategories)"</text>
                        }
                    else
                    {
                        <text>class="@(category.IsActive ? "active" : "inactive") navigationlevel@(category.NumberOfParentCategories)"</text>
                    }
                    ><a href="@Url.RouteUrl("Category", new { categoryId = category.Id, SeName = category.SeName })">@category.Name
                        @if (category.DisplayNumberOfProducts)
                        {
                            <text> (@(category.NumberOfProducts))</text>
                        }
                    </a></li>
                }
            </ul>
        </div>
    </div>
}
##############################################
and style
.block .listbox ul li.navigationlevel0 a
{
    font-size:1.2em;
    font-weight:bold;
}
.block .listbox ul li.navigationlevel1 a
{
    padding-left:27px;
    font-weight:bold;
    padding-top:3px;
    padding-bottom:3px;
    color: rgb(255, 255, 192);
}

cheers,

Anthony

It could be done if we knew the maximum number of such navigation levels. Have many such styles should we create?

Thanks for responding.

In response, there is already a limit imposed by adding 15px per parent. I had three level in my design and this was wider than the menu. The proposed implementation allows you to use as many as you like and is not limited by width in the same way as the current imlementation, as I can set the margin-left or right to 5px if I want.

As to the number of levels, I created 6 even though I will only be using three.


cheers,

Anthony

I think there should another more elegant solution. I'll think about it.

Hi,

That may be so, but using css is more elegant than hard coded styles?!?!

Thanks for reading.