响应式功能区导航

时间:2016-06-20 18:56:00

标签: navigation icons overflow responsive ion

我正在开发一个响应式功能区导航栏,我使用ionicons(http://ionicons.com)创建。

一切看起来都很棒!唯一的问题是当我将浏览器调整到较小的尺寸时,功能区的右侧部分会导致滚动条出现。你可以看到我在这里工作的内容:https://jsfiddle.net/gyrndofr/

我尝试使用overflow-x:hidden,但是导航栏以外的所有内容都会消失。要查看overflow-x:hidden只是在小提琴css中取消注释line 7

我试图保留功能,但只是隐藏溢出,这就是我尝试overflow-x:hidden的原因,但也许我只是将其添加到错误的元素中。

感谢任何帮助。

谢谢,
约什

1 个答案:

答案 0 :(得分:1)

我仔细观察并做了一些调整,希望这有助于其他人: - )

https://jsfiddle.net/66fwcz71/

基本上,我对#nav容器和#nav ul都应用了最大宽度,诀窍是......而不是#nav:before - #nav:after和一个#nav ul:before - #nav ul:after两者,阴影和功能区必须是ul的一部分,因此我将功能区保留为#nav:before - #nav:after,然后用我的影子创建了一个.left.right div ...这样,功能区就是#nav元素,而.left - .right就是影子。

谢谢,
约什