Filament•6mo ago

Changing Navbar Color

I have changed the navbar color according to the documentation https://filamentphp.com/docs/3.x/support/style-customization but my problem is by default the navigation label are gray so i changed to white as shown on my screenshot but when i do that when the navigation button is active the text is still white. How can i target the active navigation item. I looked through the dev tool but cannot target the active item

Style customization - Core Concepts - Filament

8 Replies

LeandroFerreira•6mo ago

.fi-sidebar-item-active .fi-sidebar-item-label {
    @apply  text-gray-700;
}

.fi-sidebar-item-active .fi-sidebar-item-label {
    @apply  text-gray-700;
}

BloomOP•6mo ago

That works fine,. Can you help me change the font color when hover as well

.fi-sidebar-item .fi-sidebar-item-button{
    @apply hover:text-primary-900
}

.fi-sidebar-item .fi-sidebar-item-button{
    @apply hover:text-primary-900
}

LeandroFerreira•6mo ago

.fi-sidebar-item-button:hover ? it should be class:hover

BloomOP•6mo ago

When i make hover on item-label it works

.fi-sidebar-item-label
{
    @apply hover:text-primary-900
}

.fi-sidebar-item-label
{
    @apply hover:text-primary-900
}

.fi-sidebar-item-button:hover{
    @apply text-primary-900
}

.fi-sidebar-item-button:hover{
    @apply text-primary-900
}

Not working...

LeandroFerreira•6mo ago

hum.. maybe @apply !text-primary-900 or hover:!text-primary-900 ?

BloomOP•6mo ago

Still no change with .fi-sidebar-item-button

.fi .fi-sidebar
{
    background-color: #27374D;
}

.fi-sidebar-item-active .fi-sidebar-item-label {
    @apply text-primary-900;
}

.fi-sidebar-item-label {
    @apply text-white
}

.fi-sidebar-item-label:hover {
    @apply text-primary-900;
}

.fi .fi-sidebar
{
    background-color: #27374D;
}

.fi-sidebar-item-active .fi-sidebar-item-label {
    @apply text-primary-900;
}

.fi-sidebar-item-label {
    @apply text-white
}

.fi-sidebar-item-label:hover {
    @apply text-primary-900;
}

when i target label instead of button i can achieve almost similar to what i want but text color only changed when i hover that text area only Customization is so weird

Dennis Koch•6mo ago

Just open the devtools and see where your rules apply or why they aren't applying/which rules are overwriting your rules.

BloomOP•6mo ago

.fi-sidebar-item .fi-sidebar-item-button .fi-sidebar-item-label  {
    @apply text-white
}

.fi-sidebar-item .fi-sidebar-item-button:hover .fi-sidebar-item-label {
    @apply text-primary-900;
}

.fi-sidebar-item-active .fi-sidebar-item-label {
    @apply text-primary-900 !important;
}

.fi-sidebar-item .fi-sidebar-item-button .fi-sidebar-item-label  {
    @apply text-white
}

.fi-sidebar-item .fi-sidebar-item-button:hover .fi-sidebar-item-label {
    @apply text-primary-900;
}

.fi-sidebar-item-active .fi-sidebar-item-label {
    @apply text-primary-900 !important;
}

Yes some rules were overlapping i guess, i can finally fix it Thanks for yor response

Gaming

Programming

Changing Navbar Color