Styling a Mobile-Friendly Header and Navigation for Drupal 7

Last updated

This page is archived

We're keeping this page up as a courtesy to folks who may need to refer to old instructions. We don't plan to update this page.

Alternate resources

Sprout Video

As we design for mobile, we want to look critically at each component and what it's communicating or how it's adding value. Now that we've refactored our theme to be more mobile-friendly, some elements in our header appear redundant when viewed in a narrow, stacked content column. This is causing our header elements to fill up that important initial screen on mobile. We want to ensure that our valued mobile users get more content and fewer redundant header elements when the page first loads.

In this lesson, we'll identify a breakpoint where the header gets too cluttered with elements essentially communicating the same thing. Then we'll add a new set of media queries, creating styles that will present a more mobile-friendly first impression of our site.

Additional resources (checkout branch 13-mobile-friendly-header)