The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →To fix a WordPress navigation menu appearing under the admin bar, first compare the same page while logged in and logged out. If the header shifts or overlaps the toolbar only when you are logged in, check the header’s fixed or sticky positioning and its offset for the toolbar. If the toolbar is present but hidden behind the menu, inspect the elements’ stacking order instead. Those are different problems, and neither has a universal CSS selector or z-index value.
First identify what is appearing under what
“Under the admin bar” can describe two opposite visual problems: the menu may be pushed down below the toolbar, or the menu/header may be painted over the toolbar. A dropdown can also be hidden behind another layer even when the main header is positioned correctly. Identify the affected element before changing CSS.
- Open the affected page while logged in and again while logged out, using the same browser window size. Note whether the header moves, overlaps the toolbar, or only a dropdown disappears behind it.
- If the problem occurs only while logged in, focus on the interaction between the toolbar and a fixed or sticky header.
- If it also occurs while logged out, investigate the theme’s header styling and any menu or page-builder plugin; the toolbar is not the sole cause.
Find the right place to edit the menu
WordPress menu controls depend on the active theme. In the dashboard, open Appearance and check which editing option is available. WordPress.com’s menu troubleshooting guide describes the theme-dependent routes and was last reviewed September 8, 2026: Troubleshoot WordPress menu issues.
- Block theme: Use Appearance → Editor, then inspect the header and Navigation block in the Site Editor.
- Classic theme: Use Appearance → Customize → Menus where available, or Appearance → Menus.
Prefer the theme’s supported editor or custom CSS area when possible. Avoid editing theme files directly if an update could overwrite the change; a child theme is another option for maintaining custom code.
Free tools Windows power users keep installed
One-click scans. No signup required.
Inspect the toolbar and actual header in browser tools
Use your browser’s developer tools to inspect the toolbar and the element that actually positions the header or navigation. On typical WordPress front ends the toolbar is #wpadminbar, but verify the live page rather than assuming the menu uses a particular class.
Check the relevant element and its ancestors for position, top, margins, padding, z-index, and transform. Also check whether an ancestor creates a stacking context: a child with a large z-index can still remain behind an element in another stacking context. The WordPress support thread Side Menu not displaying correctly documents a user-reported case of the toolbar hidden behind site content, but it does not establish a universal selector or setting.
Offset a fixed or sticky header only when needed
If the header is fixed or sticky at the top of the viewport, and it starts at the same position as the toolbar, it may need a top offset while the admin bar is present. WordPress Core’s 2022 note says the toolbar offset is 32 or 46 pixels depending on screen width and documents the responsive custom property --wp-admin--admin-bar--height: Theme-focused changes and filters in WordPress 5.9.
/* Replace .site-header with the actual fixed/sticky header selector. */
body.admin-bar .site-header {
top: var(--wp-admin--admin-bar--height, 0px);
}This is a starting pattern, not a drop-in fix. Use it only if the inspected header is fixed or sticky and the theme has not already applied an offset. Applying it to a header in normal document flow can create an unwanted gap. The custom property avoids hard-coding one toolbar height across viewport sizes.
Correct a stacking problem without guessing
If inspection confirms the toolbar is being painted behind the header or menu, test a narrowly targeted stacking adjustment on the element that needs to appear above the other. Do not apply an arbitrarily large z-index to the whole header: the wrong layer can leave dropdowns behind other content, and a child cannot escape a limiting ancestor stacking context simply by receiving a larger number.
Change one rule at a time and retest the main navigation and dropdowns. The exact element and stacking relationship depend on the theme or page builder, so a reported support-thread fix should not be treated as a universal value.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Check why the toolbar is missing or behaving abnormally
If the toolbar itself does not appear on the front end, verify whether a plugin disables it and whether the theme calls wp_footer(). WordPress’s Toolbar documentation notes these as possible reasons the toolbar may be absent. The core reference for wp-includes/admin-bar.php documents the toolbar stylesheet and bump styles.
Rank #3
The function show_admin_bar() controls toolbar display; see the WordPress Developer Resources reference. Hiding or disabling the toolbar can help diagnose whether it is involved, but it is not a general repair for a layout conflict. Do not change shared plugin behavior just to conceal the issue.
Quick Recap
Save safely and verify the result
- Keep a copy of the previous CSS so you can revert the change.
- Save the adjustment in the theme’s supported custom CSS area or a child theme.
- Clear relevant page and style caches so the browser is not showing stale CSS.
- Retest desktop and mobile, both logged in and logged out. Confirm the header, toolbar, and dropdowns remain usable.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
