这是代码片段。我正在尝试向我的网站添加粘性导航:https://amrutabuge.com/
添加代码会显示导航,但它不具有粘性,并且汉堡包导航覆盖层不会显示背景。
这是代码
HTML
<!-- navigation bar -->
<div class="navhamburger">
<!-- title or logo to be deleted later-->
<a href="#" class="logo">Title</a>
<!-- hamburger icon -->
<input class="side-menu" type="checkbox" id="side-menu"/>
<label class="hamburger" for="side-menu">
<span class="hamburger-line"></span>
</label>
<!-- menu -->
<nav class="nav">
<ul class="menu">
<li><a href="#">Google Store</a></li>
<li><a href="#">Google Search</a> </li>
<li><a href="#">Spotify</a></li>
<li><a href="#">Spotify Blog</a></li>
<li><a href="#">Squarespace</a></li>
<li><a href="#">Other work</a></li>
</ul>
</nav>
</div>
CSS
* Navigation */
.navhamburger{
background-color: gray;
position: sticky;
top: 0;
width: 100%;
}
/* Logo */
.logo{
display: inline-block;
color: white;
font-size: 60px;
}
/* Nav menu */
.nav{
width: 100%;
height: 100%;
position: fixed;
background-color: white;
overflow: hidden;
max-height: 0;
display: flex;
align-items: center;
justify-content: center;
}
.menu a{
padding: 30px;
color: black;
text-align: center;
left: 0;
margin: 0 auto;
flex: none;
display: flex;
align-items: center;
justify-content: center;
}
.menu a:hover{
/*background-color: gray;*/
opacity: 60%;
}
/* Menu Icon */
.hamburger{
cursor: pointer;
float: right;
padding: 40px 20px;
}/* Style label tag */
.hamburger-line {
background: black;
display: block;
height: 2px;
position: relative;
width: 24px;
} /* Style span tag */
.hamburger-line::before,
.hamburger-line::after{
background: black;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.hamburger-line::before{
top: 5px;
}
.hamburger-line::after{
top: -5px;
}
.side-menu {
display: none;
} /* Hide checkbox */
/* Toggle menu icon */
.side-menu:checked ~ nav{
max-height: 100%;
}
.side-menu:checked ~ .hamburger .hamburger-line {
background: transparent;
}
.side-menu:checked ~ .hamburger .hamburger-line::before {
transform: rotate(-45deg);
top:0;
}
.side-menu:checked ~ .hamburger .hamburger-line::after {
transform: rotate(45deg);
top:0;
}
添加代码会显示导航,但它不具有粘性,并且汉堡包导航覆盖层不会显示背景。