Question

I’m trying to create something similar to bootstraps responsive navigation. When I reduce the screen size so that the media-queries kick in, I click on the menu button and the ul slides down. But when I click on the menu button again, the ul sides up but then immediately slides back down. How can I prevent this from happening? Also, bonus points, when I click the menu button and the ul slides down, the background to the right of the menu button is a different color from the rest of the ul/nav. Is there any way to keep the background consistant across the entire nav?

Here’s the jsFiddle with panes: http://jsfiddle.net/scottm28/mRbPd/

Full Screen : http://jsfiddle.net/scottm28/mRbPd/embedded/result/

Answer 1

Fixed it by adding brackets …

http://jsfiddle.net/mRbPd/2/

I believe the different background colours is due to a CSS rendering bug, as it sometimes renders it correctly and sometimes doesn’t. You could always apply the gradients in a class, and quickly remove then reapply them if you’re that desperate for it to work.

This sort of fixes the gradient issue, http://jsfiddle.net/mRbPd/3/ but I imagine it’s quite inefficient reapplying the class as it would mean the browser has to redraw the gradient.