How Can I Unassign A Class For @media controls

[simcoweb]

I have Wordpress based site where i've included a class for the main menu that produces a hover and shadow effect. Problem is it breaks the menu in the fully responsive mode when the display adjusts for the viewing dimensions. So I need to remove that class from the menu for anything related to the @media controls. 

 

The site is viewable here: http://ailimconsulting.com

 

If you view it full screen then you'll see the hover effect. Shrink it down and you'll see the menu collapses (it's designed to) but when you use the menu the shadow/hover effect is still present  and 'breaks' the menu (loooks like jumbled crap). We just want to remove the hover effect for viewing on mobile devices.

 

I'm not sure if there's a CSS way to 'remove' a class. This may have to be done with jQuery. I'm looking for options and if anyone knows how I would either remove or counteract the float-shadow class. 

 

Thanks.

[adam_bray]

It sounds like you're overthinking it. What's stopping you undoing the shadow in the mobile class?

 

EG -

/*Normal site*/
.example {
font-weight: bold;
}

/*Mobile site*/
.example {
font-weight: normal;
}

[simcoweb]

Thanks for the response and the idea. I considered that. The problem is there's about a half dozen @media controls to consider and the .float-shadow class contains 40 lines of CSS code. That would add about 240 extra lines of code to counteract the original instructions. Essentially a lot of extra bloat. It would be much simpler if there was a method of removing the CSS class from the menu completely. I've been looking at a potential solution with jQuery using their removeClass function but haven't had any luck with the proper syntax to determine the browser width and trigger the removal of the class. If you're familiar with jQuery please, by all means, post a function that you think would accomplish this.

[simcoweb]

Perhaps this will help. Here's the code creating the float-shadow effect. I've tried several variations within the @media directives to 'turn off' the float-shadow effects (or, disable them basically). But to no avail. Perhaps you have some insight on which directives need to be present and what the settings are?

/* Float Shadow */
.float-shadow {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 0%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.float-shadow:hover, .float-shadow:focus, .float-shadow:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}
.float-shadow:hover:before, .float-shadow:focus:before, .float-shadow:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

[kicken]

You're approaching the problem the wrong way. There is not any way (yet) in css to just disable another previously applied rule. Sometimes you can undo it by replacing it with a new rule, but not always.

 

What you should be doing is having completely separate @media rules for your desktop styles and mobile styles. That way your desktop shadow styles are never applied in the first place when using the mobile view. The only styles that you'll want to have outside of one of the @media rules are styles that you truly want to be applied in all situations. Any styles you applied "only on desktops" or "only on mobile" belong inside a corresponding @media rule.

[simcoweb]

Brilliant! You're right, I wasn't even thinking in that direction. Probably because I used the CSS Classes element of the Wordpress custom menus to simply 'assign' the class to the menu thinking that I could configure a way to 'unassign' it later. So, as you suggested, I incorporated the code into an @media screen directive and, so far, it works perfectly. It displays on my computer but is removed on mobile devices.

 

However, there's still going to be this issue of browser width. I'm not 100% certain how to handle that.

[cssfreakie]

In addition to Kicken's respons, you might want to have a look at a closely related approach as seen in Twitter's Bootstrap with classes like (.col-xs- .col-sm- .col-md- .col-lg-). This is another approach assuming you are able to add classes in the html (which works in combination with media queries). Almost the same, but with additional approach.

You can see both approaches here.

Notice though they use LESS, which might confuse at first. LESS is not needed in anyway though.

 

Normal mediaqueries look like this:

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 
	/* place normal css here */
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
	/* place normal css here */
        .example {font-weight: normal;}
}

/* Landscape phones and down */
@media (max-width: 480px) {
	/* place normal css here */    
}

Edited January 14, 2015 by cssfreakie