Nova Fixed Bars Laravel Package

Getting Started

This is a very small package: it registers a stylesheet (and possibly a tiny bit of JS) with Nova that flips the sidebar and header bar from static/absolute positioning to position: fixed. There is no database, no migrations, no Vue components to reason about. That framing matters — you should evaluate it as "a published CSS file with a config toggle," not as an application dependency.

Install and publish:

composer require cloudcake/nova-fixed-bars
php artisan vendor:publish --provider="Cloudcake\NovaFixedBars\FixedBarsServiceProvider"

The service provider hooks into Nova's asset pipeline (Nova::style(...) / Nova::script(...) in boot()), so there is nothing to add to app/Providers/NovaServiceProvider.php — installing the package is the entire integration.

Where to look first:

1. config/nova-fixed-bars.php — the published config. This is the only surface you will touch day to day; it exposes booleans for enabling the fixed sidebar and/or the fixed header independently.
2. The package's src/ service provider — read it once (it is short) to confirm which CSS file is injected and under what conditions, so you know what to override.
3. Your browser's DevTools, on position for .sidebar and .header / .header-inner — confirm the stylesheet is actually loaded before you debug anything else.

First use case: a Resource index with 50+ rows or a detail page with a long form, on a 27" monitor. The default Nova header scrolls away, so the search box, "Create" button, and user menu disappear the moment you start reading. Fixed bars keep global navigation and filters reachable. Enable the header first; the sidebar is a bigger visual change and is usually only worth it for teams that live in Nova all day.

// config/nova-fixed-bars.php
return [
    'sidebar' => true,
    'header'  => true,
];

After changing config, run php artisan config:clear (or your usual deploy cache-bust) and hard-refresh — Nova's asset manifest is aggressively cached by the browser.

Implementation Patterns

Header-only is the low-risk default. Fixed headers are almost universally an improvement and require no content offset in most Nova versions because the content wrapper already has top padding sized to the header. Fixed sidebars are the part that causes layout fights.

Compensate the content offset yourself. The package fixes the bars but typically does not adjust the main content container, so after enabling the sidebar you may see content slide under it. The reliable fix is your own stylesheet with a media query, not an edit to vendor CSS:

// app/Providers/NovaServiceProvider.php
public function boot()
{
    parent::boot();

    Nova::style('nova-layout-tweaks', resource_path('css/nova/layout-tweaks.css'));
}

/* resource/css/nova/layout-tweaks.css */
@media (min-width: 1024px) {
    .content {
        margin-left: 15rem; /* match your sidebar width */
    }
}

/* Anchor/link scrolling under the fixed header */
html {
    scroll-padding-top: 4rem;
}

Gate it by viewport, not by user. The single most valuable thing you can do is wrap the fixed-sidebar rule in a min-width media query so mobile and narrow laptops fall back to Nova's native collapsible sidebar. Nova already collapses the sidebar into a hamburger below its breakpoint; a naive position: fixed will leave a sidebar floating over the content on a phone.

Prefer position: sticky if you only want the header. Sticky avoids the entire offset-compensation problem and does not create a new containing block for descendants. If the package's header behaviour misbehaves on your Nova version, overriding it is two lines:

.header {
    position: sticky !important;
    top: 0;
    z-index: 30;
}

Layer z-index deliberately. Fixed elements create stacking contexts you did not have before. If Nova modals, dropdowns, or the notifications tray render behind your fixed header, you need to raise the modal's z-index or lower the header's — check computed z-index on the modal overlay rather than guessing.

Per-environment enablement via env vars is a reasonable pattern if you want the bars in production only (or vice versa for demos):

'sidebar' => (bool) env('NOVA_FIXED_SIDEBAR', false),
'header'  => (bool) env('NOVA_FIXED_HEADER', true),

Team-level integration tip: if you use more than one Nova UI tweak package, consolidate. Multiple packages each injecting a stylesheet that targets .sidebar will fight, and load order is determined by Nova's asset registration order, not by what feels logical. Put all UI tweaks into a single Nova::style() call in your own NovaServiceProvider.

Gotchas and Tips

Version compatibility is the headline risk. Last release was January 2020, which puts this in the Nova 2.x / early 3.x era. Nova 4 (2022) rewrote the UI — different markup structure, different wrapper classes, different layout system. The CSS in this package targets class names that may no longer exist or may now be nested differently. Before installing, open the package's CSS file and grep your Nova build for each selector. If .header-inner doesn't exist in Nova 4/5, the package will install cleanly, register its asset, and do absolutely nothing — a silent failure that wastes an afternoon.

Silent no-op debugging checklist:

• Is the stylesheet in the page source? (<link href="/nova-api/.../nova-fixed-bars.css"> or similar)
• Does the selector match anything? document.querySelectorAll('.sidebar').length in the console.
• Is the rule being applied but overridden? DevTools → check the "filter styles" / strikethrough.
• Is the config cached? php artisan config:cache during deploy will freeze your toggle values.

position: fixed breaks inside transformed ancestors. If any parent of the header has transform, filter, perspective, or will-change, fixed becomes relative to that element, not the viewport, and the bar will scroll with the page. This is a classic Nova-theme-package conflict — if you also run a theme/branding package, test with it enabled.

overflow: hidden on html/body (common in some Nova versions to prevent horizontal scroll) can kill fixed positioning or create its own scroll container. Verify scroll behaviour on a long page, not just the dashboard.

Assets are versioned at build time. Run php artisan nova:publish after upgrading Nova or the package so your asset manifest and the actual files agree; mismatch here looks like "the CSS randomly stopped working after deploy."

Never edit vendor/cloudcake/nova-fixed-bars/. Copy the ~15 lines of CSS you actually want into resources/css/nova/ and register it yourself. Given the maintenance status (single release, 2020), this is the pragmatic long-term move anyway — it removes the dependency, removes the Nova-version guessing game, and lets you tune the breakpoints and offsets to your own layout.

Accessibility: a fixed header means keyboard focus can be scrolled underneath it (Tab into a field that's hidden behind the bar). scroll-padding-top on html fixes this for both keyboard and in-page anchor navigation — easy to forget, annoying for anyone not using a mouse.

Extension points: there aren't meaningful ones. There is no event, no macro, no view hook — just a config array and a stylesheet. If you need conditional logic (per-user, per-role, per-viewport), do it with your own Nova::style() call or plain CSS media queries rather than trying to bend the package.