Skip to content

Instantly share code, notes, and snippets.

@dmgarland
Created May 30, 2013 14:27
Show Gist options
  • Select an option

  • Save dmgarland/5678251 to your computer and use it in GitHub Desktop.

Select an option

Save dmgarland/5678251 to your computer and use it in GitHub Desktop.
Navigation bar with media queries
@mixin cool_gradient($from, $to) {
background: $from; /* Old browsers */
background: -moz-linear-gradient(top, $from 0%, $to 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$from), color-stop(100%,$to)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, $from 0%,$to 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, $from 0%,$to 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, $from 0%,$to 100%); /* IE10+ */
background: linear-gradient(to bottom, $from 0%,$to 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=0 ); /* IE6-9 */
}
#navigation {
@include cool_gradient(#feffff, #d2ebf9);
text-align: right;
padding-top: 6px;
padding-right: 20px;
height: 60px;
line-height: 54px;
border-bottom: 2px solid #6699cc;
@media (min-width: 321px) {
#nav-button {
display: none;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
li {
display: inline;
margin-right: 10px;
}
}
h1 {
color: #333;
float: left;
padding: 0px;
margin:0 0 0 20px;
text-shadow: 1px 1px #6699CC;
}
}
@media (max-width: 320px) {
h1 {
float: left;
display: none;
}
#nav-button {
text-align: center;
width: 43px;
height: 43px;
background: #000;
cursor: pointer;
display: inline-block;
}
ul {
display: none;
position: relative;
top: -10px;
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px;
margin-left: auto;
margin-right: 0px;
@include cool_gradient(#feffff, #d2ebf9);
li {
margin-right: 10px;
text-align: left;
padding-left: 20px;
pointer: cursor;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment