ACF header floats over the WordPress mobile admin menu and blocks top menu items

Open Beginner friendly
#1,056 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
68/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css, php, wordpress
Domain
design, frontend

Research direction

Start by locating the styles for .acf-headerbar and checking how its positioning behaves at viewport widths of 600px or less alongside the WordPress mobile admin menu. Reproduce the overlap on an ACF admin screen with the menu open, then verify that the top menu links remain visible and clickable at mobile widths. The issue does not name a source file or test, so finding the relevant stylesheet is the first step.

Written by the indexing model from the issue text.

Description

Describe the bug
On mobile breakpoints, opening the WordPress admin navigation menu causes .acf-headerbar to remain static and float directly on top of the opened sidebar menu. This visually covers the top sidebar menu items (such as "Dashboard") and intercepts clicks/taps, preventing the user from interacting with those links.

To Reproduce
Steps to reproduce the behavior:

  1. Go to any ACF admin screen in the WordPress dashboard (e.g., ACF > Field Groups, Post Types, Taxonomies, or Tools).
  2. Resize the browser viewport to a mobile width (600px or less), or inspect using device mode (e.g., iPhone at 375px–390px).
  3. Click/tap on the hamburger menu icon (#wp-admin-bar-menu-toggle) in the WordPress admin toolbar to open the admin sidebar menu.
  4. Observe that the ACF header bar (.acf-headerbar) floats above the top of the open sidebar menu, obscuring links like "Dashboard" and blocking clicks.

Expected behavior
When the mobile admin menu is open, the ACF header bar should not overlap the sidebar menu, allowing users to access and click all menu options without obstruction.

Screenshots or Video

Image

Version Information:

  • WordPress Version: 7.2-beta4-65231-src
  • PHP Version: 8.3.30
  • ACF Version: 6.8.11
  • Browser: Chrome 156.0
Dominant language
PHP
Stars
947
Forks
198
PR merge metrics
No merged PRs in 30d

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from AdvancedCustomFields/acf

All issues in AdvancedCustomFields/acf

Similar issues

More PHP issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.