我有一个问题是基于我之前的一些工作。
我正在构建一个响应式导航。
问题发生在，
按灰色块打开nav -works。 按灰色块隐藏导航 - 工作正常
然而，一旦隐藏导航并将屏幕大小增加到800px以上，主导航仍然隐藏，它不再出现。
任何人都可以协助解决这个问题吗？
body {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
font-size: 62.5%;
text-rendering: optimizeLegibility;
}
#wrap {
margin: 0 auto;
text-align: center;
overflow: hidden;
}
#wrap-inner {
padding: 20px;
padding-top:80px;
border: 1px solid blue;
}
#wrap-inner-profile {
padding: 10px 20px 20px 20px;
}
#content {
position: relative;
max-width: 970px;
margin: 0 auto;
padding: 0;
font-size: 1.2em;
border: 1px solid green;
}
li {
list-style: none;
}
a:link, a:visited {
color: #4083a9;
outline: none;
text-decoration: none;
font-size: 13px;
}
a:hover {
text-decoration: none;
color: #205f82;
}
ul, ol, h1, h2, h3, h4, p {
padding: 0px;
margin: 0px;
;
}
p {
line-height: 22px;
font-size: 13px;
}
.clearfix {
clear: both;
}
img:hover {
opacity: .7;
}
/* =============================================================================
HEADER
========================================================================== */
#header {
width: 100%;
height: 67px;
background: white;
z-index: 9997;
position: fixed;
top: 0px;
-webkit-box-shadow: rgba(6, 8, 8, 0.0980392) 0px 3px 3px;
box-shadow: rgba(6, 8, 8, 0.0980392) 0px 3px 3px;
}
#header-inner {
position: relative;
margin: 0 auto;
padding: 0 12px;
max-width: 970px;
}
#logo {
float: left;
padding: 0px 20px 0 0;
}
#logo a {
display: block;
width: 107px;
height: 50px;
background-repeat: no-repeat;
background-position: 0 50%;
background-image: url(../img/home/oh-holla.png);
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
#logo img {
height: 0;
}
#logo a:hover {
opacity: .6;
}
#nav {
margin: 1px 0px 0 0px;
color: #777;
padding:0px;
float:right;
}
#nav>li {
float: right;
font-size: 1.25em;
line-height: 1;
margin-left: 30px;
}
#nav>li>a {
display: block;
height: 66px;
line-height: 66px;
text-decoration: none;
color: #333;
font-weight: bold;
}
#toggle-nav {
display: none;
}
#right-nav {
margin: 1px 0px 0 0px;
color: #777;
padding:0px;
float:right;
margin-top: 26px;
}
#right-nav li {
float: right;
font-size: 1.25em;
line-height: 1;
margin-left: 30px;
}
#right-nav li a {
display: block;
height: 66px;
line-height: 66px;
text-decoration: none;
color: #333;
font-weight: bold;
}
#signin {
border:1px solid #ddd;
padding: 10px 20px;
color: #333;
font-weight: bold;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
#login {
padding: 10px 20px;
color: #333;
font-weight: bold;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin-left: 100px;
}
/* =============================================================================
NAVIGATION MEDIA MAX 800PX
========================================================================== */
@media screen and (max-width: 800px) {
#header {
position: fixed;
height: 57px;
-webkit-box-shadow: rgba(6, 8, 8, 0.0980392) 0px 3px 3px;
box-shadow: rgba(6, 8, 8, 0.0980392) 0px 3px 3px;
background: green;
}
#toggle-nav {
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 48px;
height: 40px;
text-indent: -9999px;
background: url('../img/home/burger-menu.png') 20px 20px no-repeat;
opacity: .5;
background:black;
}
#logo a {
display: block;
height: 40px;
margin: 0 auto 0 auto;
}
#logo {
float: none;
padding-right: 0;
text-align: left;
}
#nav {
width: 100%;
margin: 0 0 10px 0;
text-align: left;
position: absolute;
top: 57px;
display: none;
}
#nav li {
position: relative;
float: none;
margin-right: 0;
text-align: left;
font-size: 12px;
background: #323232;
margin-left: 0px;
}
#nav li:hover {
background: #2e2e2e;
}
#header-inner {
width: auto;
padding: 0;
height: 57px;
background: pink;
}
#nav li a {
height: auto;
padding: 15px;
font-size: 14px;
font-weight: bold;
line-height: 1;
border-bottom: 1px solid black;
background: white;
}
#wrap-inner {
padding-top: 60px;
}
#right-nav {
display: block;
float: none;
position: absolute;
top: -10px;
right: 20px;
background: none;
}
#livefeed {
-webkit-box-shadow: rgba(6, 8, 8, 0.0980392) 0px 3px 3px;
box-shadow: rgba(6, 8, 8, 0.0980392) 0px 3px 3px;
}
}
答案 0 :(得分：0)
这很简单，改变：
/* =============================================================================
NAVIGATION MEDIA MAX 800PX
========================================================================== */
@media screen and (max-width: 800px) {
进入
/* =============================================================================
NAVIGATION MEDIA MAX 800PX
========================================================================== */
@media screen {
停止此问题。我真的不知道为什么你想要max-width为800px，但如果你真的需要它，试试把它放在#header
的主体中答案 1 :(得分：0)
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
仅使用媒体查询屏幕
答案 2 :(得分：0)
在您拥有的CSS中：
...
/* =============================================================================
NAVIGATION MEDIA MAX 800PX
========================================================================== */
@media screen and (max-width: 800px) {
...
此参数max-width：800px给您带来麻烦。更改或删除它。
答案 3 :(得分：0)
它很简单。我已经更新了JS小提琴，请检查一下。
http://jsfiddle.net/surjithctly/9jPe9/2/
在CSS中添加此媒体查询
@media screen and (min-width: 800px) {
#nav {
display:block!important;
}
}