如何解决固定移动菜单和徽标作为较小屏幕的标题
我在此文件中有一个用于更大屏幕的侧面导航菜单。我想为手机和宽度小于1024px的较小屏幕创建导航栏。我曾尝试将移动导航栏隐藏起来以显示更大的屏幕，但它确实起作用了。我需要一些链接到我的页面
我希望它看起来像这样 
var slideIndex = 0;
var slides = document.getElementsByClassName("home-page-slides");
showSlides();
function showSlides() {
var slideLength = slides.length;
// Fade in the slide
setTimeout(function() {
if (slideIndex == slideLength) {
slideIndex = 0;
}
slides[slideIndex].classList.add("fadeIn");
},10);
//Fade out the SLide
setTimeout(function() {
if (slideIndex == slideLength) {
slideIndex = 0;
}
slides[slideIndex].classList.remove("fadeIn");
},3980);
slideIndex++;
setTimeout(showSlides,4000);
}/*----------------------------------------------------
@Navigation menu
-----------------------------------------------------*/
.logo {
padding: 8px;
margin: 20px 0;
}
.navbar {
height: 100%;
width: 300px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
}
.navbar a {
display: block;
text-decoration: none;
font-family: 'Nunito Sans',sans-serif;
font-size: 13px;
padding: 9px;
}
ul {
padding-left: 0px;
margin-left: 0px;
}
ul li {
list-style: none;
padding-left: 0px;
margin-left: 0px;
}
.navbarFooter {
position: relative;
right: 0;
left: 0;
text-align: center;
}
.divider {
width: 16%;
text-align: center;
position: relative;
display: inline-block;
vertical-align: middle;
border-bottom: 1px solid rgba(0,0.3);
}
.navFContent {
position: relative;
margin-top: 50px;
}
/*----------------------------------------------------
@Home Page
-----------------------------------------------------*/
.slideshow-container,.main {
width: calc(100%-300px);
height: 100vh;
min-height: 100vh;
}
.desc-container {
position: absolute;
bottom: 40px;
margin-left: 315px;
}
.desc {
margin: auto;
width: 450px;
height: 250px;
position: relative;
}
.home-page-slides {
width: 100%;
height: 100vh;
min-height: 100vh;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
.home-page {
height: 100vh;
min-height: 100vh;
width: 100%;
}
.home-page-slides img {
height: 100vh;
min-height: 100vh;
width: 100%;
background-position: top;
}<base href="https://happy-kepler-414939.netlify.app/" /> <!-- insert by SO editor -->
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;1,200&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" sizes="" href="logos/favicon2.png">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/event.css">
<link rel="stylesheet" href="css/restaurant.css">
<link rel="stylesheet" href="css/memorial.css">
<link rel="stylesheet" href="css/venue.css">
<link rel="stylesheet" href="css/portfolio.css">
<link rel="stylesheet" href="css/responsive.css">
<div class="navbar whitebg" id="navbar">
<div id="banner" class="mobile-banner">
<div class="mobile-logo"></div>
<div id="mobile" class="mobile-menu">
<a onClick="openNav()">
<div class="open">
<div id="burger" class="burger">
<div class="bun01"></div>
<div class="patty"></div>
<div class="bun02"></div>
</div>
</div>
</a>
</div>
</div>
<div class="main-nav">
<nav class="menu centertext fontlight">
<ul>
<img class="logo" src="logos/mainLogo.png" alt="">
<li><a class="blacktxt" href="index.html">HOME</a></li>
<li><a class="blacktxt" href="#services">SERVICES</a></li>
<li><a class="blacktxt" href="html/about.html">ABOUT</a></li>
<li><a class="blacktxt" href="#testimonials">TESTIMONIALS</a></li>
<li><a class="blacktxt" href="html/portfolio.html">OUR PORTFOLIO</a></li>
<li><a class="blacktxt" href="html/venue.html">EXCLUSIVE VENUES</a></li>
<li><a class="blacktxt" href="#contact">CONTACT</a></li>
</ul>
</nav>
<div class="navbarFooter blacktxt fontlight">
<div class="divider"></div>
<div class="navFContent">
<p>
+1 (646) 580-7740
</p>
<p>
info@hillandboyd.com
</p>
<p>
New York,USA.
</p>
</div>
</div>
</div>
</div>
<!-- HOME PAGE CONTENT-->
<section id="home-page">
<div class="main">
<div class="home-page">
<div class="slideshow-container">
<div class="home-page-slides">
<img src="Images/eventbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt f30">Luxury Events</h6>
<h2 class="blacktxt f18">WE CREATE BEAUTIFUL EVENTS</h2>
<p class="greytxt f15 fontlight">Join us for a “No Question too Small,Large or Outrageous” Chat about All things Bridal! This is your chance to have two industry experts answer your queries on any topic that is keeping you up at night.
</p>
</div>
</div>
</div>
<div class="home-page-slides">
<img src="Images/restaurantbg1.jpg" style="width:100%"/>
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt f30">Creating Impact</h6>
<h2 class="blacktxt f18"> STRATEGY AND SALES</h2>
<p class="greytxt f15"></p>
</div>
</div>
</div>
<div class="home-page-slides">
<img src="Images/memorialbg1.jpg" style="width:100%"/>
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt f30">Lasting Memories</h6>
<h2 class="blacktxt f18">SERVING WITH LOVE</h2>
<p class="greytxt f15"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>解决方法
要隐藏导航面板并使网站在移动视图中响应，请使用CSS中的媒体查询
@media only screen and (max-width: 736px) { /* css property for phone */ }
制作动画并查看侧面导航 https://www.w3schools.com/howto/howto_js_sidenav.asp
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。