How to add a top menu in the free Astra WordPress theme

Astra is one of my new favorite themes. Recently I needed to add a top menu (above the standard header menu) without using Astra Pro. I was able to write and add some code to show the menu pretty quickly. Learn how!

Before you do anything, make sure to create an Astra child theme using their child theme generator.

Add code to functions.php

Open the child theme’s functions.php file.

Add the code to 1) register a new menu and 2) show the menu above the main menu (using a hook – check out this great visual hooks guide).

Create the menu

Create the menu under Appearance, Menus and name it Top.

Under “Display Location” at the bottom, choose “Top Menu” (the one you just created) and save.

Create new menu in WordPress
Create a new menu named Top and choose the Top Menu Display location

Style the menu

At this point you should be able to see the menu, but it’s a vertical bulleted list. Let’s add some CSS. (I’ve had the most luck adding this in the Customizer.)

Easy peasy! Did it work for you? Let me know if you have any questions!

Adding a menu after the header

Updated October 2019

I got an email from DJ asking how to create and place a menu below the primary header. Using the Astra visual hooks guide, I’d need to use astra_header_after in place of astra_header_before.

Add code to functions.php

Just a note that if you’re using both the before AND after header menus, you’ll have to alter the code slightly because you can’t use the function register_additional_menus twice!

Create the menu

Bottom menu

Style the menu

Does your business generate enough new inquiries?

Download my free guide to learn how to generate new inquiries while you sleep using a lead generation system to automatically nurture and educate your prospects.