我的问题是我的导航栏设置为固定,因此它跟随窗口并位于页面顶部的任何位置,但当页面宽度减小时,其余的导航栏项目会被切断我无法滚动查看其余项目。我已经有一个最小宽度设置,所以它停在某一点。因此,当页面宽度减小时,我希望用户能够在页面上滚动并能够看到导航栏的其余部分,而不仅仅是适合页面的部分。这就是我的意思(观看导航栏):http://gyazo.com/513ad98520c9821c1de640b8c1d28fdd
当宽度减小时,您是否看到我无法滚动查看其余的导航栏项?当我没有将导航栏设置为固定时,它可以正常工作(但我需要它按照页面顶部,以及为什么它已修复)。
这是我的一些导航栏CSS:
nav{
min-width: 900px;
position: fixed;
background-color:white;
width: 100%;
}
nav img{
display: block;
margin: 0 auto;
width: 25%;
padding-top:5px;
padding-bottom: 15px;
}
nav li{
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
display: inline-block;
padding: 10px 50px 0px 10px;
}
nav a{
color: white;
text-decoration: none;
}
nav ul{
margin: 0;
height: 30px;
background-color: black;
}
这里是完整的网页(是的,我知道我需要缩小图像。) http://cydronixweb.kkhorram.info/
答案 0 :(得分:0)
这是一个简单的修复:
将min-width: 100%;
添加到body
这只是确保你不会得到奇怪的滚动。
答案 1 :(得分:0)
严格假设您首先从媒体查询开始。类似的东西:
@media only screen and (max-width : 768px) {
}
现在在媒体查询中你改变了一些样式,如:
@media screen and (max-width : 768px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
因为您只标记了HTML和CSS的问题。
here's网上最好的资源,只创建一个完全自适应的菜单。
谢谢。
亚历山大