Кнопка Toggle не отображается

Question

Я пытаюсь сделать кнопку переключения для моего меню навигации, используя this. Вот это JS погрузчики

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script type="text/javascript" src="js/cycle2.js"></script> 
<script type="text/javascript" src="js/declarativeToggle.js"></script> 

Здесь кнопка меню и меню навигации:

<span data-toggle-target=".site-nav" class="toggle-btn">MENU</span> 
<nav class="site-nav"> 
    <ul class="group"> 
     <li><a href="#">Home</a></li> 
     <li class="hide-small"><a href="#">About us</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">FAQs</a></li> 
     <li><a href="#">Links</a></li> 
     <li><a href="#">Contact us</a></li> 
    </ul> 
</nav> 

А вот CSS, чтобы сделать шоу и скрыть:

.toggle-btn {display: none;} 
.toggle-btn-visible {display: block;} 
.toggle-target-hidden {display: none;} 
.toggle-target-expanded {display: block;} 

@media screen and (max-width: 767px) { 
    .toggle-btn-visible {display: block;} 
    .toggle-target-hidden {display: none;} 
    .toggle-target-expanded {display: block;} 
} 

проблема в том, что когда я загружаю страницу, кнопка MENU не появляется, и она из-за .toggle-btn {display: none;}

Также, когда я удаляю это, он не работает (скрыть/показать).

Что здесь не так?

Answer 1

Вы должны установить .toggle-BTN {дисплей: блок;} в @media экрана и (макс-ширина: 767px)

Ваш CSS должен быть

.toggle-btn {display: none;} 
.toggle-btn-visible {display: block;} 
.toggle-target-hidden {display: none;} 
.toggle-target-expanded {display: block;} 

@media screen and (max-width: 767px) { 
.toggle-btn {display: block;} 
.toggle-btn-visible {display: block;} 
.toggle-target-hidden {display: none;} 
.toggle-target-expanded {display: block;} 
}