diff --git a/packages/design-system/src/theme/index.ts b/packages/design-system/src/theme/index.ts index 1bedc9ca5..01a61f193 100644 --- a/packages/design-system/src/theme/index.ts +++ b/packages/design-system/src/theme/index.ts @@ -169,7 +169,7 @@ export const theme = extendTheme( base: '0em', sm: '30em', md: '48em', - lg: '62em', + lg: '71.5em', xl: '80em', '2xl': '96em', '3xl': '120em', diff --git a/packages/web/components/MegaMenu/DesktopNavLinks.tsx b/packages/web/components/MegaMenu/DesktopNavLinks.tsx index ebc77abbd..60b462df8 100644 --- a/packages/web/components/MegaMenu/DesktopNavLinks.tsx +++ b/packages/web/components/MegaMenu/DesktopNavLinks.tsx @@ -35,10 +35,10 @@ export const DesktopNavLinks: React.FC = (props) => ( variant="link" minW="fit-content" color="white" - fontSize="lg" + fontSize={{ lg: 'm', xl: 'lg' }} fontWeight={700} textTransform="uppercase" - mx={6} + mx={{ lg: 3, xl: 6 }} _expanded={{ color: 'cyan.300' }} _focus={{ outline: 'none', border: 'none' }} rightIcon={ @@ -112,7 +112,6 @@ export const DesktopNavLinks: React.FC = (props) => ( target={section.type === 'external-link' ? '_blank' : ''} w="full" h="full" - p={4} alignItems="center" _focus={{ outline: 'none' }} > @@ -123,10 +122,10 @@ export const DesktopNavLinks: React.FC = (props) => ( color={ section.type === 'external-link' ? '#79F8FB' : 'white' } - fontSize="lg" + fontSize={{ lg: 'm', xl: 'lg' }} fontWeight={700} textTransform="uppercase" - mx={6} + mx={{ lg: 3, xl: 6 }} _expanded={{ color: 'cyan.300' }} _focus={{ outline: 'none', border: 'none' }} rightIcon={ diff --git a/packages/web/components/MegaMenu/MegaMenuHeader.tsx b/packages/web/components/MegaMenu/MegaMenuHeader.tsx index 29a0e573d..8365371de 100644 --- a/packages/web/components/MegaMenu/MegaMenuHeader.tsx +++ b/packages/web/components/MegaMenu/MegaMenuHeader.tsx @@ -107,6 +107,7 @@ export const MegaMenuHeader: React.FC = () => { justify="center" align="center" pos="relative" + display={{ base: 'none', sm: 'none', md: 'none', lg: 'flex' }} >