change background color of NextUI navbar

Question

I've been struggling to change the background color of the NextUI navbar. I'm using NextUI's navbar component in my react js project. I suppose there is some property / attribute for that but even after researching quite a lot, I'm not aware of it. Please help me.

import { Navbar, Input } from "@nextui-org/react";
import { SearchIcon } from "./SearchIcon.js";
import './Header.css'

function Header() {
  
  return (
 
      <Navbar isBordered variant="sticky">
        <Navbar.Brand css={{ mr: "$4" }}>
        <h5>ABC</h5>
        </Navbar.Brand>
        <Navbar.Content
          css={{
            "@xsMax": {
              w: "70%",
              jc: "space-between",
            },
          }}
        >
          <Navbar.Item
            css={{
              "@xsMax": {
                w: "100%",
                jc: "right",
              },
            }}
          >
            <Input
              clearable
              contentLeft={
                <SearchIcon fill="var(--nextui-colors-accents6)" size={16} />
              }
              contentLeftStyling={false}
              css={{
                w: "100%",
                "@xsMax": {
                  mw: "300px",
                },
                "& .nextui-input-content--left": {
                  h: "100%",
                  ml: "$4",
                  dflex: "center",
                },
              }}
              placeholder="Search"
            />
          </Navbar.Item>
        </Navbar.Content>
      </Navbar>
 
  );
}

export default Header;

score 4 · Answer 1 · answered Oct 18 '22 at 07:40

Background color and background blur color are applied in the div with class nextui-navbar-container, which, as I understood, appears there automatically and you can't affect it directly as an component. But you can override css class nextui-navbar-container, or you can use css variables --nextui--navbarBackgroundColor and --nextui--navbarBlurBackgroundColor in the css property of Navbar component like this:

<Navbar css={{
  $$navbarBackgroundColor: "transparent",
  $$navbarBlurBackgroundColor: "transparent"
}}>

change background color of NextUI navbar

1 Answers1