I am using Chakra-UI to create a UI for my NextJS project, and am struggling to get the navbar working correctly. It is fixed correctly as well as the mobile nav menu but the menu sits in front of the background div, but behind the hero div (with Flex' ponent with the setting blackAlpha)
How can I make the menu sit only at the front? using bog standard CSS i just use the z-index if I have problems like this but it hasn't been working for me. Any help appreciated
HomePage.js
import React from 'react';
import Hero from './Hero/Hero';
import Header from './Header/Header';
import Features from './Features/Features';
const HomePage = () => {
return (
<>
<Header/>
<Hero/>
<Features/>
</>
);
}
export default HomePage
my Header.js (with fluff removed)
const Header = () => {
return (
// Header/TopNav Container
<chakra.header
ref={ref}
shadow={y > height ? "sm" : undefined}
transition="box-shadow 0.2s"
bg={bg}
borderTop="6px solid"
borderTopColor="brand.400"
w="full"
overflowY="hidden"
borderBottomWidth={2}
borderBottomColor={useColorModeValue("gray.200", "gray.900")}
position="fixed"
top={0}
>
<chakra.div h="4.5rem" mx="auto" maxW="1200px" >
{DesktopNavContent}
{MobileNavContent}
</chakra.div>
</chakra.header>
);
}
my Hero.js
const Hero = () => {
const bg = useColorModeValue("white", "gray.800");
return(
<Box
w="full"
h="container.md"
backgroundImage="url(.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)"
bgPos="center"
bgSize="cover"
>
<Flex
align="center"
pos="relative"
justify="center"
boxSize="full"
bg="blackAlpha.700"
>
<Stack textAlign="center" alignItems="center" spacing={6}>
<Heading
fontSize={["3xl", , "4xl"]}
fontWeight="semibold"
color="white"
>
Pay once, store forever....</Heading>
<Heading
fontSize={["3xl", , "4xl"]}
fontWeight="semibold"
color="blue.400"
textTransform="uppercase"
>
ARk Permanent Storage
</Heading>
<Button
colorScheme="brand"
textTransform="uppercase"
w="fit-content"
class="px-4 py-2 mt-4 text-sm font-medium text-white uppercase transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-500"
>
Start project
</Button>
</Stack>
</Flex>
</Box>
)
}
I am using Chakra-UI to create a UI for my NextJS project, and am struggling to get the navbar working correctly. It is fixed correctly as well as the mobile nav menu but the menu sits in front of the background div, but behind the hero div (with Flex' ponent with the setting blackAlpha)
How can I make the menu sit only at the front? using bog standard CSS i just use the z-index if I have problems like this but it hasn't been working for me. Any help appreciated
HomePage.js
import React from 'react';
import Hero from './Hero/Hero';
import Header from './Header/Header';
import Features from './Features/Features';
const HomePage = () => {
return (
<>
<Header/>
<Hero/>
<Features/>
</>
);
}
export default HomePage
my Header.js (with fluff removed)
const Header = () => {
return (
// Header/TopNav Container
<chakra.header
ref={ref}
shadow={y > height ? "sm" : undefined}
transition="box-shadow 0.2s"
bg={bg}
borderTop="6px solid"
borderTopColor="brand.400"
w="full"
overflowY="hidden"
borderBottomWidth={2}
borderBottomColor={useColorModeValue("gray.200", "gray.900")}
position="fixed"
top={0}
>
<chakra.div h="4.5rem" mx="auto" maxW="1200px" >
{DesktopNavContent}
{MobileNavContent}
</chakra.div>
</chakra.header>
);
}
my Hero.js
const Hero = () => {
const bg = useColorModeValue("white", "gray.800");
return(
<Box
w="full"
h="container.md"
backgroundImage="url(https://images.unsplash./photo-1504384308090-c894fdcc538d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)"
bgPos="center"
bgSize="cover"
>
<Flex
align="center"
pos="relative"
justify="center"
boxSize="full"
bg="blackAlpha.700"
>
<Stack textAlign="center" alignItems="center" spacing={6}>
<Heading
fontSize={["3xl", , "4xl"]}
fontWeight="semibold"
color="white"
>
Pay once, store forever....</Heading>
<Heading
fontSize={["3xl", , "4xl"]}
fontWeight="semibold"
color="blue.400"
textTransform="uppercase"
>
ARk Permanent Storage
</Heading>
<Button
colorScheme="brand"
textTransform="uppercase"
w="fit-content"
class="px-4 py-2 mt-4 text-sm font-medium text-white uppercase transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-500"
>
Start project
</Button>
</Stack>
</Flex>
</Box>
)
}
Share
Improve this question
asked Jan 7, 2022 at 19:26
HubertBluHubertBlu
8292 gold badges9 silver badges27 bronze badges
2 Answers
Reset to default 8Managed to do it by adding position:'static' to the problematic Flex as shown.
<Flex
align="center"
pos="relative"
justify="center"
boxSize="full"
bg="blackAlpha.700"
position="static"
>
<Flex as={'header'}>
{content}
</Flex>