Skip to content

Instantly share code, notes, and snippets.

@cimmanon
Created August 12, 2014 15:46
Show Gist options
  • Save cimmanon/37042db81ea407c76098 to your computer and use it in GitHub Desktop.
Save cimmanon/37042db81ea407c76098 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<header>
<div class="container">
<a href="#" class="logo">Research Concepts | Satellite Antenna Controllers</a>
<nav class="main-navigation">
<ul>
<li><a href="#" class="navigation-link">Home</a></li>
<li><a href="#" class="navigation-link">Products/Support</a></li>
<li><a href="#" class="navigation-link">About Us</a></li>
<li><a href="#" class="navigation-link">Contact Us</a></li>
<li><a href="#" class="navigation-link">News/Events</a></li>
<li><a href="#" class="search">Search</a></li>
</ul>
<a href="#" class="mobile-navigation">
<div class="icon-bar"></div>
<div class="icon-bar"></div>
<div class="icon-bar"></div>
</a>
</nav>
</div>
</header>
// ----
// Sass (v3.4.0.rc.3)
// Compass (v1.0.0.rc.1)
// ----
$black: black;
$maroon: red;
nav {
float: right;
ul {
margin: 0;
padding: 0;
&:after {
content: "";
display: block;
clear: both;
}
li {
float: left;
a {
margin-left: 2.813em;
text-decoration: none;
line-height: 36px;
color: $black;
&:hover {
color: $maroon;
}
&:first-child {
color: green;
}
}
&:first-child a {
margin-left: 0;
color: pink;
}
}
}
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul:after {
content: "";
display: block;
clear: both;
}
nav ul li {
float: left;
}
nav ul li a {
margin-left: 2.813em;
text-decoration: none;
line-height: 36px;
color: black;
}
nav ul li a:hover {
color: red;
}
nav ul li a:first-child {
color: green;
}
nav ul li:first-child a {
margin-left: 0;
color: pink;
}
<header>
<div class="container">
<a href="#" class="logo">Research Concepts | Satellite Antenna Controllers</a>
<nav class="main-navigation">
<ul>
<li><a href="#" class="navigation-link">Home</a></li>
<li><a href="#" class="navigation-link">Products/Support</a></li>
<li><a href="#" class="navigation-link">About Us</a></li>
<li><a href="#" class="navigation-link">Contact Us</a></li>
<li><a href="#" class="navigation-link">News/Events</a></li>
<li><a href="#" class="search">Search</a></li>
</ul>
<a href="#" class="mobile-navigation">
<div class="icon-bar"></div>
<div class="icon-bar"></div>
<div class="icon-bar"></div>
</a>
</nav>
</div>
</header>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment