Override style attribute in NextUI NavBar component

Question

Problem

I cannot modify the style="--navbar-height: 4rem;" attribute on my NextUI Navbar component in my Remix app, which is breaking my setup. Although this is my first encounter with this, i'm sure lots of components have these attributes so i need to know how to target and override these for both this and future issues.

Details

I have an extremely simple Remix / NextUI app ive just setup following the official documentation. I'm trying to add a brand / logo component to it, but since its a larger SVG it gets pushed higher than the top of the screen. I was unable to change this no matter what i set the height / width / justify / viewbox / clear / etc / className prop overrides to on both the <svg> and <Navbar> components. After some time i discovered that the <nav> tag generated by NextUI has a style attribute with a double dash before it, that i seem to be unable to target with anything i try. This is the exact element i see when i inspect the HTML:

<nav 
class="flex z-40 w-full h-auto items-center justify-center data-[menu-open=true]:border-none sticky top-0 inset-x-0 backdrop-blur-lg data-[menu-open=true]:backdrop-blur-xl backdrop-saturate-150 bg-background/70 shadow-lg"
style="--navbar-height: 4rem;">
</nav>

The closest i've come to altering this is by using an inline style in my component, which solved the issue of the logo being pushed off the top of the screen but when hovering i can see that the child elements inherit the 4rem height and so feel that this will break other components as i add them.

I've omitted most the code but as mentioned its a bare bones Remix / NextUI setup so assume everything is normal per the installation guides found on the respective websites of these libraries, but this is my Navbar and SVG component

<Navbar style={{ height: 200 }}>
    <NavbarBrand>
        <svg ...PATH STUFF></svg>
    </NavbarBrand>
</Navbar>

If i remove the height style it breaks. I cannot add a style for the double dash, ive tried a few different ways based on google searching:

// Component file
style={{ navbar-height: 200 }}>
style={{ navbarHeight: 200 }}>
style={{ $$navbar-height: 200 }}>
style={{ $$navbarHeight: 200 }}>

// tailwind.css file
:root {
  --navbar-height: 200px !important;
}
:root {
  --navbar-height: 200px;
}

Also, even if i can get it to be overridden with custom CSS in the tailwind css file, i feel like that isn't a good solution since i would want different sizes based on the device width like mobile vs computer, so although id like to know how to target it based on that it would only be a starting point and ultimately would like to know how to fix this dynamically from the component or prop itself.

I can see in the source code that this is set by some dynamic height variable, but im unfamiliar and haven't been able to trace that back effectively

Nick · Accepted Answer · 2024-12-04 02:33:42Z

0

Turns out if you add a simple height prop to the component it will load it in as the --navbar-height attribute:

<Navbar height={200}>
    <NavbarBrand>
        <svg ...PATH STUFF></svg>
    </NavbarBrand>
</Navbar>

This set the element up like so:

<nav 
class="flex z-40 w-full h-auto items-center justify-center data-[menu-open=true]:border-none sticky top-0 inset-x-0 backdrop-blur-lg data-[menu-open=true]:backdrop-blur-xl backdrop-saturate-150 bg-background/70 shadow-lg"
style="--navbar-height: 200px;">
</nav>

You can see that it accepts that prop in the source code here

answered Dec 4, 2024 at 2:33

Nick

5261 gold badge6 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Override style attribute in NextUI NavBar component

Problem

Details

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Problem

Details

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related