Complete Websites

Building a Responsive Layout With Skeleton: Navigation


Our Skeleton layout contains a number of responsive challenges, not least of which being the primary navigation. In these screencasts we'll prepare things by tidying up the baseline grid, talking about image replacement, styling the menu and finally using some jQuery to help make things responsive.

Baseline Grid and Logo

Before we dive into the primary navigation itself, we need to tidy up a few aspects of our layout. To begin with we'll need to make sure that all measurements we have so far work in harmony with our baseline grid. Secondly, we're going to talk about an alternative approach to image replacement which highlights some important points about performance.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

Primary Navigation Base

The basis of our primary navigation is a slick looking menu with a dropdown submenu and some subtle transitions. In this video we're going to cover the basic mechanics of a css dropdown menu, plus some points (relating to what we were talking about with image replacement) about performance and accessibility.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

Responsive Navigation

Having gotten the navigation working, it's time to consider how our mobile users will experience it. We're going to use jQuery and CSS media queries to swap out the standard menu with a <select> alternative for small screen sizes.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube

One Last Point

As mentioned by Michael, the submenu items as they currently stand will look dreadful when they drop drown from small menu items:

This is because the submenu width is set to equal the width of the parent link. Text within the links is wrapping and the whole thing is messed up. We can solve this by adding one additional rule to the submenu links:

nav.primary ul ul li a {
white-space: nowrap;

which prevents text wrapping and forces the submenu to grow width-ways. Much better!

Additional Resources

Some useful links to further build on what's been covered in these videos.

Related Posts
  • Web Design
    Improving Our Tumblr Theme Navigation and Post NotesTumblr 27 retina
    We've reached the end of our Tumblr theming series! In this video we're going to add some styling to our post notes and the tag page. We'll also be adding some extra CSS which will make navigating the site a little easier.Read More…
  • Web Design
    Adding Media Queries to Our Tumblr ThemeTumblr 18 retina
    In this video, we'll be rounding off our responsive CSS by adding some Media Queries. We'll be talking about defensive coding, being sure that we make allowances for various usage scenarios, such as unusually long blog titles.Read More…
  • Web Design
    Completing the Tumblr Post Type CSSTumblr 16 retina
    In this episode we'll complete the CSS for our Tumblr Post Types. We'll also be talking a little about escaped entities within CSS, such as arrows and bullets. Grab a brew, it's a long one.Read More…
  • Web Design
    Continuing With Our Tumblr Theme's CSSTumblr 15 retina
    In this part of our Tumblr theming series, we're going to continue with our theme's CSS. We'll be working directly on the live site, as a number of elements won't show up otherwise. Let's dig in!Read More…
  • Web Design
    Styling Our Tumblr ThemeTumblr 13 retina
    Having finished the HTML markup for our theme, it's now time to begin playing with CSS. In this tutorial we'll gather everything we need to start styling; colors, typography details and so on.Read More…
  • Web Design
    The Code Behind a Tumblr ThemeTumblr 2 retina
    In this screencast we'll take a first look at the structure of a Tumblr theme and the Tumblr customize area.Read More…