topnav.css (1404B)
1@font-face { 2 font-family: Clear Sans; 3 src: url(/fonts/ClearSans-Regular.woff2); 4} 5body { 6 margin: 0; 7} 8/* Responsive Topnav https://www.w3schools.com/css/css_navbar_horizontal.asp */ 9ul.topnav { 10 position: -webkit-sticky; /* Safari */ 11 position: sticky; 12 top: 0; 13 list-style-type: none; 14 margin: 0; 15 padding: 0; 16 overflow: hidden; 17 border-bottom: 1px solid #e0e0e0; 18 background-color: #ffffff; 19 line-height: 0.9em; 20} 21ul.topnav li { 22 float: left; 23 text-align: center; 24 margin: 0; 25 line-height: 0.7; 26} 27ul.topnav li a { 28 font-family: 'Clear Sans', sans-serif; 29 display: block; 30 color: gray; 31 text-align: center; 32 text-decoration: none; 33 padding: 0.8em 0.6em 0.6em 0.6em; 34} 35ul.topnav li a:hover:not(.active) { 36 color: #757575; 37 border-bottom: 3px solid #bdbdbd; 38} 39ul.topnav li a.active { 40 color: #757575; 41 border-bottom: 0.2em solid #757575; 42} 43ul.topnav li.right { 44 float: right; 45} 46@media screen and (max-width: 609px) { 47/* ul.topnav li.right, */ 48/* ul.topnav li {float: none;} */ 49 ul.topnav {line-height: 1.2em;} 50 ul.topnav li.home {width: 26.2%;} 51 ul.topnav li {width: 17.5%;} 52 ul.topnav li.right {width: 21.3%;} 53 ul.topnav li a {font-size: 20px;} 54} 55@media screen and (min-width: 610px) { 56 ul.topnav li {padding: 0 0.3em; width: 100px;} 57 ul.topnav li.home {padding: 0 1.8em 0 1.8em;} 58 ul.topnav li.right {padding: 0 1em 0 0;} 59 ul.topnav li a {font-size: 21px;} 60}