最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How can I make my sticky navbar stay at the front in Chakra-UI - Stack Overflow

programmeradmin2浏览0评论

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
Add a ment  | 

2 Answers 2

Reset to default 8

Managed 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>
发布评论

评论列表(0)

  1. 暂无评论