Блог

Я пытаюсь сделать значок гамбургера кликабельным, чтобы он открывал навигационное меню верхней панели. Но это не работает, я неправильно его нацелил? Он скрывает верхнюю панель и отображает значок гамбургера, когда я изменяю размер окна, но при щелчке ничего не происходит. Я пробовал играть с несколькими классами, чтобы нацелиться на верхнюю панель, но все безрезультатно. Заключается ли проблема в том, как я отображаю верхнюю панель?

Пожалуйста, найдите код ниже.

HTML (заголовок)

 lt;header class="header" id="myHeader"gt;   lt;div class="container"gt;  lt;?php  $custom_logo_id = get_theme_mod('custom_logo');  $logo = wp_get_attachment_image_src($custom_logo_id, 'full');   if (has_custom_logo()) {  echo 'lt;a href="http://mywebpage.test/" class="site-link pull-left"gt; lt;img class="site-logo" src="' . esc_url($logo[0]) . '" alt="' . get_bloginfo('name') . '"gt; lt;/agt;';  } else {  echo 'lt;h1 class="site-logo"gt;' . get_bloginfo('name') . 'lt;/h1gt;';  }  ?gt;   lt;label for="toggle"gt;amp;#9776lt;/labelgt;  lt;input type="checkbox" class="toggle"gt;  lt;?php  wp_nav_menu(  array(  'theme_location' =gt; 'top-menu',  'menu_class' =gt; 'top-bar'  )  );  ?gt;  lt;/divgt;  lt;/headergt;  

CSS

 header .container {  height: 100%;  z-index: 10;  display: flex;  align-items: center;  position: relative; }  header .container .top-bar {  list-style-type: none;  display: flex; }  header .container .site-link, .site-logo {  margin-right: auto; }  header .top-bar li a {  padding: 0 2rem;  color: var(--off_white);  font-size: 1.3rem;  text-decoration: none;  z-index: 1000; }  header .top-bar li.current-menu-item a {  background: var(--secondary);  padding: 2.5rem 2rem 2.5rem 2rem; }  header label {  cursor: pointer;  font-size: 2rem;  color: var(--off_white);  display: none; }  .toggle {  display: none; }  @media (max-width: 992px) {  header label {  display: block;  }  .top-bar li {  display: none;  }  .toggle:checked~li {  display: block;  } }