Итак, у меня есть простая NAV, с которой я столкнулся, и я пытаюсь добавить значок гамбургера, который будет отображаться только при небольшом экране.Невозможно скрыть элемент в меню
В настоящее время мой гамбургер - это просто слово «Меню», но я хочу, чтобы это было скрыто по умолчанию. Однако мой код переопределяется дисплеем: inline, который ранее был в коде. даже если я добавлю!
У кого-нибудь есть идеи относительно того, как я могу скрыть элемент меню?
JSFIDDLE https://jsfiddle.net/Lwwgpx9k/
Мой код находится ниже.
.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
}
r u using bootstrap –
Нет, я использую сценарий меню, который я нашел в Интернете, который я изменил по своему вкусу. Я добавил ссылку JSFiddle тоже – level42