Меню Nav не отображается, проблема css

Question

это довольно сложный вопрос для объяснения, поэтому я постараюсь быть максимально ясным. У меня есть начальная тема, созданная кем-то другим, очень продвинутая в Wordpress. Я должен использовать эту начальную тему. Проблема в том, что я не все понимаю в этой теме, так как есть много элементов, для которых я не знаю, для чего они используются.

Извините, я работаю локально ...

В основном у меня следующая проблема:

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

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

Итак, следуйте за мной: меню верхней панели с кнопкой бургера при открытии сайта, затем при нажатии на бургер появляется полноэкранное меню, меню верхней панелиисчезает.

Так что моя проблема в том, что мне не удается отобразить это меню верхней панели на экране, хотя инспектор четко указывает, что оно там есть.

Я в основном все перепробовал, вчастности, играя с z-index. Безрезультатно.

Я также пытался «отобразить: нет» в инспекторе для всех других элементов, кроме моего навигационного меню, но он все еще не показывает

, вот мой HTML-код, как показанов браузере (пытаясь сделать его как можно более понятным, хотя он разбросан по нескольким файлам в этой начальной теме).

Это HTML-код первого экрана при поступлении на сайт (я знаю,шапка в основном, но что поделаешь ...). Кнопка с гамбургером все еще где-то еще ... Эту тему трудно достать.

Мне очень жаль, что я не могу сделать ее меньше или понятнее. Задайте мне вопросы, если вам нужна дополнительная точность.

<button class="hamburger hamburger--collapse" type="button">
          <span class="hamburger-box">
          <span class="hamburger-inner"></span>
          </span>
    </button>
  <!-- nav -->
      <div >

        <nav class="nav primary-nav" role="navigation">


<div class="menu">
      <div class="menu__items">
        <div class="menu__empty"></div>
        <ul class="menu__list">
          <div class="menu__list-col1">
            <li class="menu__list-item  "><a href="#" class="menu__link">E-sport</a></li>
            <li class="menu__list-item "><a href="#" class="menu__link">Evénements</a></li>
            <li class="menu__list-item "><a href="#" class="menu__link">Team</a></li>
            <li class="menu__list-item "><a href="#" class="menu__link">Gallerie</a></li>
          </div>
          <div class="menu__list-col2"><a href="#" class="menu__link">
            <li class="menu__list-item "><a href="#" class="menu__link">Technologies</a></li>
            <li class="menu__list-item "><a href="#" class="menu__link">Compétences</a></li>
            <li class="menu__list-item "><a href="#" class="menu__link">Partenaires</a></li>
            <li class="menu__list-item "><a href="#" class="menu__link">Status</a></li>
          </div>
        </ul>
        <div class="menu__footer">
          <p class="menu__social">Follow us <a href="#"><i class="fab fa-facebook-f"></i></a></p>
          <ul class="menu__languages">
           <li><a class="menu__link" href="#">Français</a></li> 
            <li><a class="menu__link" href="#">Anglais</a></li>
            </ul>
        </div>
      </div>
      <div class="menu__right">
        <div class="icon"><i class="fas fa-times"></i></div>


      </div>

</div>
    <!-- /footer-layout -->
</nav>      <!-- nav -->
        <!-- wrapper -->
        <div class="wrapper">

            <!-- header -->
            <header class="header clear" role="banner">

            </header>
            <!-- /header -->
<main>
  <header class="header-homepage">
    <nav class="top-nav">
      <div class="top-nav__logo"><a href="#"> <img src="#" alt=""></a></div>
      <ul class="top-nav__items">
        <li class="top-nav__list-item"><a href="#"> Festival</a></li>
        <li class="top-nav__list-item"><a href="#">Esport</a></li>
        <li class="top-nav__list-item"><a href="#">Technologie</a></li>
        <li class="top-nav__list-item top-nav__list-item--last"><a href="#">Compétences</a></li>
      </ul>
    </nav>

  </header>

Вот код scss для полноэкранного меню

nav{

  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -2;
  opacity: 0;

  &.hidden{
    animation: fadeout 0.9s forwards;
  }
  &.active{
    animation: fadein 0.7s forwards;
  }
}





@keyframes fadein {
  0% { opacity: 0; 
  z-index: -2;}
  1% { z-index: 10; }
  100%   { opacity: 1;
    z-index: 10; }
}

@keyframes fadeout{
 0% { opacity: 1;
  z-index: 10; }
 99%   { z-index: 10; }
 100%   { opacity: 0;
  z-index: -2;
}
}


.menu{

  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background-color: #1a1a1a;
  background-image: url('./img/dark-background.jpeg');
  background-size: cover;


  &__items{
    width:50%;
    display:flex;
    flex-direction: column;
    justify-content: flex-start;



  }


  &__list{


    padding-left: 80px;
    padding-right: 40px;
    height:80%;
    font-weight:900;
    font-size: 1.2em;
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;


  }

  &__list-col1{
    width:50%
  }

  &__list-col2{
    width:50%
  }

  &__list-item{
    margin-top: 50px
  }

  &__image{
    width:50%;


  }


  &__footer{
    height:20%;
    border-top-style: solid;
    border-top-color: white;
    border-top-width: 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size:.8em;
    font-weight:100;
   }

  &__social{
    padding-left: 40px;
  }
  &__languages{
    padding-right: 40px;

  }

  &__link{
    text-decoration: none;
    color: #fff;
  }


  &__menu-right{
    width:50%;
    display:flex;
    flex-direction: row;
    align-items: flex-end;
  }



}


// awesome icons
.fab{
  padding-left: 20px;
  font-size: 1.5em;
  color: #fff;
}

button.hamburger{
 position: absolute;
 right: 0;
 z-index: 11;
 padding: 50px
}

Вот код scss для домашней страницы

.header-homepage {
  background-image: url('./img/dark-background2.jpeg');
  min-height: 100vh;
  background-size: cover;
}

.top-nav {
  height: 100px;
  display: flex;
  justify-content: flex-start;
  background-color:red;


  &__logo{
    width: 40%;
  }
  &__items{
    display: flex;
    justify-content: flex-start;
    width: 50%;
  }

  &__list-item{
    width: 25%;
    z-index: 1000;
    color: white;
  }
}

.festival {

  min-height: 50vh;
  display: flex;
  justify-content: flex-start;

  &__text-container{
    width: 50%;
    background-color: blue;

  }

  &__text {
    //position: absolute;
    //top: -70px;
    position: relative;
  }

  &__image-container{
    background-color: purple;
    width: 50%;
  }
  &__image {
    //position: absolute;
    //top: 100px;
    //height: 100%;
    //width: 50%;
    background-color: purple;
  }
}

.esport {
  min-height: 50vh;
}

.technologies { 
  min-height: 50vh;
}

Итак, мне бы хотелось, чтобы элементы верхнего навигационного меню отображались на экране.