Foundation top-bar navigation on Rails app

3
votes

I'm having issues with handling Foundation on my Rails application. They are mostly related to customizations and few navigation structures.

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.

I understand the default structure of top-bar, but however I'm failing to build a two level responsive navigation as depicted in mockup:

enter image description here

enter image description here

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.

What is the best way to make such responsive navigation?

Thanks for any help and guidance.

2
htmlcssruby-on-railsnavigationzurb-foundation
Have you looked at the SlickNav jQuery plugin (slicknav.com)? – stackingjasoncooper
I'm looking to use the Foundation framework and not add in other nav plugins. I just want to style the two nav bars differently, just like the OP. – andi
Do you have any HTML you can share to see how you have tried to implement this? – Ed Charbeneau
actually gave up on the idea, just left one main Foundation nav bar, and custom made the top one without using the framework, still interested if I could pull it off with using Foundation all the way without nav bars affecting each other – 3mpetri

2 Answers

2
votes

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.

1
votes

You can do this by using CSS media tag. See this http://jsfiddle.net/8cqgumhw/