Navbar isn't clickable in just one section of site

问题: I want the navbar to remain in a fixed position. It works fine but the links aren't clickable in my showcase section. As soon as you scroll down it becomes clickable again....

可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:

问题:

I want the navbar to remain in a fixed position. It works fine but the links aren't clickable in my showcase section. As soon as you scroll down it becomes clickable again. I need help understanding why this is happening

 <nav id="nav-bar">
      <h2 class="logo">
      <span class="txt-primary"><i class="far fa-moon"></i></span> | MMM
    </h2>
      <ul>
        <li class="nav-link"><a href="#about">About</a></li>
        <li class="nav-link"><a href="#service">Services</a></li>
        <li class="nav-link"><a href="#videos">Videos</a></li>
        <li class="nav-link"><a href="#contact">Contact</a></li>
      </ul>
    </nav>

CSS:

#nav-bar {
  display: flex;
  position: fixed;
  width: 100%;
  background: rgba(60,3,56,0.8);
  color: #dbd8e5;
  justify-content: space-between;
  padding: 0.4rem;
}

#nav-bar ul {
  display: flex;
  align-items: center;
}

#nav-bar ul li a {
  padding: 0.55rem;
  color: #7c72a0;
}
#nav-bar ul li a:hover {
  background: #5f0d45;
  color: #dbd8e5;
  padding: 0.75rem;
}

回答1:

Add a z-index to your #nav-bar to stack it higher than the "showcase section".

z-index: 99999;

Any element that has a position value other than the default of static can be stacked on the z-axis (your nav is position: fixed;). Higher numbers are on top.

You can set a very high meaningless value like 99999, but I recommend giving it a number that makes sense and you can manage. Find out the z-index of the "showcase section" and set it higher than that. If no z-index is set, than a simple z-index: 1; could work (but sense its a nav a higher number would be better).

If you use sass or less you can keep track easier by setting variables for your sites z-index's.

Also, read about the stacking context, because it gets more complicated than just setting higher numbers.

Good luck!

发表于 2019-03-26 05:58
阅读 ( 145 )
分类：sof

部分文章转自于网络，若有侵权请联系我们删除

Navbar isn't clickable in just one section of site

问题:

回答1:

你可能感兴趣的文章

随机文章

相关问题

条评论

赞助商

作家榜 »

最新公告