我有一个我目前满意的功能性导航栏，但是，我不喜欢它在较小屏幕上的堆叠方式。所以我决定将它转换成带有菜单按钮的窗帘覆盖层。但是，我似乎遇到了一个我还没弄明白的小问题。
网上参考了很多资料后，我已经多次调整代码，以多种不同的组合，但我无法完全按照我想要的方式工作。也许我忽略了什么？
在桌面设备（或屏幕较大的设备）上，将显示正常的导航栏。 在移动设备和平板电脑上，导航栏被移除，当窗帘覆盖使用其中一个/两者和元素显示覆盖菜单时，导航栏被替换。
function openNav() {
document.getElementById("sideNav").style.width = "100%";
}
function closeNav() {
document.getElementById("sideNav").style.width = "0";
}/*//////////[ Sticky NavBar ]//////////*/
/* Toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
.navbar {
overflow: hidden;
background-color: #3586ff;
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
font-size: medium;
}
/* Top Navigation Bar Link Style */
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a.right {
float: right;
}
.navbar a:hover {
background-color: #3586ff;
color: black;
}
.navbar a.active {
background-color: #3586ff;
color: white;
}
/*//////////[ Sticky NavBar ]//////////*/
/*//////////[ Mobile NavBar ]//////////*/
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: rgb(0, 0, 0);
/* Black fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/opacity */
overflow-x: hidden;
transition: 0.5s;
}
/* Position the content inside the overlay */
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
/* The navigation links inside the overlay */
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover,
.overlay a:focus {
color: #f1f1f1;
}
/* Position the close button (top right corner) */
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
img.navi {
overflow: hidden;
width: 60px;
height: 100%;
float: left;
position: -webkit-sticky;
position: sticky;
top: 0;
cursor: pointer;
}
span.navi {
top: 0;
font-size: medium;
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
cursor: pointer;
}
/*//////////[ Mobile NavBar ]//////////*/<div>
<div class="navbar">
<a type="text/html" href="/html/home.html" target="_parent">Home</a>
<a type="text/html" href="/html/join.html" target="_parent">Join Us!</a>
<a type="text/html" href="#" class="active">Chat Room</a>
<a type="text/html" href="/html/showings.html" target="_parent">Showings</a>
<a type="text/html" href="/html/gamerooms.html" target="_parent">Game Rooms</a>
<a type="text/html" href="/html/openforuse.html" target="_parent">Open Link</a>
<a type="text/html" href="/html/login.html" target="_parent" class="right">Login</a>
</div>
<div id="sideNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-nav">
<a type="text/html" href="/html/home.html" target="_parent">Home</a>
<a type="text/html" href="/html/join.html" target="_parent">Join Us!</a>
<a type="text/html" href="#" class="active">Chat Room</a>
<a type="text/html" href="/html/showings.html" target="_parent">Showings</a>
<a type="text/html" href="/html/gamerooms.html" target="_parent">Game Rooms</a>
<a type="text/html" href="/html/openforuse.html" target="_parent">Open Link</a>
<a type="text/html" href="/html/login.html" target="_parent" class="right">Login</a>
</div>
<img class="navi" src="/img/img/Navi.png" alt="Navi" onclick="openNav()" />
<span class="navi" onclick="openNav()">Navigation</span>
</div>
</div>
<script src="/js/mobile_menu.js"></script>我的页脚有一个波浪动画，出现在窗帘覆盖层的顶部。无论如何要在不破坏浪潮的情况下防止这种情况？
/*//////////[ Footer ]//////////*/
/*///////[ Wave & NavBar ]//////*/
/* Provides a footer with a navbar. It includes links to other pages and to social media along with the site logo. */
.footer {
position: relative;
/* Specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky). */
top: 100px;
width: 100%;
/* Sets the width of an element. */
background: #3586ff;
min-height: 100px;
/* Specifies the minimum height of an element. */
padding: 20px 50px;
display: flex;
/* Defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children. */
justify-content: center;
align-items: center;
flex-direction: column;
/* Defines the direction of the flexible items. */
}
.social-icon,
.menu {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 10px 0;
flex-wrap: wrap;
/* Specifies whether flex items are forced onto one line or can wrap onto multiple lines. */
}
.social-icon__item,
.menu__item {
list-style: none
}
.social-icon__link {
font-size: 2rem;
color: #fff;
margin: 0 10px;
display: inline-block;
transition: 0.5s;
/* Specifies the speed curve of the transition effect. */
}
.social-icon__link:hover {
transform: translateY(-10px)
}
.menu__link {
font-size: 1.2rem;
color: #fff;
margin: 0 10px;
display: inline-block;
transition: 0.5s;
/* Specifies the speed curve of the transition effect. */
text-decoration: none;
opacity: 0.75;
/* Sets the opacity level for an element. */
font-weight: 300;
/* Specifies the weight of a font. */
}
.menu__link:hover {
opacity: 1
}
.footer p {
color: #fff;
margin: 15px 0 10px 0;
font-size: 1rem;
font-weight: 300;
}
.wave {
position: absolute;
top: -100px;
left: 0;
/* Specifies the left position of a positioned element. */
width: 100%;
height: 100px;
/* Sets the height of an element. */
background: url("https://i.ibb.co/wQZVxxk/wave.png");
background-size: 1000px 100px;
/* Specifies the size of the background images. */
}
.wave#wave1 {
z-index: 1000;
/* Specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. */
opacity: 1;
bottom: 0;
/* Specifies the bottom position of a positioned element. */
animation: animateWaves 4s linear infinite;
/* Defines a CSS animation. */
}
.wave#wave2 {
z-index: 999;
opacity: 0.5;
bottom: 10px;
animation: animate 4s linear infinite !important;
}
.wave#wave3 {
z-index: 1000;
opacity: 0.2;
bottom: 15px;
animation: animateWaves 3s linear infinite;
}
.wave#wave4 {
z-index: 999;
opacity: 0.7;
bottom: 20px;
animation: animate 3s linear infinite;
}
@keyframes animateWaves {
0% {
background-position-x: 1000px
}
/* Specifies the starting position of an animation. */
100% {
background-positon-x: 0px
}
/* Specifies the ending position of an animation. */
}
@keyframes animate {
0% {
background-position-x: -1000px
}
100% {
background-positon-x: 0px
}
}
/*///////[ Wave & NavBar ]//////*/
/*//////////[ Footer ]//////////*/<footer class="footer">
<div class="waves">
<div class="wave" id="wave1"></div>
<div class="wave" id="wave2"></div>
<div class="wave" id="wave3"></div>
<div class="wave" id="wave4"></div>
</div>
<div>
<img src="/img/favicons/favicon.svg" alt="Logo" height="50" width="50" />
</div>
<ul class="social-icon">
<li class="social-icon__item">
<a title="Discord Link" class="social-icon__link" href="https://discord.gg/">
<ion-icon name="logo-discord"></ion-icon>
</a>
</li>
<li class="social-icon__item">
<a title="FaceBook Link" class="social-icon__link" href="#">
<ion-icon name="logo-facebook"></ion-icon>
</a>
</li>
<li class="social-icon__item">
<a title="Twitter Link" class="social-icon__link" href="#">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</li>
<li class="social-icon__item">
<a title="LinkedIn Link" class="social-icon__link" href="#">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
</li>
<li class="social-icon__item">
<a title="Instagram Link" class="social-icon__link" href="#">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
</ul>
<ul class="menu">
<li class="menu__item"><a class="menu__link" href="/html/home.html">Home</a></li>
<li class="menu__item"><a class="menu__link" href="/html/welcome.html">About</a></li>
<li class="menu__item"><a class="menu__link" href="/html/docs.html">Documents</a></li>
<li class="menu__item"><a class="menu__link" href="/html/privacy.html">Privacy</a></li>
<li class="menu__item"><a class="menu__link" href="/html/terms.html">Terms</a></li>
<li class="menu__item"><a class="menu__link" href="/html/services.html">Services</a></li>
<li class="menu__item"><a class="menu__link" href="mailto:someone">Contact GZ</a></li>
</ul>
<p>©Company | All Rights Reserved</p>
</footer>
```