Create Advanced Navigation Menus with Astra & Elementor

Preface

You know that a well-designed navigation menu is crucial for any website. It guides your visitors, improves user experience, and boosts your site’s SEO. With WordPress, Astra, and Elementor, you have powerful tools at your fingertips to create advanced, user-friendly navigation menus. Let’s dive in and explore how to make the most of these tools!

Why Advanced Navigation Matters

Before we get into the “how,” let’s discuss the “why.” Basic navigation menus often just list pages in a straightforward manner. But advanced navigation takes it a step further, offering features like:

• Dropdown menus with multiple levels
• Mega menus with rich content
• Sticky menus that stay visible as you scroll
• Mobile-responsive designs

These features can significantly improve how visitors interact with your website, making it easier for them to find what they need. This can lead to longer visit durations, lower bounce rates and ultimately, more conversions.

Getting Started: Astra, Elementor, and WordPress

To follow this guide, you’ll need a few things in place:

1. WordPress: A self-hosted WordPress website. If you don’t have one yet, check out this complete guide on how to make a free website with WordPress.
2. Astra Theme: Install and activate the Astra theme. Astra is known for its flexibility and compatibility with page builders. The basic Astra theme is free, but for advanced features, consider using Astra Pro.
3. Elementor: Install and activate the Elementor plugin. The free version of Elementor is sufficient for many navigation enhancements, but Elementor Pro unlocks even more powerful options.

Hint: Make sure that WordPress, Astra and Elementor are installed and up to date! 

Creating a Basic Navigation Menu in WordPress

Let’s start with the fundamentals. Here’s how to create a basic navigation menu in WordPress:

1. Go to Appearance > Menus in your WordPress dashboard.
2. Give your menu a name (e.g., “Main Menu”).
3. Select the pages, posts, or custom links you want to add to the menu.
4. Drag and drop the menu items to arrange them in the desired order.
5. Choose a location for your menu (e.g., “Primary Menu”).
6. Click Save Menu.

Enhancing Your Menu with Astra

Astra offers several built-in options to customize your navigation menu:

1. Header Layout: Go to Appearance > Customize > Header > Header Builder. From here, you can choose different header layouts, adjust the logo position, and add or remove elements like a search bar or social icons.

2. Menu Styling: In the Customizer, navigate to Appearance > Customize > Header > Primary Menu. You can change the menu’s colors, fonts, and spacing. Try different Google Fonts to give your menu a unique look. Here is a great article about best Google Fonts

3. Sticky Header: Astra Pro allows you to create a sticky header that remains visible as users scroll down the page. This can significantly improve navigation, especially on long pages. The guide about creating a sticky header with the free version of Astra should also be of interest.

4. Transparent Header: Astra Pro lets you create a transparent header that overlays the content below. This can create a modern and visually appealing effect, especially when combined with a hero image.

/* Example CSS for transparent header */
.ast-header-transparent .main-header-bar {
 background-color: transparent;
}

Creating Advanced Mega Menus with Elementor

For truly advanced navigation menus, Elementor Pro is your best friend. Here’s how to create mega menus:

1. Install and Activate Elementor Pro: Make sure you have Elementor Pro installed and activated.

2. Create a Template: Go to Templates > Add New and choose “Section” as the template type. Give your template a name (e.g., “Mega Menu – Services”).

3. Design Your Mega Menu: Use Elementor’s drag-and-drop interface to design your mega menu. You can add columns, headings, images, text, buttons, and even embedded videos. Think of it as a mini landing page within your navigation.

 

 
Services
 

 
Web Design
 
SEO Optimization
 
Content Marketing
 
 
 

 
 

4. Use the Header or Nav Menu Element: Drag the Header or Nav Menu Element to your header and enable Mega Menu Support.

5. Assign the Elementor Template: In the WordPress Menu settings choose the Elementor Template for the menu item to which you want the mega menu assigned to.

6. Customize the Menu Item: Adjust the width, position, and other settings to achieve the desired look and feel.

Mobile-Responsive Navigation

With more people accessing the web on mobile devices, it’s crucial to ensure your navigation menu is responsive. Both Astra and Elementor offer features to help:

• Astra’s Mobile Header: Astra allows you to customize the header specifically for mobile devices. You can choose a different logo, adjust the menu layout, and add a hamburger menu icon.

• Elementor’s Mobile Editing: Elementor lets you switch to mobile view and adjust the layout and styling of your mega menu. You can hide certain elements, change the font sizes, and optimize the spacing for smaller screens.

/* Example CSS for mobile-responsive menu */
@media (max-width: 768px) {
 .mega-menu {
 flex-direction: column;
 }
 .mega-menu .column {
 width: 100%;
 }
}

Best Practices for Navigation Menus

• Keep it simple: Don’t overload your menu with too many options. Aim for clarity and simplicity.
• Use clear labels: Use descriptive and straightforward labels for your menu items.
• Prioritize key pages: Highlight your most important pages in the main navigation.
• Consider user experience: Think about how users will interact with your menu and design it accordingly.
• Test on different devices: Ensure your menu looks and works well on desktops, tablets, and smartphones.

Info: By following these best practices you will have a great navigation for your visitors!

Examples of Inspiring Navigation Menus

To get your creative juices flowing, here are a few examples of websites with outstanding navigation menus:

• WebriQ AI: WebriQ AI uses a mega menu to showcase its various services and resources in an organized way.
• Neil Patel: Neil Patel uses a mega menu to guide users to different areas of his website, including his blog, tools, and consulting services.
• Awwwards: Awwwards uses a mega menu to display different categories of website designs.

Conclusion

Creating advanced navigation menus with Astra and Elementor is an excellent way to enhance your website’s usability and appeal. By following the steps outlined in this guide, you can design menus that are both functional and visually stunning. And remember, Start Making Websites is here to help you every step of the way! If you found this post useful, please share it with your friends and colleagues.