After creating a menu and adding links to it, you may wish to customize the menu’s appearance. This guide will cover common changes you may wish to make to the menu’s design.
Site Editor themes allow you to fully customize the site’s menu design through the Editor under Appearance in your dashboard. Classic themes have limited menu design options built into the Customizer under Appearance in your dashboard.
To determine which section of this guide to follow, visit your WordPress.com dashboard and check under Appearance on the left side. If you see Editor, use the Site Editor section of this guide. Otherwise, use the Customizer instructions.
If your theme uses the Site Editor (i.e., you have Appearance → Editor in your dashboard), you can control the menu design from the Navigation block settings by following these steps:
- From your site’s dashboard, navigate to Appearance → Editor.
- Select Templates and choose a template that includes your menu, such as Home or Front Page.
- Open List View in the top-left corner of your screen (it’s the icon that looks like three horizontal lines above each other.)
- Select the Navigation block in the List View.
- If you do not see a Navigation block, you can create one.
- View the Navigation block settings on the right side of the screen.
- Customize the Navigation block’s styles under either the settings icon or the styles icon.
- Click the Save button to save your changes.
Learn how to use each setting in our Navigation block settings guide, including:
- Navigation block styles, like color, typography, and dimensions.
- Navigation block layout settings, like justification, orientation, and menu display.
This video demonstrates how to access the Navigation block and change settings and styles. This functionality is available in our fully customizable Site Editor themes. Slow down or speed up the video using the controls in the lower-right corner after clicking the Play button.
This section applies to sites created with the AI Website Builder (all paid plans) or sites that have enabled the AI assistant (Business and Commerce plans). Open the AI assistant by clicking the AI icon (a four-pointed star) at the bottom of the screen.
The AI assistant can make changes to your menu’s appearance and behavior directly. Here are some things you can ask it to do:
- “Change the color of my navigation menu to match my brand.”
- “Set my drop-down menus to open on click instead of hover.”
- “Make my menu show as a hamburger menu on all screen sizes.”
- “Add a CSS class called ‘featured-link’ to the Contact menu item.”
You can move the location of the menu in all the Site Editor themes. Site Editor themes use the Editor in Appearance to give you full control over the layout, including your site’s menu location.
While the location of the menu in a Site Editor theme is fully customizable, you may want to start by looking for a theme that displays the menu in a position you like. Learn more about switching themes.
If you have already selected a Site Editor theme that you want to use, and want to change where the menu appears, you have a few options:
- Learn how to select and move the Navigation block, or skip to the video tutorial.
- Add a new menu to your template.
- Add site navigation to an individual page or post using the Pages List block.
- Add navigation within a page or post using the Table of Contents block.
If you are using a theme that does not use the Editor under Appearance in your dashboard, take a look at our fully customizable Site Editor themes.
A menu on desktop screens typically appears as a list of text links in one line. On smaller screens (tablet and mobile devices), there may not be enough space to show all the text links in a way that mobile visitors can easily tap.
Instead, it’s common to collapse the menu items behind a button that’s called an “overlay” or “hamburger” menu (named because the three horizontal lines resemble a hamburger.)
From the Navigation block settings in the Site Editor, you can adjust the display of the Overlay Menu. Follow these steps to customize the display of the Overlay Menu:
- From your site’s dashboard, navigate to Appearance → Editor.
- Select Templates and choose a template that includes your menu, such as Home or Front Page.
- Open List View in the top-left corner of your screen (it’s the icon that looks like three horizontal lines above each other.)
- Select the Navigation block in the List View.
- View the Navigation block settings on the right side of the screen.
- Click the Settings icon (the cog or gear icon.)
- Under Display, choose your Overlay Menu settings:
- Mobile: The default setting. The overlay menu will only appear on mobile sized screens.
- Off: Do not display an overlay menu at all.
- Always: Show an overlay menu at all times, regardless of screen size.
- Using overlay template, you can customize the design of the full-screen overlay that appears on mobile. See our guide to customizing the navigation overlay.
- Click the “Save” button to save your changes.
Website visitors are accustomed to seeing an icon or hamburger menu on mobile devices. Displaying the desktop menu, i.e., turning off the overlay menu, may make it difficult for your visitors to navigate your site on mobile devices.
Visit the Navigation block guide to learn how to use all the features of the block.
Classic themes and third-party themes may implement their own default settings for how the menu is displayed on mobile devices. Check the documentation for the theme you selected to learn more.
You can control whether a drop-down menu opens when a visitor hovers over a menu item, clicks on it, or stays visible at all times.
To set submenu visibility, follow these steps:
- From your site’s dashboard, navigate to Appearance → Editor.
- Select Templates and choose a template that includes your menu, such as Home or Front Page.
- Open List View in the top-left corner of your screen.
- Select your Navigation block.
- In the block settings sidebar, click the Settings icon (the cog/gear icon).
- Under Display, find the “Submenu Visibility” setting and choose one of the following options:
- Hover: The drop-down menu opens when a visitor hovers over the parent menu item. Optionally, toggle off the setting to display an arrow next to the menu.
- Click: The drop-down menu opens when a visitor clicks the parent menu item.
- Click the Save button to save your changes.
This section of the guide applies to sites with our WordPress.com Personal, Premium, Business, and Commerce plans. For free sites, upgrade your plan to access this feature.
CSS classes are an advanced menu property you can use to apply a CSS class to individual menu items.
To determine which section of this guide to follow, visit your WordPress.com dashboard and check under Appearance on the left side. If you see Editor, use the Block Themes section of this guide. Otherwise, use the Classic Themes instructions.
To add a CSS class in the Site Editor, follow these steps:
- From your site’s dashboard, navigate to Appearance → Editor.
- Select Templates and choose a template that includes your menu, such as Home or Front Page.
- Open List View in the top-left corner of your screen (it’s the icon that looks like three horizontal lines above each other.)
- Select the Navigation block in the List View.
- If you do not see a Navigation block, you can create one.
- View the Navigation block settings on the right side of the screen.
- Click the Settings ‘cog’ icon ⚙️ and open the section labeled “Advanced.”
- Add your CSS class.
You can also set a CSS class for individual links in the Navigation block. Select the individual link before visiting Advanced.
Visit our guide on the Navigation Block to learn about all the features of the block.
Learn more about adding custom CSS.
