Need help removing CSS class from fully responsive directives in Wordpress theme

[simcoweb]

Greetings. I'm working on a Wordpress site utilizing a fully-responsive theme ( www.ailimconsulting.com ). One of the features that was requested was the integration of a special menu hover effect found at GitHub that creates a shadow below the menu item being moused over ( you can see this effect by visiting the link above ). As part of the fully responsive nature of the theme, when the browser collapses to a certain point or the site is viewed on mobile devices the menu itself collapses to a single-tabbed system. The problem is that the class that controls the shadow float causes this collapsed menu to look like crap. So, we want to remove the directives of this class from all the mobile viewing settings ( the @media controls ). 

 

The effect is added to the menu via the Appearance / Menus in the CSS Classes field in each menu item with the class name of .float-shadow.  

 

The effect works perfectly in full browser mode but needs t be removed from all the @media sections of the CSS that control the fully-responsive nature of the theme in various devices dimensions. For example, these are the @media directives:

 

/*-------------------[320px]------------------*/

@media only screen and ( max-width: 479px ) {

 

}

/*-------------------[480px]------------------*/

@media only screen and ( max-width: 767px ) {

 

}

@media screen and ( max-width: 782px ) {

}

 

@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {

 

}

 

/*-------------------[768px]------------------*/

@media only screen and ( max-width: 980px ) {

 

}

 

 

My question is HOW can I tell these @media controls to NOT display or use the .float-shadow parameters and class. Any help with be much appreciated! If you need the actual CSS for the .float-shadow controls then I'm happy to post it. 

[wright67uk]

I'm not sure what properties .float-shadow contains, but you could just null the values in a new declaration

Eg.

 

/*-------------------[320px]------------------*/

@media only screen and ( max-width: 479px ) {

.float-shadow {display:none;

}

 

display: none will make it hidden and not affect the flow of the layout.

Edited February 1, 2015 by wright67uk

[maxxd]

If you've got the shadow set up as a separate div or span in your navigation, wright67uk is correct about just turning the display off. If it's set up as a style on, say, a list item element, you'll have to turn it off property by property at the lowest screen width you want to display it. As an extraordinarily simple example,

#nav li{
	font-size:1.25em;
	text-shadow:2px 2px rgba(0,0,0,.4);
}
@media screen and(max-width:640px){
	#nav li{
		text-shadow:none;
	}
}

So, when the screen is under 640 pixels wide, there won't be a text-shadow in the #nav menu list items. Above 640 pixels, the line item has text shadows.