level42 level42 - 12 days ago 7
CSS Question

Unable to hide item in menu

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

your problem is here

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

it should be

hidden {
  display: none !important; 
}