.header-nav { display: block; position:absolute; *position: sticky; top:40px; right:15%; margin: 0; padding: 0; max-width:100%; 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 #000; } /* ------------------------------------------ NAVIGATION STYLES (+ responsive-nav.css file is loaded in the ) --------------------------------------------- */ .fixed { position: sticky; position: fixed; max-width:100%; top: 0px; right: 15%; border:0px solid #000; } .nav-collapse, .nav-collapse * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border:0px solid green; margin:0 auto; } .nav-collapse, .nav-collapse ul { display:table; list-style: none !important; min-width:200px; max-width:100%; height:60px; margin: 6px auto 0; padding:0; border:0px solid blue; } .nav-collapse li { position:relative; font-size: 1.2em; height:auto; width:auto; padding:0; margin: 0 auto; float: left; text-align: center; text-indent: 0; border-left:0px solid #ccc; border-right:1px solid #ccc; border-bottom:0px solid #ccc; border:0px solid red; } .nav-collapse li::before { content: ""; margin: 0; } nav ul li.borderleft { border-left:1px solid #ccc; } .nav-collapse a { display:table-cell; vertical-align:middle; font-family: Arial, Helvetica, sans-serif; font-weight:normal; width:auto; margin:0 auto; padding:10px 22px; height:40px; font-size: 0.9em; *line-height:1.9em; text-decoration: none !important; text-transform: uppercase; text-align: center !important; color: #222; border:0px solid red; } .nav-collapse a:link { color: #222; } .nav-collapse a:visited { color: #222; } .nav-collapse a:focus { color: #222; } .nav-collapse a:hover { margin:0 auto; background-color:transparent; color:#bbac0c !important; text-decoration:none; transition:all .3s linear; -webkit-transition:all .3s linear; -moz-transition:all .3s linear; -o-transition:all .3s linear; } .nav-collapse a.active { color: #d2c53d !important; } /* @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; position: relative; overflow: hidden; width: 60px; height: 44px; float: right; margin:0 24px 0 0; border:0px solid red; } .nav-toggle::before { color: #000; /* Edit this to change the icon color */ font-family: arial, helvetica, sans-serif; font-style: normal; font-weight: normal; font-variant: normal; font-size: 30px; text-transform: none; text-decoration:none !important; position: absolute; content: "≡"; text-indent: 0; text-align: center; line-height: 44px; speak: none; width: 100%; top: 0; left: 0; } .nav-toggle.active::before { font-size: 28px; content:"x"; background:#fff; border:0px solid #ccc; } /****************************************** RESPONSIVE ******************************************/ /***************************************** - 1620px *************************************/ @media screen and (max-width: 1620px) { .header-nav { display: block; position:absolute; top:40px; right:12%; margin: 0; padding: 0; max-width:100%; 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 #000; } .fixed { position: sticky; position: fixed; max-width:100%; top: 10px; right: 12%; border:0px solid #000; } } /***************************************** - 1420px *************************************/ @media screen and (max-width: 1420px) { .nav-collapse a { display:table-cell; vertical-align:middle; font-family: Arial, Helvetica, sans-serif; font-weight:normal; width:auto; margin:0 auto; padding:10px 12px; height:40px; font-size: 0.9em; *line-height:1.9em; text-decoration: none !important; text-transform: uppercase; text-align: center !important; color: #222; border:0px solid red; } } /***************************************** - 1260px ************************************/ @media screen and (max-width: 1260px) { .header-nav { display: block; position:absolute; top:40px; right:5%; margin: 0; padding: 0; max-width:100%; 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 #000; } .fixed { position: sticky; position: fixed; max-width:100%; top: 10px; right: 5%; border:0px solid #000; } .nav-collapse a { display:table-cell; vertical-align:middle; font-family: Arial, Helvetica, sans-serif; font-weight:normal; width:auto; margin:0 auto; padding:10px 9px; height:40px; font-size: 0.9em; *line-height:1.9em; text-decoration: none !important; text-transform: uppercase; text-align: center !important; color: #222; border:0px solid red; } } /***************************************** - 1040px ************************************* @media screen and (max-width: 860px) { .nav-collapse li { position:relative; font-size: 1.1em; height:auto; width:auto; padding:0; margin: 0 auto; float: right; text-align: center; text-indent: 0; border-left:0px solid #ccc; border-right:1px solid #ccc; border-bottom:0px solid #ccc; border:0px solid red; } }/ /***************************************** - 980px *************************************/ @media screen and (max-width: 980px) { .header-nav { display: block; position:absolute; top:34px; right:0; margin: 0; padding: 0; width:100%; height:auto; min-width:20%; background:transparent; /*-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 #000; } .fixed { position: sticky; position: fixed; max-width:100%; top: 22px; right: 0; border:0px solid #000; } .nav-collapse, .nav-collapse ul { display:table; list-style: none !important; min-width:200px; width:100%; height:auto; margin: 0 auto; top:68px; padding:0 0 20px 0; border:0px solid blue; border-bottom:1px solid #ddd; background:#fff; } .nav-collapse li { display:table; height:auto; width:100%; padding:6px 0; margin: 0 auto; position:relative; float: left; text-align: center; border-left:0px solid #ccc; border-right:0px solid #fff; border:0px solid red; border-bottom:1px solid #ddd; } .nav-collapse a { background: transparent; display:table-cell; vertical-align:middle; font-family: Arial, Helvetica, sans-serif; font-weight:normal; width:auto; margin:0 auto; padding:0; font-size: 0.9em; line-height:1.8em; text-decoration: none !important; text-transform: uppercase; text-align: center; color: #222; border:0px solid red; } nav ul li.borderleft { border-left:0px solid #ccc; } } /***************************************** - 760px *************************************/ @media screen and (max-width: 760px) { .header-nav { display: block; position:absolute; top:20px; right:0; margin: 0; padding: 0; width:100%; height:auto; min-width:20%; background:transparent; /*-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:10000; border:0px solid #000; } .fixed { position: sticky; position: fixed; max-width:100%; top: 16px; right: 0; border:0px solid #000; } .nav-collapse, .nav-collapse ul { display:table; list-style: none !important; min-width:200px; width:100%; top:60px; height:auto; margin: 0 auto; padding:0 0 30px 0; background: #fff; border:0px solid blue; border-bottom:1px solid #ddd; } .nav-collapse li { height:auto; width:100%; padding:6px 0; margin: 0 auto; position:relative; float: left; text-align: center; border-left:0px solid #ccc; border-right:0px solid #fff; border-bottom:1px solid #ddd; } nav ul li.borderleft { border-left:0px solid #fff; } .nav-collapse a { background: transparent; display:table-cell; vertical-align:middle; font-family: Arial, Helvetica, sans-serif; font-weight:normal; min-width:auto; margin:0; padding: 0; font-size: 0.85em; line-height:1.8em; text-decoration: none !important; text-transform: uppercase; text-align: center; color: #222; border:0px solid red; } }