响应式功能区导航

Question

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

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

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

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

感谢任何帮助。

谢谢，
约什

Answer 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就是影子。

谢谢，
约什