我有问题让汉堡包图标位于横幅图片的顶部。我已经尝试调整z-index,将导航背景颜色设置为透明,并将背景图像放在标题中而不是横幅部分。我不知道还有什么其他步骤。任何建议将不胜感激。
function openNav() {
document.getElementById("main-nav").style.height = "100%";
}
function closeNav() {
document.getElementById("main-nav").style.height = "0%";
}
/*Nav*/
header {
background-color: transparent;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #567E3A;
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #fff;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #7F8C8D;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.burger {
font-size: 2em;
cursor: pointer;
}
/*Banner*/
#banner {
background-image: url("http://res.cloudinary.com/dboauovcs/image/upload/c_scale,w_2000/v1521182602/camp3_xhp0d9.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100%;
display: grid;
}
.banner-text {
margin: auto;
text-align: center;
color: #fff;
}
.banner-text h1 {
margin: 2em 1.4em 1.4em 1.4em;
font-size: 2em;
line-height: 1.8;
color: #fff;
text-shadow: 3px 3px #000;
}
<header>
<nav id="main-nav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#">Destinations</a>
<a href="#">Accomidation</a>
<a href="#">Stories</a>
<a href="#">Contact</a>
</div>
</nav>
<span class="burger" onclick="openNav()">☰</span>
</header>
<section id="banner">
<div class="banner-text">
<h1>Lorem Lipsum</h1>
<a href="#" class="btn">Book Today</a>
</div>
</section>
答案 0 :(得分:2)
喜欢这个吗?
function openNav() {
document.getElementById("main-nav").style.height = "100%";
}
function closeNav() {
document.getElementById("main-nav").style.height = "0%";
}
/*Nav*/
header {
background-color: transparent;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #567E3A;
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #fff;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #7F8C8D;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.burger {
font-size: 2em;
cursor: pointer;
position: absolute;
}
/*Banner*/
#banner {
background-image: url("http://res.cloudinary.com/dboauovcs/image/upload/c_scale,w_2000/v1521182602/camp3_xhp0d9.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100%;
display: grid;
}
.banner-text {
margin: auto;
text-align: center;
color: #fff;
}
.banner-text h1 {
margin: 2em 1.4em 1.4em 1.4em;
font-size: 2em;
line-height: 1.8;
color: #fff;
text-shadow: 3px 3px #000;
}
<header>
<nav id="main-nav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#">Destinations</a>
<a href="#">Accomidation</a>
<a href="#">Stories</a>
<a href="#">Contact</a>
</div>
</nav>
<span class="burger" onclick="openNav()">☰</span>
</header>
<section id="banner">
<div class="banner-text">
<h1>Lorem Lipsum</h1>
<a href="#" class="btn">Book Today</a>
</div>
</section>
关于我在这里所做的一些解释(假设这是你正在寻找的治疗方法):通过positioning the hamburger as absolute
,我们完全将它拉出静态布局流程,所以其他元素忽略了它的存在定位。然后可以使用left,right,top和bottom控制元素的位置,并将相对于绝对定位的第一个祖先元素或{{1如果没有元素绝对定位。您可能会考虑使用这些属性稍微调整位置,因为您可能不希望依赖浏览器来计算其默认位置。
答案 1 :(得分:2)
function openNav() {
document.getElementById("main-nav").style.height = "100%";
}
function closeNav() {
document.getElementById("main-nav").style.height = "0%";
}
&#13;
/*Nav*/
header {
background-color: transparent;
position: absolute;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #567E3A;
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #fff;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #7F8C8D;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.burger {
font-size: 2em;
cursor: pointer;
}
/*Banner*/
#banner {
background-image: url("http://res.cloudinary.com/dboauovcs/image/upload/c_scale,w_2000/v1521182602/camp3_xhp0d9.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100%;
display: grid;
}
.banner-text {
margin: auto;
text-align: center;
color: #fff;
}
.banner-text h1 {
margin: 2em 1.4em 1.4em 1.4em;
font-size: 2em;
line-height: 1.8;
color: #fff;
text-shadow: 3px 3px #000;
}
&#13;
<header>
<nav id="main-nav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#">Destinations</a>
<a href="#">Accomidation</a>
<a href="#">Stories</a>
<a href="#">Contact</a>
</div>
</nav>
<span class="burger" onclick="openNav()">☰</span>
</header>
<section id="banner">
<div class="banner-text">
<h1>Lorem Lipsum</h1>
<a href="#" class="btn">Book Today</a>
</div>
</section>
&#13;