Skip to content

[6.x] Fix grid header overlapping nav#14640

Merged
jasonvarga merged 3 commits into
statamic:6.xfrom
wiktorm12:issue/14608
May 12, 2026
Merged

[6.x] Fix grid header overlapping nav#14640
jasonvarga merged 3 commits into
statamic:6.xfrom
wiktorm12:issue/14608

Conversation

@wiktorm12
Copy link
Copy Markdown
Contributor

@wiktorm12 wiktorm12 commented May 11, 2026

Fix grid header overlaps navigation

Before:
image

After:
image

Fixes #14608

@jackmcdade
Copy link
Copy Markdown
Member

jackmcdade commented May 11, 2026

Thanks for giving this a go! We try not to use arbitrary z-index values but rather have vars to map out the various proper z-indexes in resources/css/elements/base.css

--z-index-below: -1;
--z-index-above: 1;
--z-index-portal: 2;
--z-index-draggable: 3;
--z-index-modal: 4;
--z-index-max: 5;

You up for taking a stab w/ those or should I take it from here?

@wiktorm12
Copy link
Copy Markdown
Contributor Author

I fixed it already 👍

The grid fieldtype's sticky `thead th` was at `--z-index-draggable` (3),
which matched the side nav and caused it to render over the mobile nav
when sliding in. The table fieldtype uses `--z-index-above` (1) for the
same kind of sticky header without issue, so bring grid in line and
revert the nav-main z-index bump.
@jasonvarga
Copy link
Copy Markdown
Member

Since Grid was the only fieldtype with an issue, I moved the fix to there, consistent with similar fieldtypes.

This issue didn't happen for Replicator or Table fieldtypes (which also has a sticky header row).

@jasonvarga jasonvarga changed the title [6.x] Add z-index to navbar in CP [6.x] Fix grid header overlapping nav May 12, 2026
@jasonvarga jasonvarga merged commit d7f76e1 into statamic:6.x May 12, 2026
18 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Grid header overlaps navigation

3 participants