Filament•15mo ago

How to change top navigation width

I want to change top navigation width like 'max-w-7xl' something, I think I can change using ->extraAttributes() but where exactly should I need to put this code?

22 Replies

Lara Zeus•15mo ago

use css insted

.fi-topbar nav{
@ apply ...
}

.fi-topbar nav{
@ apply ...
}

VpOP•15mo ago

@larazeus sorry to tag you here, I think my custom css is working, but for some reason @apply doesn't work. Below is my code

.fi-topbar nav{
    @apply max-w-7xl mx-auto !important;
}

.fi-topbar nav{
    @apply max-w-7xl mx-auto !important;
}

And this is how I register

FilamentAsset::register([
    Css::make('main', asset('css/main.css')),
]);

FilamentAsset::register([
    Css::make('main', asset('css/main.css')),
]);

What should be the problem?

Lara Zeus•15mo ago

np.. is the file css/main.css loaded (no console errors or build error?!) if you did for testing

body{
    @apply !bg-red-500
}

body{
    @apply !bg-red-500
}

Does it work?

VpOP•15mo ago

I don't have any error, but the main.css file is not loaded

Lara Zeus•15mo ago

so thats mean filament didnt load the file where is this code?

FilamentAsset::register([
    Css::make('main', asset('css/main.css')),
]);

FilamentAsset::register([
    Css::make('main', asset('css/main.css')),
]);

VpOP•15mo ago

I put inside AppServiceProvider, boot()

Lara Zeus•15mo ago

it should be working try adding it to the panel Provider before return $panel also it's better if you register a theme

VpOP•15mo ago

If I put like below then it's working

body{
    background-color: red !important;
}

body{
    background-color: red !important;
}

I am searching for this one

Lara Zeus•15mo ago

oh then maybe you dont have tailwind clasess in the main.css file?

VpOP•15mo ago

wdym?

Lara Zeus•15mo ago

@tailwind base; @tailwind components; @tailwind utilities; in main.css

VpOP•15mo ago

Yes, I don't have these, but I've added but no luck

Lara Zeus•15mo ago

no build errors after adding them?

VpOP•15mo ago

No error, I run npm run dev, I put my main.css inside public/css/ do I need to put inside resources/css?

Lara Zeus•15mo ago

yes you create the file in resources/css only after running npm run dev it will be generated in the public/css are you using vite?

VpOP•15mo ago

yes, i'll change the path and let you know Now I got console error "GET http://localhost:8000/css/app/main.css?v=3.0.54.0 net::ERR_ABORTED 404 (Not Found)", what I change 1. create css in resources/css/main.css 2. register like below

FilamentAsset::register([
    Css::make('main', __DIR__.'/../../resources/css/main.css'),
]);

FilamentAsset::register([
    Css::make('main', __DIR__.'/../../resources/css/main.css'),
]);

3. run npm run dev and build also..

Lara Zeus•15mo ago

no keep the register as it was assets()...

VpOP•15mo ago

404 again, it looks like npm run dev or build didn't build to public/css/main.css

Lara Zeus•15mo ago

oh then check your vite.config.js add the main.css to input array

VpOP•15mo ago

I did, and nothing change, after i run build I got

public/build/manifest.json               0.39 kB │ gzip:  0.16 kB
public/build/assets/app-b07fcaed.css   103.53 kB │ gzip: 14.77 kB
public/build/assets/main-e009689b.css  103.73 kB │ gzip: 14.80 kB
public/build/assets/app-4ed993c7.js      0.00 kB │ gzip:  0.02 kB

public/build/manifest.json               0.39 kB │ gzip:  0.16 kB
public/build/assets/app-b07fcaed.css   103.53 kB │ gzip: 14.77 kB
public/build/assets/main-e009689b.css  103.73 kB │ gzip: 14.80 kB
public/build/assets/app-4ed993c7.js      0.00 kB │ gzip:  0.02 kB

but still not reflecting in my website..

Lara Zeus•15mo ago

not sure what could be the issue... I recommend adding a theme at this point and remove FilamentAsset::register https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme you already have way there 🙂

Themes - Panel Builder - Filament

VpOP•15mo ago

Yes, now working perfect.. I should've read this... thank you so much for your help

Gaming

Programming

How to change top navigation width