/* All screens */ .navbar A { color: #FFFFFF; text-decoration: none; } .spacer { flex: 1 1 auto; } .drop { height: 1em; vertical-align: top; } /* Large Screens */ @media only screen and (min-width: 951px) { .smallcube { border-collapse: collapse; border: 0px; table-layout: fixed; margin: 0px 0px 0px 10px; padding: 0px; } .smallcube TD { width: 10px; height: 10px; min-width: 10px; max-width: 10px; border: 1px solid #636056; margin: 0px; padding: 0px; display: inline-block; } .logo { width: 75px; height: 75px; margin: 0px; padding: 0px; display: inline; text-align: left; vertical-align: middle; } .title { display: inline; font-size: 36px; font-weight: bold; padding-left: 15px; } .menuButton { display: none; } .navbar { background-color: #636056; display: flex; height: 75px; align-items: center; padding-left: 10px; padding-right: 20px; } UL.nav { list-style-type: none; padding: 0px; margin: 0px; display: flex; } UL.nav LI { font-size: 18px; padding: 20px; display: flex; } UL.subnav { list-style-type: none; padding: 1px; margin: 0px; margin-top: 10px; } UL.subnav LI { font-size: 14px; color: #FFFFFF; padding: 5px; position: relative; display: block; } UL.subnav LI A { padding: 0px; } UL.subnav A LI:hover { background-color: #FFFFFF; color: #636056; } .submenu { display: none; position: absolute; transform: translateY(35px); z-index: 1; } .subnav { background-color: #636056; } } @media only screen and (max-width: 1100px) { UL.nav LI { font-size: 18px; padding: 10px; } } /* Small Screens */ @media only screen and (max-width: 950px) { .logo { display: none; } A.mobiletitle { display: inline; font-size: 36px; font-weight: bold; color: #808080; } .menuButton { cursor: hand; margin: 5px; font-size: 36px; color: #808080; } .navbar { background-color: #303030; display: none; } UL.nav { list-style-type: none; padding: 0px; margin: 0px; width: 100%; } UL.nav LI { padding: 10px; width: 100%; } UL.subnav { list-style-type: none; padding: 0px; margin: 0px; margin-top: 10px; } UL.subnav LI { font-size: 14px; color: #FFFFFF; padding: 10px; position: relative; display: inline-block; width: 100%; } .submenu { display: none; } .subnav { background-color: #808080; } }