diff --git a/src/styles/nav.module.scss b/src/styles/nav.module.scss index c73db1d..43834f5 100644 --- a/src/styles/nav.module.scss +++ b/src/styles/nav.module.scss @@ -255,27 +255,76 @@ white-space: nowrap; overflow-x: auto; - .NavMainBottomInsideLink { - transition: ease 0.4s; - text-decoration: unset; - color: rgba(255, 255, 255, 0.5); - font-weight: bold; - padding: 5px 15px; - - &:hover { + .NavMainBottomInsideLinks { + display: flex; + flex-direction: row; + grid-gap: 10px; + justify-content: center; + align-items: center; + + .NavMainBottomInsideLink { transition: ease 0.4s; - color: rgba(255, 255, 255, 0.85); text-decoration: unset; + color: rgba(255, 255, 255, 0.5); + font-weight: bold; + padding: 5px 15px; + + &:hover { + transition: ease 0.4s; + color: rgba(255, 255, 255, 0.85); + text-decoration: unset; + } + + &.NMBILActive { + color: rgba(255, 255, 255, 0.65); + } } - &.NMBILActive { - color: rgba(255, 255, 255, 0.65); - } + @media (max-width: 768px) { + display: flex; + justify-content: start; + } } - @media (max-width: 768px) { + .NavMainBottomInsideOther { + display: flex; + lex-direction: row; + grid-gap: 10px; + height: 100%; + justify-content: end; + + .NavMainBottomInsideOtherLink { + transition: ease 0.4s; + width: 35px; display: flex; - justify-content: start; + flex-direction: column; + justify-content: center; + align-items: center; + height: 35px; + color: white; + opacity: 0.65; + border-radius: 5px; + background: rgba(255,255,255,0); + + &:hover { + transition: ease 0.4s; + color: white; + opacity: 0.85; + background: rgba(255,255,255,0.1); } + } + + .NavMainBottomInsideOtherLeft { + + @media (max-width: 768px) { + display: none; + } + + } + + .NavMainBottomInsideOtherRight { + + } + } } }