.menu { display: inline-flex; padding: 0; margin: 0; } .menu_item { list-style: none; display: inline-flex; margin-left: 1.8em; } .menu_item .link { display: inline-flex; align-items: center; color: var(--medium-dark); } .menu_item .link:hover { color: var(--link); } .menu_item .icon { width: 1.6em; height: 1.6em; } .menu_item .label { font-size: 0.95em; font-weight: 500; margin-left: 0.8em; line-height: 1; } .menu_item.theme_toggle { margin-left: 1.25em; } @media screen and (max-width: 768px) { .menu { width: 100%; justify-content: space-between; } .menu_item { margin-left: 0; } .menu_item .icon { width: 1.8em; height: 1.8em; } /* hide text next to emojis on mobile */ .menu_item .label { display: none; } .menu_item.theme_toggle { margin-left: -0.3em; } } /* the home icon is redundant when space is SUPER tight */ @media screen and (max-width: 380px) { .menu_item:first-of-type { display: none; } }