* {
scroll-behavior: smooth;
}
html {
overflow: scroll;
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 10vh;
background-color: black;
font-family: 'Audiowide', cursive;
}
.logotop {
color: white;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.logotop p {
font-family: 'Audiowide', cursive;
font-size: 11px;
width: 100%;
letter-spacing: 1px;
color: black;
font-weight: 700;
}
.logotop img {
width: 15vh;
height: 8vh;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 40%;
}
.nav-links li {
list-style: none;
font-family: 'Orbitron', sans-serif;
}
.nav-links a {
color: white;
text-decoration: none;
letter-spacing: 2px;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 23px;
height: 2px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
@media screen and (max-width:1200px) {
.nav-links {
width: 50%;
}
.logotop p {
font-size: 9px;
}
}
@media screen and (max-width:968px) {
.nav-links {
width: 60%;
}
.logotop p {
display: none;
}
}
@media screen and (max-width:768px) {
body {
overflow: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 30vh;
top: 16vh;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
.logotop p {
display: none;
}
}
.nav-active {
transform: translateX(0%);
z-index: +1;
}
@keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
<nav>
<div class="logotop">
<a href="index.html"><img src="./images/logo.jpeg" alt="logo"></a>
</div>
<ul class="nav-links">
<li><a href="heating.html">HEATING</a></li>
<li><a href="plumbing.html">PLUMBING</a></li>
<li><a href="drainage.html">DRAINAGE</a></li>
<li><a href="contactus.html">CONTACT US</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
我似乎无法阻止导航栏在移动屏幕上溢出,因此滚动条始终可用或可见。请帮忙。
在移动设备上时,您可以向右拖动或滚动并查看过渡的叠加层。我试图使它在移动设备上不可见,但它似乎不断出现。
我需要修复代码以阻止它除非正在使用中。
我认为您应该像这样更改您的转换:
@media screen and (max-width:768px) {
.nav-links {
transform: translateX(100%) scaleX(0); /* in your code scale dose not exist */
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句