.subNav { display: flex; flex-direction: row; 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; } .subNav > a { color: #34495e; text-decoration: none; padding: 10px 15px; text-transform: uppercase; text-align: center; display: block; color: #34495e; } .subNav > a:last-child{ margin-left: auto; } .subNav > a > img{ height: 1em; width: auto; } .subNav > a > span{ display: none; } .subNav a:hover { background-color: #FFAE00; color: #718daa; } /* ================================= Media Queries ==================================== */ @media (min-width: 640px) { .subNav { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; } .subNav > a:last-child{ display: none; } .subNav > a{ display: flex; justify-content: flex-end; align-items: center; } .subNav > a > img{ display: none; } .subNav > a > span{ display: initial; } } @media (min-width: 1280px) { .subNav{ justify-content: center; } .subNav > a > img{ display: initial; } .subNav > a{ justify-content: flex-start; } }