У меня есть панель навигации, которую я хотел бы скрыть при просмотре страницы на маленьком экране (идеальная точка останова ниже 750 пикселей). Я действительно новичок в Susy и адаптивных макетах в целом.
Я использую: compass, 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 -->