有一个固定的导航栏，但仍然保持滚动活动

这里我的问题是，我的导航栏设置为固定的，所以它跟随窗口，坐在页面的顶部，无论它们在哪里，但是当页面宽度会减少，其余的导航栏项目会被截断，而我无法滚动查看剩下的项目。我已经有一个最小宽度的设置，所以它停在某个点。因此，当页面宽度减少时，我希望用户能够在页面上滚动，并能够看到导航栏的其余部分，而不仅仅是适合页面的部分。这里是我的意思（看导航栏）：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/

来源

2015-04-05 Ajax jQuery

这是一个简单的解决办法：

添加min-width: 100%;到body

这只是确保你没有得到奇怪的滚动。

来源

2015-04-05 20:19:56 Downgoat

严格假设地说，你首先从媒体查询开始。是这样的：

@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网络上最好的资源来创建一个CSS，完全响应菜单。

谢谢。

Alexander。

来源

2015-04-05 20:31:47

有一个固定的导航栏，但仍然保持滚动活动

回答

相关问题