Instantly share code, notes, and snippets.
Created
February 26, 2016 21:23
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save stirlinghewitt/7b6709f59aa900cbe0c7 to your computer and use it in GitHub Desktop.
fye nav CSS with floating header code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* @group Nav */ | |
| #navBack { | |
| background: rgb(13,156,65); /* Old browsers */ | |
| background: -moz-linear-gradient(top, rgba(13,156,65,1) 0%, rgba(0,119,53,1) 60%, rgba(0,79,39,1) 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(13,156,65,1)), color-stop(60%,rgba(0,119,53,1)), color-stop(100%,rgba(0,79,39,1))); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, rgba(13,156,65,1) 0%,rgba(0,119,53,1) 60%,rgba(0,79,39,1) 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, rgba(13,156,65,1) 0%,rgba(0,119,53,1) 60%,rgba(0,79,39,1) 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, rgba(13,156,65,1) 0%,rgba(0,119,53,1) 60%,rgba(0,79,39,1) 100%); /* IE10+ */ | |
| background: linear-gradient(to bottom, rgba(13,156,65,1) 0%,rgba(0,119,53,1) 60%,rgba(0,79,39,1) 100%); /* W3C */ | |
| -pie-background: linear-gradient(top, rgba(13,156,65,1) 0%,rgba(0,119,53,1) 60%,rgba(0,79,39,1) 100%); /* IE10+ */ | |
| behavior: url(/content/js/PIE.php); | |
| height: 40px; | |
| position: fixed; | |
| width: 1000%; | |
| z-index: 9900; | |
| top: 0px; | |
| border-bottom: 5px solid #7d5f13; | |
| -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.39); | |
| -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.39); | |
| box-shadow: 0 2px 3px rgba(0, 0, 0, 0.39); | |
| } | |
| #nav { | |
| position: fixed; | |
| margin-bottom: 15px; | |
| height: 40px; | |
| top: 0px; | |
| border-bottom: 5px solid #7d5f13; | |
| background: rgb(13,156,65); /* Old browsers */ | |
| background: -moz-linear-gradient(top, rgba(13,156,65,1) 0%, rgba(0,119,53,1) 60%, rgba(0,79,39,1) 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(13,156,65,1)), color-stop(60%,rgba(0,119,53,1)), color-stop(100%,rgba(0,79,39,1))); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, rgba(13,156,65,1) 0%,rgba(0,119,53,1) 60%,rgba(0,79,39,1) 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, rgba(13,156,65,1) 0%,rgba(0,119,53,1) 60%,rgba(0,79,39,1) 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, rgba(13,156,65,1) 0%,rgba(0,119,53,1) 60%,rgba(0,79,39,1) 100%); /* IE10+ */ | |
| background: linear-gradient(to bottom, rgba(13,156,65,1) 0%,rgba(0,119,53,1) 60%,rgba(0,79,39,1) 100%); /* W3C */ | |
| -pie-background: linear-gradient(top, rgba(13,156,65,1) 0%,rgba(0,119,53,1) 60%,rgba(0,79,39,1) 100%); /* IE10+ */ | |
| z-index: 9999; | |
| border-right: 1px solid #0b9b3f; | |
| border-left: 1px solid #005528; | |
| behavior: url(/content/js/PIE.php); | |
| } | |
| #nav h4 { | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| } | |
| #menu { | |
| margin:0; | |
| padding:0; | |
| width: 990px; | |
| list-style:none; | |
| position:relative; | |
| z-index:999; | |
| white-space:nowrap; | |
| display: table; | |
| } | |
| #menu a { | |
| text-decoration:none; | |
| font-family: 'Ubuntu', sans-serif; | |
| } | |
| .menuHeaders h4 { | |
| margin-bottom: 5px !important; | |
| margin-top: 5px !important; | |
| line-height: 20px !important; | |
| color: #000 !important; | |
| } | |
| .menuitem { | |
| display: table-cell; | |
| line-height: 40px; | |
| text-align:center; | |
| margin: 0; | |
| font-size: 16px; | |
| font-weight: bold; | |
| background: rgb(13,156,65); /* Old browsers */ | |
| background: -moz-linear-gradient(top, rgba(13,156,65,1) 0%, rgba(0,119,53,1) 60%, rgba(0,79,39,1) 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(13,156,65,1)), color-stop(60%,rgba(0,119,53,1)), color-stop(100%,rgba(0,79,39,1))); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, rgba(13,156,65,1) 0%,rgba(0,119,53,1) 60%,rgba(0,79,39,1) 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, rgba(13,156,65,1) 0%,rgba(0,119,53,1) 60%,rgba(0,79,39,1) 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, rgba(13,156,65,1) 0%,rgba(0,119,53,1) 60%,rgba(0,79,39,1) 100%); /* IE10+ */ | |
| background: linear-gradient(to bottom, rgba(13,156,65,1) 0%,rgba(0,119,53,1) 60%,rgba(0,79,39,1) 100%); /* W3C */ | |
| -pie-background: linear-gradient(top, rgba(13,156,65,1) 0%,rgba(0,119,53,1) 60%,rgba(0,79,39,1) 100%); /* IE10+ */ | |
| position:relative; | |
| border-left: 1px solid #0b9b3f; | |
| border-right: 1px solid #005528; | |
| behavior: url(/content/js/PIE.php); | |
| } | |
| .menuitem:hover { | |
| border-left: 1px inset #FFF; | |
| border-right: 1px inset #FFF; | |
| background: #FFF; | |
| } | |
| .menuitem:hover .menulink { | |
| color: #d62f22; | |
| background-color: #FFF; | |
| } | |
| .current { | |
| color:#B10868; | |
| position:relative; | |
| behavior: url(/content/js/PIE.php); | |
| } | |
| .current a:hover { | |
| color: #B10868 !important; | |
| } | |
| .current a { | |
| } | |
| .current h4 { | |
| color: #000; | |
| } | |
| .menulink { | |
| border-bottom:0; | |
| color: #FFF; | |
| text-transform:uppercase; | |
| display:block; | |
| text-decoration: none; | |
| position:relative; | |
| behavior: url(/content/js/PIE.php); | |
| } | |
| .menulink:hover { | |
| color:#FFF; | |
| } | |
| .submenu { | |
| text-align:left; | |
| font-weight: normal; | |
| display:none; | |
| position:absolute; | |
| padding:5px; | |
| background-color:#FFF; | |
| border:8px solid #FFF; | |
| white-space:nowrap; | |
| border-radius: 0 0 5px 5px; | |
| -webkit-border-radius: 0 0 5px 5px; | |
| -moz-border-radius: 0 0 5px 5px; | |
| -webkit-box-shadow: 5px 5px 10px rgba(102, 102, 102, 0.39); | |
| -moz-box-shadow: 5px 5px 10px rgba(102, 102, 102, 0.39); | |
| box-shadow: 5px 5px 10px rgba(102, 102, 102, 0.39); | |
| } | |
| .submenu a { | |
| color:#00663a !important; | |
| z-index:999; | |
| font-size:12px; | |
| } | |
| .submenu a:hover { | |
| text-decoration: underline !important; | |
| } | |
| .submenu h1 { | |
| display:block; | |
| text-align:center; | |
| width:100%; | |
| font-size:13px; | |
| margin:0 0 10px 0; | |
| padding:3px 0; | |
| } | |
| .submenu h1 a { | |
| color:#FFF !important; | |
| display:block; | |
| text-align:center; | |
| width:100%; | |
| font-size: 13px; | |
| margin:0; | |
| background-color: #0e1832; | |
| } | |
| .submenu table td { | |
| padding-right:15px; | |
| } | |
| .submenu table td p { | |
| margin:0; | |
| padding:0; | |
| line-height:1.5em; | |
| } | |
| #homeLink { | |
| padding:0 !important; | |
| } | |
| /*#homeLink a { | |
| height: 39px; | |
| width: 192px; | |
| background: url(/content/images/nav-logo-sprite.png) 21px -37px no-repeat; | |
| } | |
| #homeLink a:hover { | |
| background: #FFF url(/content/images/nav-logo-sprite.png) 21px 3px no-repeat; | |
| }*/ | |
| /* @end */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment