Troubleshooting: W3 Total Cache Mess Up with WordPress Navigation Menu

Most of us will install a caching plugin in WordPress for performance improvement. I do so on most websites when clients ask for a quick speed tuning. There are quite a few good FREE caching plugins available, and they are all doing a decent work. But sometime, you have to realized that, it may bring negative impact on your website. This time, it is W3TC – W3 Total Cache.

Among the popular free caching plugins, I like Hyper Cache. I know a lot of recommendations are given to W3 Total cache, so I decided to give it a try. It does what other caching plugins do, speed up webpage loading time. I was pretty happy for a while until I found the drop-down menu was messed up.

The Symptom

The drop-down menu should look like

drop-down-menu-with-arrow

But after activating W3TC, the indicator “arrow” following the menu item is gone.

drop-down-menu-with-no-arrow

The problem is very unpredictable, as the “arrow” appears on some pages, but not on the others. Tried few different options related to HTML & CSS, nothing really helped. A quick Google search including search in WordPress.Org unveiled the fact that, this is a known bug for W3TC. The version installed is 0.9.2.11, and WordPress version being tested is 3.6RC2 and 3.5.2.

The Solution

Is W3 Total Cache the best in its group? It actually doesn’t matter. Because caching is not the only thing that matters to a website performance, especially when there are choices. I wouldn’t trade performance for proper function & layout.

After switching to Hyper Cache, the navigation menu displays properly without any problem.

You may want to take a note: the following line of code must be added to wp-config.php to make Hyper Cache work.

// Active Hyper Cache
define('WP_CACHE', true);