Removing a class in a CSS stylesheet - css

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>Link 1</li>
<li>Link 2</li>
...
</ul>
</nav>
<nav class="nav-small">
<ul>
<li><i class="fa fa-plus"></i>Link 1</li>
<li><i class="fa fa-minus"></i>Link 2</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!

Answer 2

Welcome on board! Please try to be more concise on your questions :-)
My answer:
The code you're posting is JavaScript. jQuery, to be precise. This certainly doesn't work in CSS.
But the better solution is to use the media query not to remove a class, but to alter it. Example:
.foo { width:200px; }
#media print
{
.foo { width:100px; }
}
EDIT after the CSS was added to the question:
The trailing ; looks like a syntax error to me: Change letter-spacing: 0.1em; }; to letter-spacing: 0.1em; }
Other than that the media query looks good in principle. Try adding background:red to see if it works at all :-)

Answer 3

$("nav").removeClass("navigation"); is JavaScript, not CSS. Conceptually, you can not add/remove a class in CSS - it is only a style description language.
What you can do in CSS, however, is show/hide content for a specific device width ("breakpoint"):
.navigation {
display: block;
/* your style definitions for nav */
}
#media only screen and (max-device-width: 800px) {
.navigation {
display: none;
}
}