diff --git a/src/components/Publish/Navigation/index.module.css b/src/components/Publish/Navigation/index.module.css index 10ba16333..b43200c91 100644 --- a/src/components/Publish/Navigation/index.module.css +++ b/src/components/Publish/Navigation/index.module.css @@ -1,10 +1,11 @@ .navigation { margin: -1.3rem calc(var(--spacer) / -1.5) var(--spacer) calc(var(--spacer) / -1.5); - padding: calc(var(--spacer) / 2) 0; scrollbar-width: none; border-bottom: 1px solid var(--border-color); background-color: var(--background-highlight); + overflow-x: auto; + -webkit-overflow-scrolling: touch; } @media (min-width: 40rem) { @@ -15,26 +16,29 @@ } } -@media (min-width: 60rem) { - .navigation { - padding: var(--spacer) 0; - margin-left: calc(var(--spacer) * -4); - margin-right: calc(var(--spacer) * -4); - } -} - .navigation ol { white-space: nowrap; text-align: center; width: 100%; - padding: 0; + padding: calc(var(--spacer) / 2) 0; margin: 0; counter-reset: list-number; - overflow-x: auto; + overflow-x: visible; overflow-y: hidden; -webkit-overflow-scrolling: touch; } +@media (min-width: 60rem) { + .navigation { + margin-left: calc(var(--spacer) * -4); + margin-right: calc(var(--spacer) * -4); + } + + .navigation ol { + padding: var(--spacer) 0; + } +} + .navigation li { cursor: pointer; display: inline-block;