繁体   English   中英

网站导航栏隐藏在后面<main>

[英]website navigation bar hiding behind behind <main>

我正在建立一个网站,并尝试实现一个固定的导航栏。

HEAD HTML:

<header id="header" style="background: url(images/bg.png);background-position:center bottom; width: 100%; background-repeat: no-repeat; height:550px;-webkit-background-size: cover; -moz-background-size: cover;
-o-background-size: cover;background-size: cover;">

<div class="nav-menu">
  <div id="nav-menu-container">
    <ul>
      <li class="menu-active">home</li>
      <li><a href="blog.html">blog</a></li>
      <li><a href="books.html">books</a></li>
    </ul>
  </div>
</div>
  </header>

如您所见,标题具有背景图像,并且在滚动时,随着图像缓慢向上滚动,导航可以完美地固定在屏幕顶部。

但是,当我滚动到足以显示内容的开头时,导航栏就会消失。

(在标题关闭后以及导航消失后开始的代码片段)

   <main> 
  <section id="intro">
    <div id="introleft">
        <h1>left</h1>
    </div>
    <div id="introright">
        <h1>right</h1>
    </div>
  </section>

CSS:

.nav-menu {
width: 100%;
height: 0 auto;
margin: 0 auto;
padding:auto;
background-color: black;
position: fixed;
top: 0;
}
.nav-menu ul {
    width:100%;
    margin:0 auto;
    padding:0;
    list-style:none;
    overflow: hidden;
    text-align: center;
}
.nav-menu li {
    float: left;
    margin:0;
    padding:0;
    padding: 15px 10px; 
    vertical-align:middle;
    display:inline-block;
    color: white;
    text-decoration: none;
    text-align: center;
}
.nav-menu li a {
    color: white;
    text-decoration: none;
    font-weight: 600;
}
.nav-menu li a:hover {
    color: grey;
}
.menu-active {
    vertical-align:middle;
    display:inline-block;
    color: white;
    text-decoration: none;
    text-align: center;
    font-weight: 600;
}

您可以尝试在css中增加导航栏的z索引

.nav-menu {
z-index:1;
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM