Cannot remove margin between very top and navbar #817
|
Hey guys, I'm a beginner in frontend development. I want that my navbar has 0 margin to the top, but there is some. Also it doesn't span the full width. Even though I set width to 100 in both elements. In my wrapping container I have margin 0, as well as in the navbar. How do I control this distance between the top and the navbar?
|
Replies: 1 comment 9 replies
|
Hi @yvesbou please check the For the gap at the top, check if it's caused by the parent element 🤔 Here's an example: codesandbox.io/s/nextui-discussion-817-fmp0sk |
|
The <Navbar
isCompact
isBordered
variant="static"
maxWidth="fluid" // add here
style={{
boxSizing: "border-box",
margin: 0,
// maxWidth: 'fluid', // remove
color: theme?.colors.secondary.value,
fontSize: theme?.fontSizes.md.value,
fontWeight: theme?.fontWeights.hairline.value
}}
> |
|
well thanks for your quick answer and help, but I cannot make this work better this is everything I have (I think the content inside _app.tsx and _document.tsx doesn't matter right?) and still small space to the left and to the right remain <div>
<Head>
<title>NextUI | Create Next App</title>
<meta
name="description"
content="Generated by create next app and using NextUI as a react UI library"
/>
<link rel="icon" href="/favicon.ico" />
</Head>
<Container
fluid
responsive={false}
as="main"
display="flex"
direction="column"
justify="flex-start"
alignItems="center"
style={{ height: '100vh', margin: 0, width: '100vw'}}
css={{background: '#16181A'}}
>
<Navbar isCompact disableBlur maxWidth="fluid" variant="static" style={{boxSizing: "border-box", margin: 0, color: 'white',
fontSize: theme?.fontSizes.md.value, fontWeight: theme?.fontWeights.hairline.value
}} containerCss={{backgroundColor: 'black'}}>
<Navbar.Brand>
<Text b color="inherit" hideIn="xs" css={{font: theme?.fonts.sans, fontSize: theme?.fontSizes['4xl'].value, fontWeight: theme?.fontWeights.black.value}}>
CryptoDevs
</Text>
</Navbar.Brand>
<Navbar.Content hideIn="xs" variant="highlight-rounded">
<Navbar.Link isActive href="#">Whitelist</Navbar.Link>
<Navbar.Link href="#">NFT Drop</Navbar.Link>
<Navbar.Link href="#">Smart Contracts</Navbar.Link>
</Navbar.Content>
<Navbar.Content>
<Navbar.Item>
<ConnectButton/>
</Navbar.Item>
</Navbar.Content>
</Navbar>
</Container>
</div> |
|
do you have a repo @tianenpang where I can see a customised functioning navbar? |
|
The By the way, I might not explained well above, the reason why it doesn't work in |
|
oh yeah the padding in the container did it! thanks a lot 👍 |
Hi @yvesbou please check the
maxWidthprop in theNavbardocs, when settingmaxWidthtofluidthe navbar will fill up the width of the screen.For the gap at the top, check if it's caused by the parent element 🤔
Here's an example: codesandbox.io/s/nextui-discussion-817-fmp0sk