Get Ready to Be Confused: Removing the Menu Bar in WordPress

Method 1: Using CSS

CSS might make your head spin, but it’s a great way to remove your menu bar if you want a minimalist vibe. Here’s how:

1. Navigate to Appearance > Customize > Additional CSS from the WordPress dashboard.
2. In the Additional CSS box, add the following code:

   #site-navigation {
display:none;
}

   This code targets the site navigation element of your WordPress theme which includes the menu bar and sets the display property to none, which hides the element from the page.

3. Click on the Publish button to save your changes.

Method 2: Using a WordPress plugin

If coding isn’t your thing, you can always turn to WordPress plugins. Here’s how to remove the menu bar using a plugin:

1. Install and activate the “Hide Admin Bar” plugin from the WordPress repository.
2. Go to Settings > Hide Admin Bar from the WordPress dashboard.
3. Check the box next to “Front End” to hide the menu bar only on the front end of your website. Alternatively, you can select “All” to hide the menu bar on both the front and back ends of your website.
4. Click on the Save Changes button to save your settings.

Method 3: Customizing the theme files

If you’re a brave soul who loves to tinker with code directly, you can customize your theme files. It’s not for the faint of heart, though. Here’s how:

1. Navigate to Appearance > Editor from the WordPress dashboard.
2. Open the header.php file of your WordPress theme.
3. Locate the code for the menu bar element in the header.php file. This code may differ depending on the theme you’re using.
4. Comment out or delete the code that generates the menu bar. For example, if you’re using the Twenty Twenty-One theme, the menu bar code looks like this:

   <nav id="site-navigation" class="main-navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
<?php echo esc_html__( 'Primary Menu', 'twentytwentyone' ); ?>
</button>
<?php
wp_nav_menu(
array(
'theme_location' => 'primary',
'menu_id' => 'primary-menu',
)
);
?>
</nav><!-- #site-navigation -->

   To remove the menu bar, you can comment out or delete the entire code block from <nav> to </nav>.

5. Click on the Update File button to save your changes.

Conclusion

The menu bar is usually a staple feature of a website, but if you’re looking for a change and want to remove it, there are different methods to do so in WordPress. Choose the method that works best for you and always make a backup of your website before making any changes.