.menubar { background-color: darkslategrey; color: azure; position: fixed; top: 0; left: 0; width: 100%; height: 40px; } .menubar_logo img { max-width: 13%; padding: 5px; } .menubar_hamburger { position: absolute; top: 2px; right: 0; padding: 5px; } .sidebar_open_long {display: none;} .sidebar_close_long {display: none;} .sidebar_open_short { display: block; font-size: larger; background-color: slategrey; color: azure; border: none; border-radius: 2px; } .sidebar_close_short { display: none; font-size: larger; background-color: slategrey; 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_social { position: absolute; bottom: 50px; width: 100%; } @media screen and (min-width: 800px) { .menubar { position: -webkit-sticky; position: sticky; top: 0px; } }