Navigation background color
I see the left side navigation bg color is same as main content , I would like to change the bg color and add box shadow. I can do with css but I am suppose to find any method or customization area I can be use it for ?
3 Replies
No method for this. You need a theme and CSS
you will need to use the filament custom theme command
Read the section Creating a custom theme
https://filamentphp.com/docs/3.x/panels/themes
Then you can do it like this
.fi-topbar :is(nav) {
background-color: #005CA8 !important;
}
.fi-sidebar .fi-sidebar-header {
background-color: #005CA8 !important;
}
.fi-sidebar .fi-dropdown-header-label {
background-color: white !important;
}
.fi-topbar-item-label, .fi-topbar-item-icon {
color: white;
}
.fi-topbar-item-active .fi-topbar-item-label, .fi-topbar-item-active .fi-topbar-item-icon {
color: #005CA8;
}
.fi-topbar-item-button:hover .fi-topbar-item-label, .fi-topbar-item-button:hover .fi-topbar-item-icon {
color: #005CA8 !important;
}
.fi-simple-layout {
background-color: #005CA8 !important;
}
.fi-sidebar {
background-color: #eaeaeb !important;
}
.fi-logo {
color: white;
}
thank you.