nav {
background-color: #2f3036; position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 40px; /*fix the sizing */ *, *:before, *:after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } /*Strip the ul of padding and list styling*/ ul { list-style-type:none; margin:0; padding:0; z-index: 9999; position: fixed; } /*Create a horizontal list with spacing*/ li { display:inline-block; float: left; margin-right: 0px; } /*Style for menu links*/ li a { display:block; min-width:120px; height: 40px; text-align: center; line-height: 40px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; background: #00283c; text-decoration: none; } /*Hover state for top level links*/ li:hover a { background: gold; } /*For website icon*/ li.hide a, li.hide:hover a { background: transparent; height: 0px; } /*Style for dropdown links*/ li:hover ul a { background: #f3f3f3; color: #00283c; height: 40px; line-height: 40px; } /*Hover state for dropdown links*/ li:hover ul a:hover { background: gold; color: #fff; } /*Hide dropdown links until they are needed*/ li ul { display: none; } /*Make dropdown links vertical*/ li ul li { display: block; float: none; } /*Prevent text wrapping*/ li ul li a { width: auto; min-width: 100px; padding: 0 10px; } /*Display the dropdown on hover*/ ul li a:hover + .hidden, .hidden:hover { display: block; } /*Style 'show menu' label button and hide it by default*/ .show-menu { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none; color: #fff; background: #00283c; text-align: center; padding: 10px 0; display: none; } /*Hide checkbox*/ input[type=checkbox]{ display: none; } /*Show menu when invisible checkbox is checked*/ input[type=checkbox]:checked ~ #menu{ display: block; }
}
/*Responsive Styles*/ @media screen and (max-width : 760px){
nav { /*Make dropdown links appear inline*/ ul { position: static; display: none; } /*Create vertical spacing*/ li { margin-bottom: 0px; } /*Make all menu links full width*/ ul li, li a { width: 100%; } /*Display 'show menu' link*/ .show-menu { display: block; } } /*show the center logo */ .web-logo { display: block; }
}