How to Delete the Navigation Bar on WordPress

Your theme's CSS files define how browsers display your page.
... Jupiterimages/BananaStock/Getty Images

WordPress offers many themes with a navigation bar defined in a header file and modified by a style defined in a CSS file. From your WordPress dashboard, you can open these files in a text editor and either comment out the appropriate lines or change them so that your page doesn't display the bar. Before editing your WordPress files, back them up in case you need to revert your changes. Removing the navigation bar can put some themes out of alignment, but removing the navigation elements without deleting the bar preserves your page's look and feel.

Open your WordPress administration panel, click “Appearance” and choose “Editor.” The sidebar displays your theme's HTML, PHP and CSS files, and you can view a file in the editor by selecting it from the sidebar.

Select “styles.css” from the sidebar to edit your theme's look and feel. The lines defining your navigation bar are located near the bottom of this file. Your theme may use a class called “navcontainer,” “top-navigation” or a similar class.

Open Notepad and copy the styles.css code into a new text file. Click inside the WordPress editor to select it, then press “Ctrl-A” to select all the text and “Ctrl-C” to copy it. Click inside the new text file and press “Ctrl-V” to paste the text into the file. Save the file as “styles.css” (without quotes, here and throughout) as backup.

Click inside the WordPress editor to select it, then press “Ctrl-F” to open the search bar. Type “nav” in the search bar and click the “Down” arrow to find the class defining your navigation bar. The line begins with a “#” symbol and contains a list of arguments enclosed in curly braces. For example, the line may look as follows:

navcontainer { color: main-color; border: 2px gray }

Insert the argument “display: none” inside the curly braces. For example, the new line may look as follows:

navcontainer { display: none; color: main-color; border: 2px gray }

Adding this code snippet without deleting the other arguments makes reverting your changes easier than replacing them manually or uploading your backup file.

Click “Save” to apply your changes. The update is immediately visible to your page's visitors. If deleting the navigation bar puts your theme out of alignment, replace “display: none” with “visibility: hidden.” This argument makes the navigation bar invisible without displacing the other elements on your page. For example, the revised code may look as follows:

navcontainer { visibility: hidden; color: main-color; border: 2px gray }

  • When you back up WordPress files, use a text editor rather than a word processor. Text editors, such as Notepad, store text information in a plain ASCII or Unicode format, while word processors, such as Microsoft Word, add formatting information that can alter your theme.

David Wayne has been writing since 2010, with technology columns appearing in several regional newspapers in Texas. Wayne graduated from the University of Houston in 2005, earning a Bachelor of Arts in communications.

×