How do you approach responsive navigations?

[Jerba]

I always build sites with responsive nature in mind and I’ve handled responsive navigations in many ways and styles. My initial approach is to have an inline navigation for wide screens and then transform into the 3 line (burger icon I believe it’s referred to as…). Here’s a little pen I made a week or two ago just testing out a pure css approach to what would be the smaller screen transformation.

http://codepen.io/Responsive/pen/qEdWZQ?editors=110

[pitechindore]

I think you should go through the following points deeply in order to have a responsive navigation
1. Choosing Breakpoints
2. Writing the Markup
3. Basic Styling
4. Add a Breakpoint
5. Set a fixed Height on Navbar
6. Add Flexmenu
7. Style Flexmenu
8. Adjust for touchscreens
9. Fix Cross-browser funkiness

[Paulie_D]

I could easily argue that order.

Selecting breakpoints, for instance, should not be the first point…those should be based on the actually widths where you need to adapt the design.

Equally, the markup should, to a certain extent, be based on the finished design….after bearing the sematics and 5EO requirements.

The article is 2 years old…practically ancient at the speed the web is moving now.

[Author]

Posts