Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Alternate resources: 

Styling a Mobile-Friendly Header and Navigation

Video loading...

Join Drupalize.Me to watch this video

Join today and gain instant access to our entire video library.

Log in Sign up
  • 0:03
    Styling a Mobile-friendly Header and Navigation
  • 0:05
    with Amber Himes Matz
  • 0:08
    Our refactored theme is really shaping up,
  • 0:11
    but one thing we've noticed and even anticipated
  • 0:14
    is that our header is full of elements that
  • 0:16
    basically communicate the same thing.
  • 0:19
    These repetitious elements are filling up our mobile screens,
  • 0:22
    pushing down the meat of our content out of sight.
  • 0:25
    In this lesson, we'll test our site and identify the point
  • 0:28
    at which our header gets too cluttered.

Styling a Mobile-Friendly Header and Navigation


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.

Log in or sign up to download companion files.
Additional resources: (checkout branch 13-mobile-friendly-header)