It seems that many people are having trouble in targeting the “current” state for a link in the Prestashop top menu. In this quick tip, we will see how to do it, and we’ll also go beyond the basics and show the topmost parent for current subcategories and other pages.

Version used: Prestashop 1.5.3 (compatible with all 1.5 top menus)

Step 1 – Inspecting the Prestashop top menu and preparing files

First of all, let’s have a look at the top menu, and see what can be done to target the “current” class. Click on any top level category of your shop, and fire up your favorite debugging toolbar (I’ll use Chrome Developer Tools in this example)

As you can see, when in a category, that very same link’s parent is given the class sfHoverForce. Easy enough to target, isn’t it?

Now, it’s bad practice to directly edit core files, therefore we will use an override for the stylesheet, and another one for the javascript. Go to the modules folder, then blocktopmenu, and copy the css/ folder. Reach your theme folder, open css/, and, if not already there, create a new subfolder called modules. Inside it, create a new folder named blocktopmenu, and finally paste the css folder inside this.

You might also want to copy the entire img/ folder of the module inside this one (not css/, the parent), so that you can see images.

For the javascript, go back to the original module’s folder, open js/ and copy superfish-modified.js. Again, in your theme’s folder, open js/, then modules/ (which should already be there, if not, create it), and create another folder named, useless to say, blocktopmenu. Inside it, create one last folder called js, and paste the superfish file inside it.

If you did it correctly, you should have the following structure:

theme_name/css/modules/blocktopmenu/css/superfish-modified.css

theme_name/css/modules/blocktopmenu/img/all image files…

theme_name/js/modules/blocktopmenu/js/superfish-modified.js

If not, or if all this sounded like vodoo magic to you, have a look at the official Prestashop documentation about overriding a module’s default behavior.

Step 2 – Adding the current menu item’s style

Now that our files are properly setup, open up superfish-modified.css (not the original one, but the one you copied over in the theme’s folder). Please note that I’m using the default Prestashop template for this example. Let’s target our “current” class first. At the end of the file, add the following style:

.sf-menu > li.sfHoverForce > a{ background-color: white; color: #000 !important; text-shadow: none; }

Explanation: Just some ordinary css. I’m targeting the anchor tag(a) which is direct descendant of the shHoverForce-classed li, which is itself direct child of the topmost menu element. I’m doing this, and with descendant selectors, since I don’t want any other sub-link to have the “current” state’s white background, but only the top level ones. Of course, if you do want it, feel free to use a regular selector. Also note that I’m just using some ordinary styles for demonstration purposes; feel free to change the values as you like.

If we now reload the page, we will see something like this

NOTE: the top menu block is bugged in 1.5.3.1 (with chrome at least). Therefore, when you’re in a category, not all subcategories will show up in the menu. Fixing it is beyond the scope of this tutorial, thus I will not cover it.

You will see we are currently targeting the actual category we are in. But what if we are in a subcategory, or other pages? Let’s look at the other pages first, and the class they have been assigned.

I created 2 more links in the top menu, one linked to a product (the Belkin Folio) and another one linked to a CMS page. By inspecting those links when in the respective pages, I can see they’ve been assigned the sfHover class. Weird. This is not consistent, Prestashop Team! … But let’s put complaints aside and deal with it. We could target that class, of course, but that’s also the name of the class assigned to an element when hovering on it with the mouse, and this is bad if we want to have two separate styles. We’ll need to add some javascript to handle this.

Step 3 – Target other pages and subcategories

First, open up superfish-modified.js (again, the override!). Locate the jQuery wrapper at about line 122 (Prestashop 1.5.3.1). You will see something like this:

jQuery(function(){ jQuery('ul.sf-menu').superfish(); });

Inside that wrapper, after the superfish() function call, add the following

$('.sfHover').addClass('sfHoverForce'); // will only target current links, since it's fired upod page load

And this way, as written in the comment, we are appending our sfHoverForce class to the elements that already have .sfHover when the page loads (therefore, we don’t affect any further hover state). refresh the product or CMS page, and you’ll see it’s now properly targeted. Cool, but we’re not done yet. I added a subcategory to Accessories, and I can see Accessories itself is not set as “current” if I’m in that subcategory. We have to fix this, and it will be a bit more complex. In the very same javascript file, add the following code after that last one we just wrote:

function recursiveCheck(element) { if (!element.length) return; var the_ul = element.parent(); // unordered list parent if (the_ul.hasClass('sf-menu')) element.addClass('sfHoverForce'); //means it is another list item, add the class else recursiveCheck(the_ul.parent()); } recursiveCheck($('.sfHoverForce'));

Explanation: wait! Don’t run away! First we create a “recursive function”. This function grabs the current sub-link with the class sfHoverState as the only argument. First, it checks that there currently is at least one element with that class applied. If not, it breaks, otherwise we might end up in an infinite loop. It then creates a variable for its direct parent (the unordered list). If this parent is the top most menu element (with the class sf-menu) we add the sfHoverForce class to the current list item. If not, we call the very same function again, and this time the argument we pass is the parent ul’s parent, therefore another list item, one level higher than our first one. We go on with this until we reach the top level, and add the current state to our top level link. This will work with the many sub-category levels you can imagine. Lastly, we call the function by targeting the only link that currently has the sfHoverForce class as the page loads (alas, our subcategory in this case).

Reload the page in any subcategory, and you should have the links as you want!