Skip to content

Instantly share code, notes, and snippets.

@starryeyez024
Created January 19, 2015 16:11
Show Gist options
  • Save starryeyez024/7a2f0d723fddc64ecd8e to your computer and use it in GitHub Desktop.
Save starryeyez024/7a2f0d723fddc64ecd8e to your computer and use it in GitHub Desktop.
Mobile Menu Hamburger
<div class="toggle">
</div>
// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----
$navy: #00293a;
body {
background: $navy;
}
.toggle:after {
content: "|||";
border: 1px solid desaturate(lighten($navy, 10), 47);
background-color: lighten($navy, 2);
border-radius: 3px;
color: white;
padding: 10px;
width: 25px;
line-height: 0.7;
float: right;
font-size: 40px;
height: 25px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
body {
background: #00293a;
}
.toggle:after {
content: "|||";
border: 1px solid #1a4253;
background-color: #003044;
border-radius: 3px;
color: white;
padding: 10px;
width: 25px;
line-height: 0.7;
float: right;
font-size: 40px;
height: 25px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
<div class="toggle">
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment