Question

这是一个要解释的相当复杂的问题，所以我将尽力弄清楚。我有一个由别人制作的入门主题，在Wordpress中非常高级。我必须使用这个入门主题。问题是我不了解有关该主题的所有内容，因为有许多元素我不知道它们的用途。

对不起，我在本地工作...

基本上，我有以下问题：

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

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

所以，关注我：打开网站时带有汉堡按钮的顶部栏菜单，然后，在单击汉堡时，出现全屏菜单，顶部栏菜单消失。

所以我的问题是，尽管检查员清楚地指出了该顶部栏菜单，但我没有设法使其显示在屏幕上。

我基本上已经尝试了所有方法，尤其是使用z-index。没有结果。

我还尝试在检查器中为除导航菜单以外的所有其他元素“显示：无”，但仍未显示

这是我在浏览器中显示的html代码（试图使它尽可能清晰，尽管它分散在此f..ing入门主题中的多个文件中。）

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

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

导航菜单未显示，CSS问题

0 个答案: