Magento2: Cache activated removes "active" class from main menue

[andidhouse]

Preconditions

1. Magento 2.1 via download, Nginx, PHP7, Varnish, Redis

Steps to reproduce

1. Deactivate caching in admnin --> active class does appear on the main menue when clicking a category/subcategory

Expected result

1. Activate caching: same active class for the main menue is applied

Actual result

1. When activating caching (in our case varnish is installed) the "active" class is gone and the current category/subcategory could not be formatted via css so.

It seems that activating the caching has some influence on the css classes which should never be of course.

[andidhouse]

[JacobDrummond]

@andidhouse, have you written a custom menu template that applies the "active" class in PHP?

If so, you need to modify classes in JS not PHP, as Magento will serve the cached version of your menu (without "active" classes).

[andidhouse]

@JacobDrummond

No - we used a custom template BUT this is also present in the Luma theme or standard theme. Did you check it on your system before asking here? I think you would see it.

Attached is a screenshot of the luma theme navigation active class "sale" - you can see this because it is underlined in orange color. If we now activate the caching in the backend and reload the same page the active class is gone --> the caching deactivates the active class --> main bug.

Do you follow me?

[JacobDrummond]

@andidhouse, I didn't check a fresh install before asking. Usually these sorts of issues are people not understanding block-level caching.

In your case it looks like a real bug, though :)

[andidhouse]

@tkacheva not shure why you remove the frontend label here? This is a frontend issue? Can you pls confirm the issue?

[tkacheva]

@andidhouse Frontent label indicates that it's issue around Frontend framework.

[SKovbel]

Hello.

Have the same problem with enabled Varnish and nav-menu.
Menu doesn't have any active class for any opened categories, menu looks like as for home page.
Without Varnish everything works ok.

Magento ver. 2.1.2, Varnish-4.0.2

[andidhouse]

Over 3 month now. Again not fixed in 2.1.3 - reporting bugs makes no sense if they are fixed in years for us....

[arlycreative]

Any progress with this issue?

[VoidWalker]

Still present in EE 2.1.4

[Radiergummi]

Hey there, any update on this?

[sinisilm]

Still having the same issue in CE 2.1.7

[magento-engcom-team]

@andidhouse, thank you for your report.
The issue is already fixed in 2.2.1

[lano-vargas]

Hello.
Magento 2.1.7
I am currently experience this issue with LiteSpeed server +LiteMage Cache and LiteMage Cache for Magento extension.

Can anyone point me to the fix in 2.2.1 so I can apply a path to my version please?
Thanks.
Juliano

[Yasp0]

Currently running 2.2.2 with Varnish and still having this issue.

With FPC disabled the menu works fine.

[gcampedelli]

I'm having the same issue in Magento 2.2.2 with Varnish and Nginx. Can't solve when cache is enabled.
But with Apache 2 in other server it is not happening.
Any light on this?

[itg-ddanielson]

Having similar issue in 2.2.2 (Varnish + Nginx) . Menu doesn't display on homepage + no active classes

[gcampedelli]

I tried to use -p feature=+esi_ignore_https in Varnish, but it didn't solved the issue, which as @Yasp0 wrote appears when FPC is enabled.

[itg-ddanielson]

My issue was related to a custom module that was throwing a 500 error in the Ajax response. Disabled the module for now and everything works as expected.

[trucatchtraps]

I am experiencing the exact opposite issue. When I have cache disabled the top menu navigation works as expected (no duplicate active categories). But as soon as I enable cache, the top menu starts showing multiple active categories. Basically if you browse to one category then select another category they will both show as active. Or if you head to the homepage, one of the categories will remain active.

[fr33ztyl3]

Same issue as @trucatchtraps. Fresh CE 2.3.2 installation using Luma.

[trucatchtraps]

@fr33ztyl3 I found a solution and I added the complete fix on this stackexchange question. The original poster figured out the solution, I just simplified it and made it easy to create the entire custom module.

https://magento.stackexchange.com/a/286009/14403

[gcampedelli]

I tried to use -p feature=+esi_ignore_https in Varnish, but it didn't solve the issue, which as @Yasp0 wrote appears when FPC is enabled.

I was wrong
I'm actually convinced that the solution is -p feature=+esi_ignore_https in Varnish file. I tried to apply it for the first time didn't work, but them I followed steps describe here: https://pt.slideshare.net/TonyBrown44/magento-2-and-avoiding-the-rabbit-hole

And It worked.