Ocean

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!

Photo by Anastasia Taioglou on Unsplash.

Share

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.