如何解决汉堡菜单-垂直对齐列表项
我正在尝试在媒体查询中创建一个汉堡菜单,以垂直显示所有列表项,使其适合手机屏幕,但flex-direction: column
却不起作用。
我认为问题出在CSS类.topnav.responsive a
中。
有人可以解决吗?
谢谢
HTML
<header id="header-home">
<nav id="main-nav" class="sticky">
<div class="container">
<div class="nav-content">
<img src="img/logo.png" alt="Alikis Treff" id="logo" />
<ul class="topnav" id="myTopnav">
<li><a href="#home">Home</a></li>
<li><a href="#darts">Darts</a></li>
<li><a href="#drinks">Gertänkekarte</a></li>
<li><a href="#opening">Öffnungszeiten</a></li>
<li><a href="#reserve">Reservierung</a></li>
<li><a href="#contact">Kontakt</a></li>
<li>
<a
href="javascript:void(0);"
class="icon"
onclick="myFunction()"
>
<i class="fa fa-bars fa-2x"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
CSS
#main-nav {
background: $dark-color;
height: 4rem;
ul {
display: flex;
}
li {
padding: 1rem 2rem;
}
a {
text-transform: uppercase;
color: #fff;
text-decoration: none;
font-size: 1rem;
letter-spacing: 1.2px;
padding: 0.3rem;
border-radius: 5px;
&:hover {
color: $dark-color;
background: $light-color;
transition: all ease 250ms;
}
}
.nav-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.topnav .icon {
display: none;
}
}
媒体
@media screen and (max-width: 600px) {
#main-nav {
.topnav a {
display: none;
}
.topnav a.icon {
display: flex;
justify-content: space-between;
}
.topnav.responsive a {
display: flex;
flex-direction: column;
text-align: left;
}
JS
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
解决方法
您不需要在移动设备中使用展示广告功能。 在媒体屏幕中,必须显示您的导航:阻止
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。