Back to Community
Home / Community / Theme → Astra

How to Fix Common Astra Theme Menu and Submenu Issues

29 threads Sep 9, 2025 Theme → Astra

Content

Working with the Astra theme's navigation menus is a common topic on support forums. Users often encounter challenges with submenu styling, mobile behavior, and accessibility. This guide compiles the most frequent issues and their solutions, based on community discussions.

Common Astra Menu Problems and Solutions

1. Customizing Submenu Appearance (Free Version)

Many users find the default submenu text size, padding, or spacing between items (line height) too large. The Astra free version does not include built-in controls for these specific submenu styles.

Solution: Use Custom CSS. You will need to add CSS code to your site, typically through the WordPress Customizer under Additional CSS. To find the correct CSS selectors for your specific menu, use your browser's inspect tool. Community threads suggest this is the primary method for adjusting submenu font size, padding, and item spacing in the free version.

2. Mobile Menu Toggle Behavior

On mobile devices, submenus are expanded by clicking a toggle arrow icon next to the menu label. Some users want the entire menu label to be clickable to expand the submenu.

Solution: This behavior is by design in the Astra theme. Modifying it requires a custom JavaScript solution or a dedicated plugin, as there is no built-in option to change this interaction.

3. Submenu Arrows Missing or Incorrect

Submenu indicator arrows might not appear, appear as blanks, or appear as double arrows due to a conflict or theme version issue.

Solution: First, ensure your Astra theme is updated to the latest version. If the problem persists, you may need to add specific CSS code to correct the arrow display. The Astra team has documentation that includes a CSS snippet for this specific scenario.

4. Submenus Not Closing on Tablet

On tablet devices, a submenu might stay open and prevent other submenus from opening correctly.

Solution: This is often caused by a plugin conflict. A standard troubleshooting step is to deactivate all plugins temporarily to see if the issue resolves. If it does, reactivate them one by one to identify the conflicting plugin.

5. Accessibility Compliance (aria-expanded)

Accessibility evaluation tools may flag an aria-expanded attribute on the <ul> element, which is not a standard practice and can cause compliance warnings.

Solution: Resolving this requires a code change to the theme's core structure. For a permanent fix, it is recommended to report this directly to the Astra development team so they can address it in a future theme update.

6. Z-Index Conflicts

Dropdown menus might appear behind other page elements like slideshows or sections because their stacking order (z-index) is too low.

Solution: There is no setting for this in the customizer. You must use Custom CSS to increase the z-index value for the menu container. Use your browser's inspect tool to identify the correct element to target with your CSS rule.

7. Creating Multi-Level Menus (Beyond Two Tiers)

WordPress and Astra support creating multi-level menus (e.g., a submenu under a submenu) through the native Menus admin screen (Appearance > Menus). Simply drag a menu item slightly to the right to nest it under the item above.

Important Note: Deeply nested menus can create usability challenges, especially on mobile devices. For very large menus, consider using a mega menu, which is a feature available in the Astra Pro plugin.

What Requires Astra Pro

It's helpful to know that some highly requested menu features are not available in the free version and require the Astra Pro plugin. Based on community threads, this includes:

  • A toggle button for the menu on desktop view.
  • Built-in controls for adjusting submenu spacing and styling without CSS.
  • Mega Menu functionality.
  • Creating a secondary menu in header areas like the 'Below Header' section.

General Troubleshooting Tips

  • Plugin Conflict Test: If your menu is behaving unexpectedly, the first step is always to disable all other plugins to see if the issue is caused by a conflict.
  • Clear Cache: Clear any caching on your site (server, plugin, or browser cache) after making changes to see the results immediately.
  • Use the Inspect Tool: Your browser's right-click > Inspect tool is invaluable for identifying the correct CSS classes to target for styling.

Most common menu issues can be resolved with CSS or standard troubleshooting. For more complex functionality, reviewing the Astra documentation for the specific feature is always recommended.

Related Support Threads Support