How to show 'active' state for current page in the top menu? 1.6.1.0

[tspl]

Hi Everyone,

 

I am using one-level menu. Prestashop 1.6.1.0, superfish-modified.js version 1.7.4.

 

How to show 'active' state for current page in the top menu?

 

Thank you in advance!

[NemoPS]

This should still work

http://nemops.com/prestashop-top-menu-current-state/#.VfkrlhHzrmg

[tspl]

Hi Nemo1,

 

Thank you for your reply.

 

I added my menu item and their repsective links via the BO Top Horizontal Menu Modules. Inspecting the element at my shop shows that the menu item element has the sfHover class assigned, instead of sfHoverForce, as mentioned in your tutorial.

 

Going forward, I added this at the end of superfish-modified.css (I use li.sfHover instead of li.sfHoverForce):

 

.sf-menu > li.sfHover > a {
    background: white;
    color: #000 !important;}

 

The menu item shows white when clicked, but only momentarily, and later returns to its non-active background color again, after the page link is established.

 

I did not add the rest of the codes as suggested in your tutorial, because in the first place, I cannot find the jQuery wrapper in superfish-modified.js version 1.7.4.

 

I have been searching the forum but could not find any working solution yet. Does anyone know how to solve this issue here? Or how to modify the codes in http://nemops.com/prestashop-top-menu-current-state/#.VfkrlhHzrmg?

 

I am using 1.6.1.0, superfish-modified.js version 1.7.4.

 

Thank you in advance!

[NemoPS]

Actually, adding the sfHoverForce class works for me, I just tested it

[tspl]

But my menu item element has the sfHover class assigned instead. What is missing here for it to work on Prestashop 1.6.1.0 and superfish-modified.js version 1.7.4, one-level menu?

 

I am using default-bootstrap. This is in modules/themeconfigurator/css/theme6.css:

 

#header .sf-menu > li.sfHover > a, #header .sf-menu > li > a:hover, #header .sf-menu > li.sfHoverForce > a {
  color: #fff;
  background: #719f41;
  border-bottom-color: #598b24;}

 

And this is in default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css:

 

  .sf-menu > li.sfHover > a,
  .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {
    background: #333;
    border-bottom-color: #666666;
    color: #fff; }
 

Is this causing some problem to the "active" menu state not showing?

[Paulito]

Hello

 

If you mean this effect:

 

http://screencast.com/t/hPkGIzvn

 

All I used was this code:

 

/*changed horizontal menu active colour */

.sf-menu > li.sfHover > a, .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {background: #719f41;  border-bottom-color: #598b24; color: fff;}

 

Paul

 

PS. Perhaps you could also use this:

 

http://screencast.com/t/N21Fh8mhYio

 

.breadcrumb  {color: #fff; background: #719f41;}

 

Edited September 25, 2015 by Paulito (see edit history)

[tspl]

Hello Paul,

 

The code that you showed has been orginally in the theme6.css and the superfish-modified.css. But, it does not achieve what I want. With the current code, the menu shows white (the color that I want for Active State) when clicked, but only momentarily. The clicked menu item then returns to its non-active background color again, after the page is established.

 

It is not about hover color here but how to show the color changed for the menu item link to the page that is currently being viewed. How do I do that? Somebody who has achieved that can share?

 

Thank you.

[Sharak]

I noticed this bug in recent versions. At first it was working well. Active state was properly shown in top menu. But after some normal changes on the shop (changing categories, products, adding languages etc.) sfHoverForce class stoped being applied. Instead it's sfHover class now, but this is droped right away when I hover other items in topemnu.

 

---

I must say PS team made total mess with this shop. Some css and js remember v.1.4 or even earlier, it has code that is never used in this version and each fix breaks 3 other things, like left/right column activation on theme's preferences (you have to referesh the page to see current state). Another stupid thing was implementing only part of Bootstrap css.