How to make a header responsive?

问题

I am having the following HTML:

<div class='layout-wrap'>
  <div class='mod-header'>
    <a class='logo' href="#"></a>
    <nav>
      <a class="action" href="#">Join now</a>
      <ul class="tour">
        <li><a href="#">item 1</a></li>
        <li><a href="#">item 2</a></li>
        <li><a href="#">item 3</a></li>
      </ul>
      <ul class="search">
        <li><a class="find" href="#">search</a></li>
      </ul>
    </nav>
  </div>
</div>

See also:

http://jsfiddle.net/mulderp/fZ8cW/

And CSS:

.logo {
    text-indent: -9999px;
    float: left;
    width: 16rem;
}

nav {
   float: right;
   display: block;
}

.mod-header nav a {
   float: left;
}

What is a minimum responsive layout solution (e.g. with Susy) such that:

a.logo is always visible (also for small screens)
a.action is always visible (also for small screens)
a.find is always visible
ul.tour is hidden for small screens

Not sure if this easily possible, but it would be helpful to know if yes.

Edit:

Narrower question: How to prevent the break in nav of the right part for small questions, and hide the ul.tour ?

Susy SASS:

.mod-header
  @include container
  clear: both
  border: 2px red solid
  +rem('height', 70px)

  .logo
    text-indent: -9999px
    float: left
    +rem('width', 120px)
    +rem('height', 29px)
    +rem('margin', 20px 0)
    border: 2px blue solid
    +data-uri-bg('logo.png')

  nav
    @include span-columns(4,12)
    border: 2px blue solid
    float: right
    +rem('margin', 20px 0)
    +rem('height', 29px)

    ul
      li
        float: left
        +rem('margin', 0 8px)

来源：https://stackoverflow.com/questions/16048134/how-to-make-a-header-responsive

标签

responsive-design

susy-compass