Как удалить элемент на адаптивном (Susy) макете?

У меня есть навигационная панель, которую я хотел бы скрыть, когда страница просматривается на маленьком экране (идеальная точка останова ниже 750 пикселей). Я действительно новичок в Сьюзи и адаптивных макетах в целом.

Я использую: compass, susy и sass/scss Заранее благодарю за любую помощь, которую вы можете оказать.

Cheers-

//susy setup -------------------------------------
$total-columns  : 12;
$column-width  : 4em;
$gutter-width  : 1em;
$grid-padding  : $gutter-width;
$gutter-position : split;
$output    : float;
$match    : fluid;

@include border-box-sizing;

$small    : 30em;
$medium    : 47em;
$large    : 75em;


.mininav {
 height: 3%;
 font-size: 75%;
 background: $ultragray;
    border-width: 3px;
    border-bottom-style: double;
    border-bottom-color: $ctblack;
 padding-top: 15px;
 padding-bottom: 10px; 
 //padding-top: 1%;
 //padding-left: 12%;

 .logo {
   @include span(4 of 12); 
      background: url('../../images/misc/logo.png');
      background-repeat: no-repeat;
      display: block;
      height: 10px;
      padding-top: 3px;
      overflow: hidden;
      text-indent: -9999px;
      width: 191px;

   a {
       display: block;
    text-decoration: none;
    &:hover {
     background-position: 0 -5px;
      }

   }  //a 

 }//logo

 ul.nav {
   list-style-type: none;
   @include susy-breakpoint($small) {
   @include horizontal-list;
   margin-left: span(8 of 12);
   padding-right: 20px;
   //display: inline-block;
  } 
  li {
  i {
   color: $gray;
   padding-right: .5em;
   padding-left: 1em;
  } //icon style

  a {
   @include single-transition(all, .5s, ease-out);
   display: block;
   text-decoration: none;
   //padding: 5px 10px;
   color: $navwhite;
   line-height: 120%;   
   &:hover {
    color:$ctwhite;
     }
  }  //a 

  } //li
 } // ul.nav
} // mini navigation
  <div class="mininav">
    <section class="layout">
    <div class="Logo"><a href="#">Logo</a></div>

      <ul class="nav">
        <li><a href="/">555-555-5555</a> </li>
        <li><a href="/"><i class="fa fa-comment"></i>Chat</a> </li>
        <li><a href="/"><i class="fa fa-file-text"></i>Blog</a></li>
      </ul>
    </section><!-- layout -->
  </div><!-- mini navigation -->

0 ответов

Другие вопросы по тегам