Html 导航菜单未显示，css问题

这是一个需要解释的相当复杂的问题，因此我将尽可能清楚地解释。我有一个由其他人创建的启动主题，在Wordpress中非常先进。我必须使用这个起始主题。问题是我并不完全理解这个主题，因为有很多元素我不知道它们的用途

对不起，我在当地工作

基本上，我有以下问题：

我创建了一个菜单，只有在点击汉堡菜单按钮时才会出现和消失。它占据了整个屏幕。它起作用了。但也许这是我的问题的一部分

然后我有我的常规标题，这是我的网站的第一个屏幕。这里我想要一份顶部的菜单。但我无法显示另一个导航菜单

所以，跟我来：打开网站时，顶栏菜单上有汉堡按钮，然后，当点击汉堡时，全屏菜单出现，顶栏菜单消失

所以，我的问题是，我没有设法使这个顶部栏菜单显示在屏幕上，尽管检查员明确指出它在那里

我基本上什么都试过了，特别是玩z-index。没有结果

除导航菜单外，我还尝试在inspector中为所有其他元素显示“display:none”，但它仍然没有显示

这是我的html代码，如浏览器中所示（尽管它分散在这个f..ing starter主题中的几个文件中，但试图使它尽可能清晰）

这是到达站点时第一个屏幕的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代码

.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;
}

---

所以，我想要的是屏幕上显示的导航栏顶部菜单项。

你有密码笔吗？需要查看您的问题plz..是的，请提供一个适当的地方，我们可以看看这个活。这里可能是一个可执行的代码段，一个JSFIDLE/codepen，…我猜你打开菜单的汉堡按钮可能需要一些额外的JavaScript，到那时仍然会丢失，谁知道还有什么（一些框架或类似框架的样式表/脚本。）抱歉，伙计们，对开发来说还是个新手。你说得对。我要试试密码笔。

.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;
}