How to highlight selected TopMenu?

8 years ago
Hi nop team,

Do you have any idea to implement highlight color for selected menu?
Could you guide me here

8 years ago
modify in styles.css in Themes/yourtheme/content/ folder.

and add

.headermenu .topmenu li a:active
   color:your color;
8 years ago
That method does not work.
Any other method, please?

8 years ago
add a css class called topmenuactive and do the style there.

and add this script on the top.

<script type="text/javascript>
   $("topmenu ul li a").click(function(){
$("topmenu ul li a").removeClass("topmenuactive");

check whether the jquery.js  included.


use jquery ui menu. then it'll take care of everything.
8 years ago
I think that does not work...
When the page is refreshed, the javascript click event does not fired...

I have added this line...

Now it is working


Thanks elaa for keeping helping,
8 years ago
good job. :)
7 years ago
where is styles.css? do you need to be an admin to edit the colours and change the text, links etc?
7 years ago
the styles.css is located in Presentation/Nop.Web/Themes/yourthemename/content folder.

No. you dont need to be an admin of your site. but you need the ftp access for the site to edit the style.css file.
3 years ago
Hi, there. There is another solution. The idea is to compare generated routes url with current url.

1. Add method IsUrlIsCurrent to \Nop.Web\Extensions\HtmlExtensions.cs

public static bool IsUrlIsCurrent(this HtmlHelper html, string url)
  return html.ViewContext.HttpContext.Request.Url.AbsolutePath.Equals(url);

2. Modify your view ~/Themes/[Your theme]/Views/Catalog/TopMenu.cshtml.
   For example:

@foreach (var topic in Model.Topics)
  url = Url.RouteUrl("Topic", new { SeName = topic.SeName });
    <a href="@url" class="@(Html.IsUrlIsCurrent(url) ? "active" : "")">@topic.Name</a>
3 years ago
Following thing you can also achieve using jquery. Following Below Example.
                <i class="icon-remove menu-close"></i>
                <a class="scroll" href="#intro">Home</a>
                <a class="scroll" href="#about">About</a>
                <a class="scroll" href="#services">Services</a>
                <a class="scroll" href="#team">Team</a>
                <a class="scroll" href="#portfolio">Portfolio</a>
                <a class="scroll" href="#contact">Contact</a>
                 color: #000;

                        $("a.scroll ").click(function() {