Removing a class in a CSS stylesheet

Question

I am trying to make my site mobile accessible. The problem I have is with the nav. I believe it has to do with the class being used on the nav. So what I want to do is remove the class when a mobile device is being used.

I have it in a media query and have changed a number of things to make it look correct on mobile. I read that it is possible to remove a class using

$( "p" ).removeClass( "myClass yourClass" );

I believe mine would be

$( "nav" ).removeClass( "navigation" );

but when put in the stylesheet and put through a css validator, I get

Lexical error at line 104, column 4.
Encountered: "(" (40), after : "$" ( "nav" ).removeClass( "navigation" );

I have no idea how to, or even if I can, fix this. Other pages I have read say this is impossible to do so I am getting conflicting information.

Here is me trying to post code. This everything in my CSS affecting my nav.

nav ul { list-style-type: none;
    margin: 0; 
    padding: 0; }
header nav a { text-decoration: none;
    padding: 10px;
    display: block;
    background-color: #a8e6a8;
    border-bottom: 1px solid #228B22; }
nav a:link { color: #228B22; } 
nav a:visited { color: #568b22; } 
nav a:hover { color: #869DC7; 
    background-color: #EAEAEA; }
.navigation { float: right;
    width: 200px;
    font-weight: bold;
    letter-spacing: 0.1em; }

Here is my unfinished media query.

@media only screen and (max-width: 1024px) {
  body { margin: 0; padding: 0; background-color: #fff; }
  #wrapper { width: auto; min-width: 0; margin: 0; }
  h1 { margin: 0; text-align: center; font-size: 2em; line-height: 200%; }
  nav { float: none; width: auto; }
  nav li { display: inline-block; }
  nav a { padding: 1em; border-style: none; font-size: 1.2em; }
  nav ul { text-align: center; padding: 0; margin: 0; }
  main { margin: 0; padding: 0 1em; font-size: 90%; }
  dd { margin-bottom: 1em; }
  footer { margin: 0; }
  .navigation { float: none;
    width: auto;
    letter-spacing: 0.1em; };
}

Answer 1

Actually, you could add a class with jQuery but I don't believe this is the best way to achieve what you need.

What I have seen many designers doing is having two navs. One for big screens and another for small screens. It can be very handy, as you can work with different html codes too. For example, you can add FontAwesome icons to your mobile nav, add or remove links, etc. So, your html would look like this:

<nav class="nav-big">
  <ul>
    <li><a href="path">Link 1</a></li>
    <li><a href="path">Link 2</a></li>
    ...
  </ul>
</nav>

<nav class="nav-small">
  <ul>
    <li><i class="fa fa-plus"></i><a href="path">Link 1</a></li>
    <li><i class="fa fa-minus"></i><a href="path">Link 2</a></li>
    ...
  </ul>
</nav>

Then, your CSS would look like this:

.nav-big {
...your styles 
}

.nav-small {
  ...your styles
}

@media screen and (min-width: 1024px) {
    .nav-small {
      display: none;
    }
}

@media screen and (max-width: 1023px) {
    .nav-big {
        display: none;
    }
}

You can see something like this working in my Blog and also in another website I developed.

Hope to have helped. If I did, please mark the answer as useful or correct! Thanks!