如何删除响应(Susy)布局上的项目?

时间:2015-10-12 20:34:03

标签: responsive-design sass susy-compass susy

我有一个导航栏,我想在小屏幕上查看页面时隐藏(理想的断点低于750px)。我对Susy和一般的响应式布局都很陌生。

我正在使用:指南针,susy和sass / scss 提前感谢您提供的任何帮助。

干杯 -



//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 -->
&#13;
&#13;
&#13;

0 个答案:

没有答案