Team:UNSW Australia/Navbar

<style> /* NAVBAR */

body { margin: 0; }

.navToggle { display: none; }

.navToggleLabel { position: absolute; top: 0; left: 0; margin-left: 1em; height: 100%; display: flex; align-items: center; }

.navToggleLabel span, .navToggleLabel span:before, .navToggleLabel span:after { display: block; background: black; height: 2px; width: 2em; border-radius: 2px; position: relative; }

.navToggleLabel span:before, .navToggleLabel span:after { content: ; position: absolute; }

.navToggleLabel span:before { bottom: 7px; }

.navToggleLabel span:after { top: 7px; }

.navToggle:checked ~ #menu { transform: scale(1, 1); }

.navToggle:checked ~ #menu { opacity: 1; transition: opacity 250ms ease-in-out 250ms; }

  1. navbar {

background-color: #1E1E1E; height: 60px; color: white; position: fixed; width: 100%; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }

.sub-menu { 

   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
   font-size: 0.9rem;

}

.sub-menu a { 

   float: none;
   color: black;
   padding: 8px 10px;
   text-decoration: none;
   display: block;

text-align: left; }

.sub-menu a:hover { background-color: #DBDBDB; }

@media screen and (min-width: 1020px) { .navToggleLabel { display: hide; }

#navbar { height: 43px; }

.sub-menu { top: 43px; display: none; }

.sub-menu:hover { display: block; }

.main-menu:hover { color: #9C3132; }

#people:hover ~ #people-sub, #project:hover ~ #project-sub, #parts:hover ~ #parts-sub, #modelling:hover ~ #modelling-sub, #hp:hover ~ #hp-sub, #doc:hover ~ #doc-sub, #judging:hover ~ #judging-sub { display: block; }

#navbar img { padding: 10px 10px 10px 10px; margin-left: 70px; top: -5px; border-radius: 100px; position: absolute; background-color: #1E1E1E; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }

#menu { float: right; overflow: hidden; font-family: 'Lato'; margin-right: 50px; }

.main-menu { float: left; overflow: hidden; text-transform: uppercase; font-size: 1rem; border: none; outline: none; color: white; padding: 2px 5px 12px 0px; background-color: inherit; font-family: inherit; margin: 0; }

.dropbutton { background: none; border: none; color: inherit; font: inherit; font-size: inherit; text-transform: uppercase; padding: 11px 5px; } }


/* END NAVBAR */ </style>