You are here

Theming: simple responsive site header (Omega sub-theme)

After re-designing my site header to be small, fixed and semi-transparent, I wanted to make sure it is also fully responsive and looks good when viewed in any environment: large, wide desktop displays; medium tablet displays; as well as the narrow (and really rather limiting) mobile displays.

So below are the designs as well as implementations I came up with.

General setup

My custom theme is an Omega 4 subtheme. So it uses the Susy grid system, and my grid variables are the following

// Susy variables
$vert-spacing-unit: 20px;
$horz-spacing-unit: 1em;

// Define Susy grid variables mobile first
$total-columns: 6;
$column-width: 4em;
$gutter-width: $horz-spacing-unit;  // the space between columns
$grid-padding: 5px;

$mobile: 6;
$mobile-breakpoint: 30em, $mobile;

$tab: 8;
$tablet-breakpoint: 44em, $tab;

$desk: 16;
$desk-breakpoint: 60em, $desk;

Desktop display

This display includes the full header with my logo, my slogan, the main menu, and a search box.

 

Tablet display

In this display I have less padding, shorter search box, plus I make slogan span two lines, because there isn't enough width for it to not overlap other elements

 

Mobile display

For the narrow mobile display, I had to do the most drastic modifications, and I did feel quite a bit restricted in trying to show as much as possible. You really cannot display EVERYTHING without taking up half the screen (because you'd have to make the menu taller, to accommodate for lost width).  For my design, I removed the slogan, reorganized, decreased the logo size considerably and made everything else less wide and with less padding.  As you can see, I moved the menu links to the bottom, so they could have a row all to themselves (rather than share the top row with the logo, which simply wasn't enough with the width restrictions.  Because I felt that the buttons were too close together in this display, I also gave them a border.

 

Code samples

As mentioned earlier, I used the Susy grid framework, and I defined the css (really scss or sass) rules for the mobile layout by default and included styles that vary for the other displays within included breakpoints.  Here is an example, which gives the logo image a small size by default (mobile), but increases the size/width and changes the position slightly for desktop and tablet displays:

header .l-branding{
  .site-logo img {
    border: 0;      // Will apply to all, since this is not overruled anywhere in the included breakpoints

    padding-top: 20px;     // Default rules will apply to mobile display, for which the following two conditions will not be met
    width: 100px;
    @include at-breakpoint($tablet-breakpoint) {
      padding-top: 10px;
      width: 191px;  
    }
    @include at-breakpoint($desk-breakpoint) {
      padding-top: 10px;
      width: 191px;  
    }
  }
}

 

Similarly, here are the scss rules which determine how the nav links (the four link buttons) are styled for each of the different displays.  As you can see, the default top rule has the nav section be placed below the logo (a full 70 pixels from the top) and close to the left border.  However, for tables and desktops, the nav section is at the top and is offset much farther to the left, since it's to the left of the logo:

.l-region--navigation nav {
  position: fixed;

  top: 70px;
  left: 15px;
  @include at-breakpoint($tablet-breakpoint) {
    top: 10px;
    left: 200px;
  }
  @include at-breakpoint($desk-breakpoint) {
    top: 10px;
    left: 240px;
  }
  
}

 

Try it out!

Go ahead and drag one side of your browser window to narrow it, and see the header elements rearrange and re-size as you decrease the width and move from desktop display to tablet to mobile!

Share

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.