我目前正在构建我的第一个响应式网站。
对于平板电脑、笔记本电脑和台式机使用,导航是“粘性”的,并且按照我希望的方式工作。
对于任何比它小的显示器,导航都隐藏在一个典型的“汉堡菜单”中,点击后会显示导航。
一切正常,但我的问题是“点击汉堡”时导航的显示。导航显示在标题上方和内容下方,而不是将任何内容推到一旁/屏幕下方,我觉得默认情况下会这样。
我觉得问题出在定位上,我只是说不出是什么。 这是我的导航元素在正常和响应状态下显示时的位置:
/* HEADER & NAV
--------------------------*/
header {
height: 140px;
position: relative;
background-image: url("../img/headerback.jpg");
text-align: center;
padding-top: 1.4em;
font-family: 'Josefin Sans', sans-serif;
text-transform: uppercase;
}
header a {
font-size: 4.8em;
border-bottom: solid 5px #b9beaa;
}
header a, nav li, footer, footer a {
text-decoration: none;
color: #fff;
}
nav {
height: 36px;
position: absolute;
bottom: 0;
width: 100%;
font-size: 0.245em;
padding-top: 2.5em;
}
nav li {
display: inline;
padding: 0 0.6em 0 0.7em;
}
nav li a {
border: none;
letter-spacing: 2px;
position: relative;
}
/*----------------- Responsive Nav */
nav ul {
display:none;
}
nav a#navIcon{
position: absolute;
right: 20px;
top: 20px;
border-bottom: none;
}
nav {
font-size: 0.6em;
}
nav li {
display: block;
padding-bottom: 0.6em;
}
header a {
font-size: 1.6em;
}
这也是我第一次尝试使用 JSFiddle。
如果有人需要我提供任何其他东西,请询问。
感谢您的帮助。
最佳答案
有一些问题阻止您的导航菜单下推以下内容:
jquery 硬设置“.nav-placeholder”div 的高度。高度应为“自动”,以便浏览器可以计算高度并将内容推送到下方。
jQuery(".nav-placeholder").height("auto");
nav 标签是 position: absolute。将其更改为静态。和高度:自动。
nav {
font-size: 0.6em;
position: static;
height: auto;
}
标题标签在@media only 屏幕中将高度更改为自动并且(最大宽度:480px)
header {
height: auto;
padding-top: 0.8em;
padding-bottom: 0.2em;
}
关于html - 响应式导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34581867/