Unable to hide item in menu

Question

So, I have a simple NAV that I came up with, and I'm trying to add a burger icon that will only show up when the screen is small.

Currently, my burger is just the word Menu, but I'd like to have this hidden by default. However, my code is overridden by a display:inline, that is earlier in the code. even if I add !Important.

Any one have any ideas as to how I can hide the menu element?

JSFIDDLE https://jsfiddle.net/Lwwgpx9k/

My code is below.

.html

<div class="nav">
   <ul>
    <li class="hidden">Menu</li>
    <li class="home"><a class="active" href="#">Home</a></li>
    <li class="gallery"><a href="#">Gallery</a></li>
    <li class="tutorials"><a href="#">Tutorials</a></li>
    <li class="about"><a href="#">About</a></li>
  </ul>
</div>

.css

    body {
  background: #333;
}

.nav ul {
  color: #e6e9e9;
  position: fixed;
  top: 60px;
  padding-left: 5%;
  text-align: center;
  margin: 0;
}

.nav ul li {
  line-height: 35px;
  float: left;
  width: 120px;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 0px 10px;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

.nav ul li:hover {
  background: #6A1B9A;
  color: #e6e9e9;
}

.nav ul li ul {
  padding: 0;
  position: absolute;
  top: 35px;
  left: 0;
  text-align: left;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -transition: opacity 0.5s;
}

.nav ul li ul li {
  width: 200px;
  background: #555;
  display: block;
  color: #e6e9e9;
}

.nav ul li ul li:hover {
  background: #6A1B9A;
}

.nav ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
  transition-delay: 2s;
  -webkit-transition-delay: 2s;
  /* Safari */
}

.nav a {
  font-size: 1.4em;
  text-decoration: none;
  color: #e6e9e9;
  display: block;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #6A1B9A;
  color: #e6e9e9;
}

.nav a.active {
  background-color: #6A1B9A;
  color: #e6e9e9;
  cursor: default;
}

.nav ul {
  color: #e6e9e9;
  position: fixed;
  top: 60px;
  padding-left: 5%;
  text-align: center;
  margin: 0;
}

.nav ul li {
  line-height: 35px;
  float: left;
  width: 120px;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 0px 10px;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

.nav ul li:hover {
  background: #6A1B9A;
  color: #e6e9e9;
}

.nav ul li ul {
  padding: 0;
  position: absolute;
  top: 35px;
  left: 0;
  text-align: left;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -transition: opacity 0.5s;
}

.nav ul li ul li {
  width: 200px;
  background: #555;
  display: block;
  color: #e6e9e9;
}

.nav ul li ul li:hover {
  background: #6A1B9A;
}

.nav ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
  transition-delay: 2s;
  -webkit-transition-delay: 2s;
  /* Safari */
}

.nav a {
  font-size: 1.4em;
  text-decoration: none;
  color: #e6e9e9;
  display: block;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #6A1B9A;
  color: #e6e9e9;
}

.nav a.active {
  background-color: #6A1B9A;
  color: #e6e9e9;
  cursor: default;
}

.hidden {
  display: none; !important
}

Answer 1

your problem is here

hidden {
  display: none; !important<---- this important should be inside ";"
}

it should be

hidden {
  display: none !important; 
}