Skip to content

Instantly share code, notes, and snippets.

@WebsiteStudents
Last active December 12, 2015 09:19
Show Gist options
  • Save WebsiteStudents/4750971 to your computer and use it in GitHub Desktop.
Save WebsiteStudents/4750971 to your computer and use it in GitHub Desktop.
Code for our Week 5 project that includes visual design for a nav button. Use this to replace the /*PASTE THE NAV-GRISSOM CODE HERE*/ comment in the CSS of our Apollo project.
.mainnav ul li.grissom {
background: url("images/nav-icon.png") no-repeat scroll 2% 50% rgba(240, 240, 220, 1);
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out; 
}
.mainnav ul li.grissom a {
background: rgba(240, 240, 220, .95);
color: #000000;
display: block;
font-family: Verdana,Geneva,sans-serif;
font-size: 0.8em;
font-weight: bold;
margin-bottom: 0.33em;
padding: 0.33em 1em 0.33em 2.2em;
text-decoration: none;
width: auto;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; 
}
.mainnav ul li.grissom:hover {
background: url("images/nav-icon.png") no-repeat scroll 2% 50% rgba(215, 215, 200, 1);
}
.mainnav ul li.grissom a:hover {
background: rgba(215, 215, 200, 0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment