#mainNav { display: flex; flex-direction: column; align-items: stretch; font-family: 'Orbitron-Medium', sans-serif; /* line-height: 1.6;*/ margin: .5em 0; padding: 0; border: 1px solid #a2a2a2; background-color: #FF8100; border-radius: .25em; } #mainNav > a { display: flex; flex-direction: row; align-items: center; color: #34495e; text-decoration: none; padding: 1em 1.5em; text-transform: uppercase; } #mainNav > a > span:nth-child(1){ flex-basis: 38.2%; display: flex; align-items: center; } #mainNav > a > span:nth-child(2){ padding-top:.2em; } #mainNav > a > span > amp-img{ max-width: 2em; } #mainNav > a > span > img{ height: 2em; width: auto; } #mainNav a:hover { background-color: #FFAE00; color: #718daa; } /* ================================= Media Queries ==================================== */ @media (min-width: 640px) { #mainNav { display: flex; flex-direction: row; align-items: flex-end; } #mainNav > a{ padding: .5em .5em; } #mainNav > a > amp-img, #mainNav > a > img{ display: none; } #mainNav > a > span{ display: initial; } #mainNav > a > span:nth-child(1){ flex-basis: initial; } } @media (min-width: 1280px) { #mainNav{ flex-direction: row; justify-content: center; } #mainNav > a { padding: 1em 1.5em; } #mainNav > a > amp-img, #mainNav > a > img{ display: initial; } }