.header { margin: auto; width: 100%; padding: 1rem; padding-right: 0rem; display: flex; font-size: large; overflow: hidden; flex-shrink: 0; background: white; box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2); position: fixed; z-index: 999; top: 0; } .header-container { width: 100%; max-width: 1152px; display: flex; margin: auto; } .sticky { position: fixed; top: 0; } .logo { height: 3.5rem; max-width: 10rem; } .small-logo { height: 2.5rem; max-width: 10rem; } .menu-icon { display: none; font-size: larger; } .header-items { margin: auto; margin-left: 0px; display: flex; } .header-item { margin-left: 2.5rem } .dropdown { overflow: hidden; } .dropdown .dropbtn { border: none; outline: none; margin: 0; } .dropdown-content { display: none; position: fixed; background-color: #ffffff; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { padding: 0.5rem 1rem; display: block; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } @media screen and (max-width: 600px) { .header-container { display: block; } .home { width: 100vw; } .menu-icon { display: block; position: fixed; top: 30px; right: 30px; } .menu-icon .hide { display: none; } .small-icon { top: 20px; } .header-items { display: none; } .header-items.responsive { position: relative; float: none; display: block; text-align: left; margin-top: 0.5rem; } .header-items.responsive .header-item { display: block; margin-left: 0rem; padding-bottom: 0.5rem; padding-top: 0.5rem; } .header-items.responsive .icon { position: absolute; right: 0; top: 0; } .header-items.responsive .dropdown { float: none; } .header-items.responsive .dropdown-content { position: relative; box-shadow: none; } .header-items.responsive .dropdown .dropbtn { display: block; width: 100vw; text-align: left; } }