I'm having issues with handling Foundation on my Rails application. They are mostly related to customizations and few navigation structures.
我在Rails应用程序上遇到了处理Foundation的问题。它们主要与定制相关，很少有导航结构。
In my assets folder I have application.css.scss and framework_and_overrides.css.scss as overriding styles which is imported in my application.css.scss and I also import "foundation" in it.
在我的assets文件夹中，我有application.css。scss framework_and_overrides.css。scss是在我的application.css中导入的重写样式。scss和我也在其中导入“foundation”。
I understand the default structure of top-bar, but however I'm failing to build a two level responsive navigation as depicted in mockup:
我理解top-bar的默认结构，但是我没能构建一个像样机中描述的两级响应导航:
First of all, it is difficult to change sizes, links and background color. Is there any easy way to do customization than inspecting or modifying each element?
首先，很难改变大小、链接和背景颜色。除了检查或修改每个元素之外，还有什么简单的定制方法吗?
Can I make one nav bar in two rows, every list element in this section falls under toggle, and I need to keep the language navigation bar outside the toggle and intact. If I make two separate navbars - when resizing the screen, the language one falls under the second one because all the buttons stack over. I don't think a good solution would be to override both nav bars in different ways, I hope it's not the only one.
我可以在两行中设置一个导航条，这部分的每个列表元素都在toggle下，我需要将语言导航条保持在toggle之外并保持完整。如果我做了两个独立的导航栏——当调整屏幕大小时，语言栏就会落在第二个的下面，因为所有的按钮都会叠加。我不认为一个好的解决方案是用不同的方式覆盖两个导航条，我希望它不是唯一的一个。
What is the best way to make such responsive navigation?
什么是实现这种响应性导航的最佳方式?
Thanks for any help and guidance.
谢谢你的帮助和指导。
2 个解决方案
#1
2
Have you considered using the Top-Bar and the Icon-Bar -: http://foundation.zurb.com/docs/components/icon-bar.html together? That way you could just have styled the Top bar one way and the icon bar another. Asides from the colors it looks almost exactly the same as your mock-ups.
您是否考虑过一起使用Top-Bar和Icon-Bar -: http://foundation.zurb.com/docs/components/icon-bar.html ?这样，你就可以用一种方式给顶部条加上样式，另一种方式给图标条加上样式。从颜色上看，它几乎和你的模型一模一样。
#2
1
You can do this by using CSS media tag. See this http://jsfiddle.net/8cqgumhw/
您可以通过使用CSS媒体标记来实现这一点。看到这个http://jsfiddle.net/8cqgumhw/
#1
2
Have you considered using the Top-Bar and the Icon-Bar -: http://foundation.zurb.com/docs/components/icon-bar.html together? That way you could just have styled the Top bar one way and the icon bar another. Asides from the colors it looks almost exactly the same as your mock-ups.
您是否考虑过一起使用Top-Bar和Icon-Bar -: http://foundation.zurb.com/docs/components/icon-bar.html ?这样，你就可以用一种方式给顶部条加上样式，另一种方式给图标条加上样式。从颜色上看，它几乎和你的模型一模一样。
#2
1
You can do this by using CSS media tag. See this http://jsfiddle.net/8cqgumhw/
您可以通过使用CSS媒体标记来实现这一点。看到这个http://jsfiddle.net/8cqgumhw/