在Rails应用程序上进行基础顶栏导航

Question

我在处理基于我的Rails应用程序的基础上遇到了问题。 它们主要与自定义和少量导航结构相关。

在我的assets文件夹中，我将application.css.scss和framework_and_overrides.css.scss作为重写样式，在我的application.css.scss中导入，我还在其中导入“foundation”。

我理解顶部栏的默认结构，但是我没有建立一个两级响应式导航，如模型中所示：

首先，很难改变尺寸，链接和背景颜色。 是否有任何简单的方法来进行自定义而不是检查或修改每个元素？

我可以在两行中创建一个导航栏，本节中的每个列表元素都在切换下，并且我需要将语言导航栏保留在切换点之外且完好无损。 如果我制作两个单独的导航栏 - 当调整屏幕大小时，语言一个属于第二个，因为所有按钮都堆叠在一起。 我不认为一个好的解决方案是以不同的方式覆盖两个导航条，我希望它不是唯一的。

制作此类响应式导航的最佳方式是什么？

感谢您的帮助和指导。

Answer 1

您是否考虑过使用Top-Bar和Icon-Bar - http://foundation.zurb.com/docs/components/icon-bar.html ？ 这样你就可以单向设置Top栏，另一个设置图标栏。 除了颜色，它看起来几乎与您的模型完全相同。

Answer 2

您可以使用CSS media标记来完成此操作。 见http://jsfiddle.net/8cqgumhw/