I'm running Drupal 7.28 with Zen 7.x-5.5. In the default setup, there is a region on the right side named "First sidebar" which contains a block named "Navigation". I have put my navigation links there. When shrinking the width of the browser to see how my site will be rendered on a mobile the navigation block gets positioned at the bottom of the page.

I want the navigation to be at the top in a mobile scenario, ideally with a bootstrap-esque collapsed menu. How can I achieve this?

  • Since I've used Bootstrap before and I feel it's more standard I've switched to using the Bootstrap Base Theme
    – User
    Commented Sep 5, 2014 at 2:36

1 Answer 1

  1. @media width queries in CSS http://css-tricks.com/css-media-queries/
    At a certain width, you could use a different positioning tactic, forcing it up top.
  2. Via Javascript, checking against: window.innerWidth or body .clientWidth
    Many things you could do here, from changing CSS rules, to actually moving it in the DOM.
  3. Using a Drupal module for responsive menus like: https://www.drupal.org/project/responsive_navigation or https://www.drupal.org/project/responsive_menus

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.