How Can I Remove A Class Based Upon @media Parameters?

[simcomedia]

I have a WordPress based site that i’ve imported some CSS from GitHub that produces a shadow effect on the main menu. This class is assigned by placing the class name into the css-classes field in the menu builder in WordPress.

The problem stems from the shadow effect breaking the menu when the browser dimensions shrink to accommodate the fully responsive nature of the theme. Therefore, we need to remove the float-shadow class from the menu for any displays under 800 px in width in the @media controls.

I’ve never ‘removed’ a class, only modified the elements of a class, for @media instructions.

You can view the issue here: http://ailimconsulting.com

I’m happy to post the raw code for the shadow effect if needed but you should be able to view it using any of the typical developer tools for Chrome/Firefox. The class that has been assigned for the effect is .float-shadow. I either need to ‘remove’ it or somehow write CSS to counteract it (sounds sloppy).

Any help with a solution would be greatly appreciated. Thanks in advance for any responses!

[Paulie_D]

You can’t remove a class in a media query…only change the properties styled within it as you state.

Offhand, a shadow effect shouldn’t break a menu…so either you override the styles or resort to javascript to remove the class.

Whichever you feel most comfortable with…

[simcomedia]

Thanks for your fast response! I didn’t think there was a CSS method for removing but just had to ask. This may require a jQuery snippet to remove the class from the menu. It’s probably the cleanest way to do it since the .float-shadow CSS has several directives in it which would need to be countered and produce another 40 lines of code.

Any idea if or how an @media query in jQuery would work? I’ve not written one that would identify a screen dimension as the trigger. Once I get that figured out then the remove_class() function would just rid the menu of that class.

[Paulie_D]

http://stackoverflow.com/questions/19291873/window-width-not-the-same-as-media-query

[Author]

Posts