diff --git a/src/layout/header.tsx b/src/layout/header.tsx index 690cc84..8b1599b 100644 --- a/src/layout/header.tsx +++ b/src/layout/header.tsx @@ -173,30 +173,60 @@ export const Header = () => {
- - Games - - - Mods - - - About - - - Blog - +
+
+ + Games + + + Mods + + + About + + + Blog + +
+
+ + + + + + + + + + + + + +
diff --git a/src/styles/nav.module.scss b/src/styles/nav.module.scss index 7ef7c01..93baeef 100644 --- a/src/styles/nav.module.scss +++ b/src/styles/nav.module.scss @@ -245,32 +245,80 @@ } .NavMainBottomInside { - width: 100%; - display: flex; - flex-direction: row; - grid-gap: 10px; - justify-content: center; - align-items: center; - padding: 10px; - white-space: nowrap; - overflow-x: auto; + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-gap: 10px; + justify-content: center; + align-items: center; + padding: 10px; + white-space: nowrap; + overflow-x: auto; - .NavMainBottomInsideLink { + .NavMainBottomInsideLink { + transition: ease 0.4s; + 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; - 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; + } +} + + .NavMainBottomInsideOther { + display: flex; + flex-direction: row; + grid-gap: 10px; + height: 100%; + justify-content: end; + + .NavMainBottomInsideOtherLink { + transition: ease 0.4s; + width: 35px; + display: flex; + 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 { + display: flex; + justify-content: start; + + @media (max-width: 768px) { + display: none; + } + } + + .NavMainBottomInsideOtherRight { + display: flex; + justify-content: end; + } + } }