Responsive website with navigation in sidebar

[katootje]

Hi,

The site I'm working on has 3 navigation menu's. 2 navigations using primary and secondary navigation and the main navigation is in the sidebar (with the custom menu widget)

Of course, normal device and iPad/tablet this is working fine. The devices are big enough for sidebar content sidebar layout.

But on smaller devices first the secondary sidebar is going down (this is the sidebar with the navigation, but I think there are snippets to switch primary and secondary sidebar). But going to even smaller devices, both sidebars are down. Content will be always on top.

What I like is sidebar (with nav)-content-sidebar on big devices

sidebar-content (sidebar with nav)
sidebar

on smaller devices

sidebar (with nav)
content
sidebar

on the smallest devices

I can make a work around moving primary sidebar to widget-nav in the header - moving to top with css

And "activate" secondary nav only on smaller screens to get it on top. But when I can have to sidebar with the nav float always on top, it would be better.

Are there already any snippets of other solutions to get this done?

Thanks

Karin

http://www.new.amantis.nl

[cehwitham]

HI Karin,

I don't seem to be able to see the sidebar navigation in the website you've linked to.

If you're using mobile detection to switch the secondary menu on and off could you use the same trigger to add a class to the sidebar nav to allow different styles to act on it?

Chris

---

Twitter: cehwitham Web: cehwitham.com

[Author]

Posts