Tips on how to Repair WordPress Nav Menu Showing Beneath Admin Bar

In case you’ve seen that your web site’s navigation menu seems beneath the WordPress admin bar, then you definitely’re not alone. It is a frequent concern, and we’ve seen it on many web sites.

This concern might be irritating, particularly when it hides elements of your menu or makes it troublesome for logged-in customers to click on.

We’ve seen that it normally happens resulting from theme or CSS conflicts. However the excellent news is that it may be mounted rapidly.

On this article, we are going to present you what to do when the WordPress navbar is below the admin bar, beginning with a easy, non-technical answer that doesn’t require any coding.

Why Is the WordPress Admin Bar Overlapping the Navigation Menu?

In case your WordPress navigation menu appears to be hidden or overlapping with the admin bar, you is perhaps coping with a typical show concern.

We’ve seen this downside happen when a theme’s CSS doesn’t correctly account for the peak of the admin bar. The CSS then obscures elements of your web site’s header, together with the navigation menu.

You would possibly discover that some menu objects are troublesome to click on or that all the menu is partially lined when viewing your web site. This may be irritating, particularly when it impacts the usability of your web site.

There are a couple of frequent the explanation why this would possibly occur:

Theme Conflicts: Generally, the CSS in your theme doesn’t account for the admin bar, inflicting the menu to be positioned incorrectly.

Plugin Conflicts: A plugin that modifies the front-end design may unintentionally trigger the menu to overlap with the admin bar. This may increasingly embody plugins that add mega menus or header banners.

Customized CSS: In case you’ve added customized CSS to your web site, it is perhaps interfering with the correct show of your menu.

This concern can have an effect on the usability of your web site, making it tougher for customers to navigate. Fortuitously, there are a number of methods to repair this downside, beginning with a easy answer that doesn’t require any coding.

Right here is an summary of the options we are going to present. You may bounce to the one that appears simpler to you:

Resolution 1: Conceal the Admin Bar by way of Consumer Profile Settings

This answer is good for customers who desire a fast and straightforward repair with out having to take care of any code. It’s excellent for freshmen or anybody who is perhaps apprehensive about by accident breaking their web site’s structure.

Moreover, should you don’t have permission to edit your web site’s CSS or theme recordsdata, this methodology gives a easy strategy to keep away from the issue with out making everlasting adjustments.

Be aware: This answer applies on the person degree, which implies different customers in your web site might want to log in to their accounts and repeat the next steps.

First, you have to log in to your WordPress dashboard. Then navigate to the Customers » Profile web page within the left-hand menu.

Scroll all the way down to the Toolbar part after which uncheck the field subsequent to the ‘Present Toolbar when viewing web site’ possibility.

After that, don’t neglect to click on the ‘Replace Profile’ to save lots of your adjustments.

Why This Works

Hiding the admin bar prevents it from interfering with the navigation menu on the entrance finish of your web site. For the reason that admin bar shouldn’t be displayed, the overlapping concern is briefly resolved, making your menu totally accessible to each you and your guests.

Resolution 2: Manually Adjusting the Theme’s CSS

In case you’re comfy working with HTML and CSS or desire a extra everlasting answer to the overlapping menu concern, it’s best to modify your theme’s CSS.

This answer is good for customers who’ve the mandatory person permissions to edit their web site’s look and wish to repair the issue at its supply.

1. Examine the Situation:

First, you have to use the Examine instrument in your browser to find out the place so as to add the customized CSS. We’ve an in depth information for DIY freshmen on utilizing the Examine instrument.

First, right-click in your navigation menu and choose ‘Examine’ (in Chrome) or ‘Examine Ingredient’ (in Firefox).

This may open the developer instruments, which can present the HTML and CSS for the component.

Within the code, you have to find CSS lessons or IDs utilized by your theme to show the header or navigation menu areas. As an illustration, within the above screenshot, our demo web site makes use of the .site-header class for the affected space.

Tip: Transfer your mouse over HTML, and your browser will spotlight the world within the preview window. Proper-click on HTML after which look below ‘Kinds’ to seek out the CSS properties.

Add Customized CSS Utilizing WPCode

Subsequent, you will have to put in and activate the WPCode plugin. It’s the finest WordPress customized code plugin, making including customized CSS to your web site very simple no matter your theme.

One more reason to make use of WPCode is its conditional logic guidelines. Since this concern solely impacts logged-in customers, we are going to want these guidelines so as to add our code for logged-in customers solely.

Go forward and set up and activate the WPCode plugin. For extra particulars, see our tutorial on set up a WordPress plugin.

Be aware: A free model of WPCode can also be out there and would work for this tutorial. Nevertheless, we suggest upgrading to a paid plan as a result of it offers you entry to extra options.

As soon as activated, navigate to the Code Snippets » + Add Snippet web page in your WordPress dashboard.

On the following web page, the plugin will present you a bunch of ready-to-use code snippets. Nevertheless, we will likely be writing customized CSS code.

To try this, transfer your mouse to the ‘Add Your Customized Code (New Snippet)’ field and click on the ‘+ Add Customized Snippet’ button.

This may take you to the code editor web page.

Right here, enter a reputation to your code snippet after which choose CSS Snippet from the ‘Code Kind’ drop-down.

After that, add the next code into the ‘Code Preview’ field:

On this code snippet, you will have to interchange #your-menu-id and .your-menu-class with the values you wish to goal within the HTML.

Right here is how we added it to our take a look at web site and adjusted it to focus on the affected space.

The CSS accommodates 4 guidelines.

First are the margin-top and padding-top guidelines. For the reason that admin bar has a hard and fast top of 32 pixels, you’ll use that to compensate for conflicting CSS.

Subsequent, the admin bar additionally has a z-index worth set to 9999. This rule pushes it to the entrance of the show. By utilizing a z-index rule with a better worth, you progress your header or navigation space to the entrance.

The place rule is ready to relative with the intention to use the z-index rule.

After including your customized CSS guidelines, you have to inform WPCode to solely use this CSS code when a logged-in person is viewing the location.

Scroll all the way down to the Sensible Conditional Logic part and toggle the swap subsequent to the ‘Allow Logic’ possibility.

After that, merely set the situation choice to ‘Present’ after which click on ‘+Add new group’.

Beneath the logic guidelines, you have to choose ‘Logged-in’ > ‘Is’ > ‘True.’

Lastly, on the top-right nook of the display screen, simply click on ‘Save Snippet’ and swap it from Inactive to Energetic.

You now want to go to your web site and verify if the navigation menu and header space now seem accurately above the admin bar.

In case you don’t get it proper the primary time, then attempt adjusting the margin-top worth or focusing on completely different ID or CSS lessons.

Why This Works

The issue usually happens as a result of the theme’s CSS doesn’t correctly account for the admin bar, inflicting the navigation menu to be displayed beneath it. By including a small snippet of customized CSS, you may modify the positioning of the navigation menu, making certain it seems accurately above the admin bar.

Resolution 3: Checking for Plugin Conflicts

In case you’ve tried the earlier options and the difficulty remains to be there, then it is perhaps brought on by a plugin battle.

Plugins can generally introduce CSS or JavaScript that interferes along with your theme’s structure. This interference could cause points just like the navigation menu showing below the admin bar.

Figuring out the conflicting plugin can resolve the difficulty with out altering your theme’s code.

1. Deactivate All Plugins:

First, go to your WordPress dashboard and navigate to Plugins » Put in Plugins.

Choose all plugins by checking the field subsequent to Plugin on the high of the listing.

It is advisable select ‘Deactivate’ from the majority actions dropdown and click on ‘Apply’.

Now, merely go to your web site to see if the difficulty has been resolved. If the navigation menu is now displaying accurately, one of many plugins probably induced the issue.

2. Determine The Conflicting Plugin

To determine which plugin was inflicting the difficulty, return to the Put in Plugins web page.

You’ll have to reactivate every plugin one by one, checking your web site after every activation. Repeat till the issue seems after activating a particular plugin.

As soon as the issue reappears, you could have efficiently recognized the plugin inflicting the battle.

What to Do Subsequent

In case you determine a conflicting plugin, contemplate reaching out to the plugin’s developer for help. They might provide a repair or replace to resolve the difficulty. Alternatively, you may search for a special plugin that gives related performance with out inflicting conflicts.

Further Sources for WordPress Admin

Listed below are a couple of extra assets that you could be discover useful:

Tips on how to Disable WordPress Admin Bar for All Customers Besides Directors

Tips on how to Repair Lacking Admin Bar Situation in WordPress (3 Methods)

Tips on how to Add Customized Shortcut Hyperlinks to Your WordPress Admin Toolbar

Newbie’s Information to Troubleshooting WordPress Errors (Step by Step)

Hopefully, the options we shared will resolve the admin bar inflicting the navigation menu or header show concern in your web site.

You might also wish to see our handbook on fixing the commonest WordPress errors or check out our tips about customizing the WordPress admin space to your necessities.

In case you appreciated this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You too can discover us on Twitter and Fb.

The publish Tips on how to Repair WordPress Nav Menu Showing Beneath Admin Bar first appeared on WPBeginner.