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.)

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

Mobile styling

I’ve received a few emails about styling for mobile. In this case, I normally hide the menu on mobile using display: none; because there is already a menu in place (and having two menus can be confusing).