How to Fix WordPress Nav Menu Appearing Under Admin Bar

It can be frustrating when your WordPress navigation menu suddenly shifts behind the admin bar. We’ve seen this happen to a lot of users, especially after installing a new theme or activating certain plugins.

This issue is more common than you might think. Many WordPress themes don’t account for the space taken up by the admin toolbar shown to logged-in users, which can push your menu out of place.

In this guide, we’ll show you several ways to fix the WordPress nav menu appearing under the admin bar. Whether you want a quick non-technical fix or a clean CSS solution, you’ll find a method that works for your site.

Why Is the WordPress Admin Bar Overlapping the Navigation Menu?

If your WordPress navigation menu seems to be hidden or overlapping with the admin bar, you might be dealing with a common display issue.

We have seen this problem occur when a theme’s CSS doesn’t properly account for the height of the admin bar. The CSS then obscures parts of your site’s header, including the navigation menu.

You might notice that some menu items are difficult to click or that the entire menu is partially covered when viewing your site. This can be frustrating, especially when it affects the usability of your website.

There are a few common reasons why this might happen:

• Theme Conflicts: Sometimes, the CSS in your theme doesn’t account for the admin bar, causing the menu to be positioned incorrectly.
• Plugin Conflicts: A plugin that modifies the front-end design could unintentionally cause the menu to overlap with the admin bar. This may include plugins that add mega menus or header banners.
• Custom CSS: If you’ve added custom CSS to your site, it might be interfering with the proper display of your menu.

This issue can affect the usability of your site, making it harder for users to navigate. Fortunately, there are several ways to fix this problem, starting with a simple solution that doesn’t require any coding.

Here is an overview of the solutions we will show. You can jump to the one that you’re most comfortable with:

Solution 1: Hide the Admin Bar via User Profile Settings

This is the easiest way to fix the issue if you’re not comfortable adding code. It works well for beginners or users who don’t have permission to change the theme or add custom CSS.

Instead of fixing the layout, this method hides the admin bar entirely so that it no longer covers the menu.

Heads up: Hiding the admin bar means you’ll no longer see quick links to edit posts, manage comments, or access plugin updates while browsing your site.

Also, this setting only applies to your user account. If others use the site, they’ll need to follow the same steps below.

To do this, log in to your WordPress dashboard and go to Users » Profile in the left-hand menu.

Scroll down to the Toolbar section and uncheck the box that says ‘Show Toolbar when viewing site.’

Click the ‘Update Profile’ button at the bottom to save your changes.

Why This Works

By turning off the admin bar, you remove the element that’s pushing the menu out of place. It’s a simple workaround that avoids deeper layout issues, especially on sites where only logged-in users see the problem.

Solution 2: Fix the Overlap with Custom CSS

If you’re comfortable using custom code and want a long-term fix, then adding CSS is the way to go. This lets you control exactly how the header behaves, without turning off the admin bar.

We recommend using the WPCode plugin to safely add custom CSS. It works with any theme and lets you apply your fix only for logged-in users (since guests don’t see the admin bar).

Step 1: Inspect the Header Element

Right-click your site’s header or nav menu and choose ‘Inspect’ in your browser. This will open the developer tools.

Hover your mouse over the HTML.

The browser will highlight the matching element on the page.

Look for a class or ID that wraps your navigation. You’ll use this in your custom CSS.

Step 2: Install WPCode

Install and activate the WPCode plugin. It’s beginner-friendly and lets you add code without editing theme files.

You can use the free version for this tutorial, but the Pro version offers extra features for larger projects.

Step 3: Add the CSS Snippet

Go to Code Snippets » Add Snippet, and choose ‘Add Your Custom Code (New Snippet)’.

First, name your snippet something descriptive. That way you can easily remember what it’s for later. We’ll call it ‘Fix Overlapping Admin Bar.’

Then, select ‘CSS Snippet’ as the code type.

After that, paste this CSS code into the editor:

.logged-in .main-navigation {
 margin-top: 32px;
 z-index: 9999;
 position: relative;
}

This targets the navigation menu only for logged-in users, fixing the issue without changing how the site looks for visitors.

If your theme uses a different class or ID, replace .main-navigation with the one from your Inspect tool.

Step 4: Use Smart Conditional Logic

Scroll to the ‘Smart Conditional Logic’ section in WPCode and turn it on.

Set the condition to ‘Show’ if ‘Logged-in’ is ‘True’.

Then click ‘Save Snippet’ and switch it from Inactive to Active.

Now visit your site and see if the menu appears above the admin bar.

If not, tweak the margin-top or adjust your selector.

Why This Works

Some themes don’t account for the 32px height of the admin bar. This CSS adds spacing and brings your header forward, fixing the layout only for users who see the admin bar.

Solution 3: Check for Plugin Conflicts

If the menu still appears under the admin bar after trying earlier fixes, a plugin conflict could be the reason.

Some plugins add their own CSS or JavaScript, which may accidentally interfere with your theme’s layout, especially if they modify the header or navigation area.

We’ve seen this happen on client sites, and tracking down the conflicting plugin often solves the issue without touching any code.

Step 1: Deactivate All Plugins

Go to your dashboard and head over to Plugins » Installed Plugins.

Select all the plugins using the checkbox at the top, choose ‘Deactivate’ from the bulk actions menu, and click ‘Apply’.

Now visit your website. If the nav menu looks normal, then one of the plugins was likely the culprit.

Step 2: Reactivate Plugins One by One

Head back to the ‘Installed Plugins’ screen and reactivate each plugin individually. After each one, reload your site and check the menu.

Keep doing this until the issue comes back. The last plugin you activated is the one causing the conflict.

Step 3: Decide What to Do

Once you’ve identified the problematic plugin, you have a few options. First, try contacting the plugin developer for support. They may already know about the issue or suggest a workaround.

If no fix is available, you can look for an alternative plugin that offers similar features without causing layout issues.

Additional Resources for WordPress Admin

Here are a few more resources that you may find helpful:

• How to Disable WordPress Admin Bar for All Users Except Administrators
• How to Fix Missing Admin Bar Issue in WordPress (Ways)
• How to Fix Missing Theme File Editor in WordPress Admin (Easy Fix)
• How to Add Custom Shortcut Links to Your WordPress Admin Toolbar
• Beginner’s Guide to Troubleshooting WordPress Errors (Step by Step)

Hopefully, the solutions we shared will resolve the admin bar causing the navigation menu or header display issue on your website.

You may also want to see our handbook on fixing the most common WordPress errors or take a look at our tips on customizing the WordPress admin area to your requirements.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.