diff --git a/client/components/navigation/MainNav/MainNav.module.scss b/client/components/navigation/MainNav/MainNav.module.scss index 3fdb5236..9f19915b 100644 --- a/client/components/navigation/MainNav/MainNav.module.scss +++ b/client/components/navigation/MainNav/MainNav.module.scss @@ -98,3 +98,39 @@ button.exit_button { line-height: 20px; } } + +.marquee { + &_container { + display: flex; + justify-content: center; + align-items: center; + padding: 15px; + @include mobile-down { + padding: 20px; + } + } + + & section { + @include mobile-down { + display: inline-block; + padding-left: 100%; + animation: marquee 20s linear infinite; + } + } + + @include mobile-down { + white-space: nowrap; + overflow: hidden; + position: absolute; + width: 100vw; + } +} + +@keyframes marquee { + 0% { + transform: translate(0, 0); + } + 100% { + transform: translate(-100%, 0); + } +} diff --git a/client/components/navigation/MainNav/MainNav.tsx b/client/components/navigation/MainNav/MainNav.tsx index 4787408b..24f82576 100644 --- a/client/components/navigation/MainNav/MainNav.tsx +++ b/client/components/navigation/MainNav/MainNav.tsx @@ -104,7 +104,33 @@ const MainNav = ({ */ return (