HOW can you change background colour Navbar

[shanewmurphy]

UTTER frustration to do the simplest of tasks like changing a color!!!!

Trying to change the background for Navbar component

<Navbar
hideIn="xs"
auto
css={{
background: "$green",
color: "$white",
weight: "bold",
height: "$20",
borderRadius: "$1",
}}
>

Background is NOT being applied!

[Xariwey]

by default the navbar use the colors from the theme u could create a custom theme and define there a colors.background for ur entire theme

now
as far as i can tell there are 2 background in the navbar
1 is the one thats is displayed normally -> acces by css
2 is when the collapse menu is oppened -> acces by containerCss

keep in mind that the 1st one is affected by the blur effect that affect the color thats been displayed

      <Navbar
        css={{
          bg: "$blue600"
        }}
        containerCss={{
          bg: "$blue600"
        }}
      >

or play with these props to see where u find a combination that suits ur needs

      <Navbar
        disableBlur={true}
        css={{
            bg: "$blue600"
        }}
        containerCss={{
          bg: "$blue600"
          bgBlur: "none"
        }}
      >

also u could go and open a bug report

[jrgarciadev]

Hey @shanewmurphy my apologies, the project is still in BETA version, we are working on creating a better DX regarding directly custom styles changes but it is not an easy task, as @Xariwey mentioned NextUI currently aims to work correctly with the theme colour palette, here's the scale, on the other hand, the navbar doesn't have a "color" prop yet (we hope to add it soon) but here's an example with custom colours https://codesandbox.io/s/sandpack-project-forked-5ceumh?file=/App.js:554-577

I hope it helps you 🙌🏻

[armatrix]

sometimes we need a 'transparent nav bar'

[Alanm63]

Hi .. I ended up here due to trying to change the background color of the NavBar. At the beginning it was quite frustrating (I have been using Semantic-UI for the past years with React). Since the original post here, a new version of NextUI is out and there is, rightly enough, a prop --- .color where you can set a color. It sort of works out of the box but not quite or at least not on its own.
I made a custom theme--as per the documentation-- where I set my primary color to a hex value. When I applied this to a button -- <Button color='primary'...-- I got the result I wanted. However when I tried it with NavBar -- <Navbar color='primary'...-- the result was not quite the color I wanted. It was a few shades away from the original color. After a bit of frustration and using the chrome dev tools I nailed it down to this css class
.bg-background/70 {
background-color: hsl(var(--nextui-background) / 0.7);
}
I'm new to NextUI but I could not find any way to change the 0.7 or remove the class at all through props etc, In the end, to make it work ,I made a css module file that would overwrite the style.
.bg-background/70 {
background-color: hsl(var(--nextui-background) / 1);
}
This worked, I got the exact color of the hex-decimal... but the story doesn't end here...
I thought this was a very "hacky" solution... so I read through the docs again and got curious on the prop isBlurred which for the NavBar is true by default!
Setting this prop to false fixed the issue... it results in
.bg-background {
--tw-bg-opacity: 1;
background-color: hsl(var(--nextui-background) / var(--nextui-background-opacity, var(--tw-bg-opacity)));
}
So, if you want your NavBar to reflect an exact color you need both of these settings ...
<Navbar color='primary' isBlurred='false'....(color can be a name i.e red or hex value or a variable from your Theme i.e 'primary')

I learn't this by the long route so I hope this will help anyone who didn't catch how this component works the first time around. :)

[jrgarciadev]

Hey @Alanm63 are you using v2 or v1?

[Alanm63]

"@nextui-org/react": "^2.1.13",

[shanewmurphy]

I don’t use NextUI anymore, use tailwind & headless UI

…

On 20 Oct 2022, at 22:18, Xariwey ***@***.***> wrote: by default the navbar use the colors from the theme u could create a custom theme and define there a colors.background for ur entire theme now as far as i can tell there are 2 background in the navbar 1 is the one thats is displayed normally -> acces by css 2 is when the collapse menu is oppened -> acces by containerCss keep in mind that the 1st one is affected by the blur effect that affect the color thats been displayed <Navbar css={{ bg: "$blue600" }} containerCss={{ bg: "$blue600" }} > or play with these props to see where u find a combination that suits ur needs <Navbar disableBlur={true} css={{ bg: "$blue600" }} containerCss={{ bg: "$blue600" bgBlur: "none" }} > also u could go and open a bug report — Reply to this email directly, view it on GitHub <#835 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA4GAG5UHRTQKL6BEQXMOFDWEGZK5ANCNFSM6AAAAAARKNAAFI>. You are receiving this because you authored the thread.

[Alanm63]

I almost went that direction this morning... but I want to get NextJS working "..like it says on the box"

[jrgarciadev]

@Alanm63 NextUI components have a button called Styles source which leads you to the component styles definitions, you can override any default tailwindcss class.

For navbar:

To change the slots class names you need to use the classNames property, e.g:

https://codesandbox.io/p/sandbox/sharp-pine-4gmqpz?file=%2FApp.jsx%3A1%2C1&utm_medium=sandpack

The V2 API is designed to be as easy as possible to modify the styles.

import React from "react";
import { Navbar } from "@nextui-org/react";

export default function App() {
  return (
    <Navbar
      classNames={{
        base: "bg-primary/20 shadow-lg",
      }}
    >
     ...
    </Navbar>
  );
}

[Alanm63]

Thank you for this... I do like the look and feel of the results of this framework.. so still determined to get my head around it. :)

[jrgarciadev]

You're welcome, I'll try to write some guides to help devs know how to use NextUI