Jump to content

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


simcoweb

Recommended Posts

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. 

Link to comment
Share on other sites

  • 1 month later...

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 by wright67uk
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.