.header-nav { display: block; position:fixed; *position: sticky; top:32px; right:8%; margin: 0; padding: 0; width:auto; height:auto; min-width:20%; *background: #fff; /*-webkit-box-shadow: 0 1px 2px #999; -moz-box-shadow: 0 1px 2px #999; -o-box-shadow: 0 1px 2px #999; box-shadow: 0 1px 2px #999; */ z-index:100000; border:0px solid red; } /* ------------------------------------------ NAVIGATION STYLES (+ responsive-nav.css file is loaded in the ) --------------------------------------------- */ .fixed { position: fixed; width: 100%; top: 0; left: 0; } .nav-collapse, .nav-collapse * { -moz-box-sizing: border-box; box-sizing: border-box; border:0px solid green; margin:0; } .nav-collapse, .nav-collapse ul { display:table; list-style: none !important; min-width:200px; width:100%; height:auto; margin: 0 auto; padding:0; border-collapse: collapse; border:0px solid blue; } .nav-collapse li { position:relative; height:auto; width:auto; padding: 0; margin: 0 auto; background:#333; float: left; text-align: center; font-size: 1.6em; text-indent: 0; border-spacing: 12px 0px; border-left:0px solid #ccc; border-right:0px solid #444; border-bottom:0px solid #ccc; border:0px solid red; *border-collapse:0 none; } .nav-collapse li::before { content: ""; margin: 0; } .nav-collapse li.borderright { border-right:1px solid #888; } @media screen and (max-width: 1080px) { .nav-collapse li { width: 100% !important; } } .nav-collapse a { display:table-cell; vertical-align:middle; font-family: 'Griffy', cursive; font-weight:normal; width:auto; margin:0 auto; padding:5px 40px 4px; height:22px; text-decoration: none !important; text-align: center !important; color: #fcfa5a; border-left:1px solid #888; } .nav-collapse a:link { color: #fcfa5a; } .nav-collapse a:visited { color: #fcfa5a; } .nav-collapse a:focus { color: #fcfa5a; } .nav-collapse a:hover { margin:0 auto; background-color:transparent; color: #fcfa5a !important; background-color:#444; text-decoration:none; border-radius:0; -webkit-transition:all .3s linear; -moz-transition:all .3s linear; -o-transition:all .3s linear; transition:all .3s linear; } .nav-collapse a.nav-active { color: #fcfa5a; background-color:#444; border-radius:0; } /* @media screen and (min-width: 40em) { .nav-collapse a { margin: 0; float: left; text-align: center; } } .nav-collapse ul ul a { background: #ca3716; padding-left: 2em; } @media screen and (min-width: 40em) { .nav-collapse ul ul a { display: none; } } */ /* ------------------------------------------ NAV TOGGLE STYLES --------------------------------------------- */ .nav-toggle { position: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-decoration: none; text-indent: -999px; overflow: hidden; width: 35px; height: 34px; float: right; right:30%; top: 28px; border:0px solid red; } .nav-toggle::before { color: #999; font-family: Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal; font-variant: normal; font-size: 32px; text-transform: none; text-decoration:none !important; position: fixed; content: "≡"; text-indent: 0; text-align: center; line-height: 30px; speak: none; width: 35px; top: 28px; right:30%; } .nav-toggle.active::before { font-size: 30px; width: 33px; content:"x"; border:0px solid #999; border-radius:0px; } /****************************************** RESPONSIVE ******************************************/ /***************************************** - 1280px *************************************/ @media screen and (max-width: 1280px) { .header-nav { display: block; position:fixed; *position: sticky; top:26px; left:inherit; right:11%; margin: 0; padding: 0; width:auto; height:auto; min-width:20%; *background: #fff; /*-webkit-box-shadow: 0 1px 2px #999; -moz-box-shadow: 0 1px 2px #999; -o-box-shadow: 0 1px 2px #999; box-shadow: 0 1px 2px #999;*/ z-index:100000; border:0px solid red; } .nav-collapse a { display:table-cell; vertical-align:middle; font-family: 'Griffy', cursive; font-weight:normal; width:auto; margin:0 auto; padding:5px 28px 4px; height:22px; text-decoration: none !important; text-align: center !important; color: #fcfa5a; border-left:1px solid #888; } } /***************************************** - 1080px *************************************/ @media screen and (max-width: 1080px) { .header-nav { display: block; position:fixed; *position: sticky; top:80px; left:inherit; right:0%; left:0%; margin: 0; padding: 0; width:100%; height:auto; min-width:16%; *background: #fff; /*-webkit-box-shadow: 0 1px 2px #999; -moz-box-shadow: 0 1px 2px #999; -o-box-shadow: 0 1px 2px #999; box-shadow: 0 1px 2px #999; */ z-index:100000; border:0px solid red; } .nav-collapse, .nav-collapse ul { display:table; list-style: none !important; min-width:200px; width:100% !important; height:1600px; margin: 0px auto 0; padding:40px 0 0 0; background:#333; border:0px solid blue; opacity:0.95; } .nav-collapse li { display:table; position:relative; width:100%; padding: 0; margin: 0 auto; float: left; text-align: center; font-size: 1.6em; text-indent: 0; background:#333; border-spacing: 4px 0px; border-left:0px solid #ccc; border-right:0px solid #444; border-bottom:1px solid #ccc; border-top:0px solid #fff; border-collapse:0; } .nav-collapse li.borderright { border-right:0px solid #888; } .nav-collapse a { display:table-cell; vertical-align:middle; font-family: 'Griffy', cursive; font-weight:normal; width:auto; margin:0 auto; padding:0; height:42px; text-decoration: none !important; text-align: center !important; color: #12468b; border-left:0px solid #888; } } /***************************************** - 640px *************************************/ @media screen and (max-width: 640px) { .header-nav { display: block; position:fixed; *position: sticky; top:66px; left:inherit; right:0%; left:0%; margin: 0; padding: 0; width:100%; height:auto; min-width:16%; *background: #fff; /*-webkit-box-shadow: 0 1px 2px #999; -moz-box-shadow: 0 1px 2px #999; -o-box-shadow: 0 1px 2px #999; box-shadow: 0 1px 2px #999; */ z-index:100000; border:0px solid red; } .nav-collapse, .nav-collapse ul { display:table; list-style: none !important; min-width:200px; width:auto; height:1600px; margin: 0 auto; padding:40px 2px 0; background: #333; border:0px solid blue; } .nav-collapse li { height:auto; width:auto; padding:8px 8px; margin: 0 auto; position:relative; font-size: 1.6em; float: left; text-align: center; border-left:0px solid #ccc; border-right:0px solid #fff; border-bottom:0px solid #fff; } .nav-collapse li.borderleft { border-left:0px solid #fff; } .nav-collapse a { display:table-cell; vertical-align:middle; font-family: 'Griffy', cursive; font-weight:normal; width:auto; margin:0 auto; padding:0; height:42px; text-decoration: none !important; text-align: center !important; color: #12468b; border-left:0px solid #888; } .nav-toggle { position: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-decoration: none; text-indent: -999px; overflow: hidden; width: 35px; height: 34px; float: right; right:30%; top: 22px; border:0px solid red; } .nav-toggle::before { color: #999; font-family: Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal; font-variant: normal; font-size: 32px; text-transform: none; text-decoration:none !important; position: fixed; content: "≡"; text-indent: 0; text-align: center; line-height: 30px; speak: none; width: 35px; top: 22px; right:30%; } .nav-toggle.active::before { font-size: 30px; width: 33px; content:"x"; border:0px solid #999; border-radius:0px; } }