.p-navigation { border-bottom: 1px solid var(--color-sidebar-background-border); } .p-navigation__nav { background: #333333; display: flex; } .p-logo { display: flex !important; padding-top: 0 !important; text-decoration: none; } .p-logo-image { height: 44px; padding-right: 10px; } .p-logo-text { margin-top: 18px; color: white; text-decoration: none; } ul.p-navigation__links { display: flex; list-style: none; margin-left: 0; margin-top: auto; margin-bottom: auto; max-width: 800px; width: 100%; } ul.p-navigation__links li { margin: 0 auto; text-align: center; width: 100%; } ul.p-navigation__links li a { background-color: rgba(0, 0, 0, 0); border: none; border-radius: 0; color: var(--color-sidebar-link-text); display: block; font-weight: 400; line-height: 1.5rem; margin: 0; overflow: hidden; padding: 1rem 0; position: relative; text-align: left; text-overflow: ellipsis; transition-duration: .1s; transition-property: background-color, color, opacity; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); white-space: nowrap; width: 100%; } ul.p-navigation__links .p-navigation__link { color: #ffffff; font-weight: 300; text-align: center; text-decoration: none; } ul.p-navigation__links .p-navigation__link:hover { background-color: #2b2b2b; } ul.p-navigation__links .p-dropdown__link:hover { background-color: var(--color-sidebar-item-background--hover); } ul.p-navigation__links .p-navigation__sub-link { background: var(--color-background-primary); padding: .5rem 0 .5rem .5rem; font-weight: 300; } ul.p-navigation__links .more-links-dropdown li a { border-left: 1px solid var(--color-sidebar-background-border); border-right: 1px solid var(--color-sidebar-background-border); } ul.p-navigation__links .more-links-dropdown li:first-child a { border-top: 1px solid var(--color-sidebar-background-border); } ul.p-navigation__links .more-links-dropdown li:last-child a { border-bottom: 1px solid var(--color-sidebar-background-border); } ul.p-navigation__links .p-navigation__logo { padding: 0.5rem; } ul.p-navigation__links .p-navigation__logo img { width: 40px; } ul.more-links-dropdown { display: none; overflow-x: visible; height: 0; z-index: 55; padding: 0; position: relative; list-style: none; margin-bottom: 0; margin-top: 0; } .nav-more-links::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23111' d='M8.187 11.748l6.187-6.187-1.06-1.061-5.127 5.127L3.061 4.5 2 5.561z'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: contain; content: ""; display: block; filter: invert(100%); height: 1rem; pointer-events: none; position: absolute; right: 1rem; text-indent: calc(100% + 10rem); top: calc(1rem + 0.25rem); width: 1rem; } .nav-ubuntu-com { display: none; } @media only screen and (min-width: 480px) { ul.p-navigation__links li { width: 100%; } .nav-ubuntu-com { display: inherit; } } @media only screen and (max-width: 800px) { .nav-more-links { margin-left: auto !important; padding-right: 2rem !important; width: 8rem !important; } } @media only screen and (min-width: 800px) { ul.p-navigation__links li { width: 100% !important; } } @media only screen and (min-width: 1310px) { ul.p-navigation__links { margin-left: calc(50% - 41em); } }