.intro-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #449bb5;
background-attachment: fixed !important;
}
.ham-layer {
height: 50px;
width: 50px;
background: #fff;
margin: 0px;
top: 0;
left: 0;
position: fixed;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
opacity: 0;
}
#nav-icon {
position: fixed;
left: 35px;
top: 0px;
width: 32px;
height: 20px;
margin: 50px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
z-index: 1001;
}
#nav-icon span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #fff;
border-radius: 2px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon span:nth-child(2) {
top: 9px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon span:nth-child(3) {
top: 18px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon.open span {
background: #111111;
}
#nav-icon.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: -1px;
left: 1px;
}
#nav-icon.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 22px;
left: 2px;
}
.ham-layer.open {
overflow: hidden;
-webkit-transform: scale(100);
-ms-transform: scale(100);
transform: scale(100);
opacity: 1;
-webkit-transition: .8s all ease;
transition: .8s all ease;
z-index: 1000;
}
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="ham-layer"></div>
<!-- <i class="fa fa-bars hamburger"></i> -->
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
</div>
<p id="_intro" class="text-center">Darth Vader</p>
<hr width=40%>
<p id="belowIntro" class="text-center">Interactive Portfolio</p>
</div>
</div>
</div>
</section>
這是我的代碼片段在HTML的部分。問題在於該部分沒有響應。具體來說,當屏幕變小時,它會水平滾動並顯示空白區域。這是什麼原因? 我該如何使這部分具有響應性?
可以在給定的代碼不會重現 - HTTP:// codepen .io/Paulie-D/pen/bEXZVW –