我想创建一个带有汉堡图标的固定导航,单击该图标会打开一个全宽和全高的flexbox菜单。这是代码:
https://codepen.io/anon/pen/oaLMQK
这在台式机浏览器上效果很好,但在ios上效果不佳(还没有机会在android上进行测试)。
在移动设备上查看时,会出现以下 2个问题:
可能有一个非常简单的解决方案,但是我似乎无法解决这个问题……非常感谢您的帮助!
CSS:
body {
font-family: "Roboto", sans-serif;
overflow-x: hidden;
margin: 0;
}
a {
text-decoration: none;
color: #fff;
}
/*Sticky Navbar*/
/*Nav*/
#header-nav {
position: fixed;
top: 0;
display: block;
width: 100%;
background: rgba(0, 0, 0, .9);
z-index: 9999;
transition: .6s ease .2s;
}
.header-nav-open {
background: rgba(0, 0, 0, 0) !important;
}
/*Burger*/
.nav_button {
width: 32px;
height: 18px;
margin: 20px auto;
cursor: pointer;
float: right;
padding: 0.5em 1em 0em 1em;
}
.nav_button #burger {
position: relative;
}
.nav_button #burger span {
position: absolute;
height: 2px;
width: 100%;
background: white;
}
.nav_button #burger span:nth-child(1) {
top: 0;
}
.nav_button #burger span:nth-child(2), .nav_button #burger span:nth-child(3) {
top: 8px;
}
.nav_button #burger span:nth-child(4) {
top: 16px;
}
/*Overlay Nav*/
.main-nav {
background: #000;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: fixed;
width: 100%;
height: 100vh;
top: 0;
visibility: hidden;
text-align: center;
opacity: 0;
transition: .6s ease .2s;
}
.main-nav-open {
opacity: 1;
visibility: visible;
transition: opacity .6s ease .2s;
}
.nav-item {
color: #fff;
cursor: pointer;
position: relative;
background-color: #000;
-ms-flex: 1 33.3333333%;
flex: 1 33.3333333%;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-direction: column;
flex-direction: column;
}
.nav-item-bg {
opacity: .5;
position: absolute;
background: #323232;
width: 100%;
height: 100%;
transition: all .5s;
}
.nav-item:hover .nav-item-bg {
opacity: .6;
}
@media all and (max-width: 800px) {
.nav-item {
flex: 1 50%;
}
}
.main-nav .nav-item h1 {
font-weight: 400;
}
.main-nav .nav-item h2 {
max-width: 250px;
margin: 0 auto;
font-weight: 400;
font-size: 13px;
}
/*Content*/
.container {
width: 90%;
max-width: 960px;
margin: auto;
}
.main {
padding: 100px 0;
z-index: 2;
}
.main p {
margin-bottom: 40px;
font-size: 1.125em;
}