#menubar { background-color: darkslategrey; color: azure; position: fixed; top: 0; left: 0; width: 100%; height: 40px; } #menubar_logo img { max-height: 20px; padding: 10px; } #menubar_hamburger { position: absolute; top: 2px; right: 0; padding: 5px; } #sidebar_open_short { display: block; font-size: larger; background-color: transparent; color: azure; border: none; border-radius: 2px; } #sidebar_close_short { display: none; font-size: larger; background-color: transparent; color: azure; border: none; border-radius: 2px; } #sidebar { position: fixed; top: 40px; right: 0; margin: auto; height: 100%; display: block; max-width: 60%; width: 0; background-color: darkslategrey; transition: 0.7s; } #sidebar a { padding: 8px 8px 8px 8px; margin-left: 20px; margin-top: 10px; font-family: sans-serif; font-weight: 300; text-decoration: none; text-align: right; font-size: 25px; color: cyan; display: block; } #sidebar_logo { } #sidebar_social { position: absolute; bottom: 50px; width: 100%; } @media screen and (min-width: 800px) { #menubar { position: -webkit-sticky; position: sticky; top: 0px; } }