Pricing
Written by Editorial Team on August 2, 2020

How To Change Logo And Primary Menu In Astra Theme?

By now, you would probably know that we are kinda a huge fan of Divi — we have tons of Divi tutorials such as this one and this one. Today, we are going to be different by sharing more information and WordPress tutorials especially for Astra and Astra Pro. Why? Because there are some readers who asked for it!

We recently collaborated with ServerStack.io in offering professional WordPress hosting solutions and WordPress development. We did a full change for their website design and of course, they asked for Astra theme. We decided that since their hosting business model is all about simplicity and straightforward, there is absolutely no harm in having the same concept in their website design.

After working on their site for over 2 weeks, here's how it looks like right now.

ServerStack.io Malaysia Most Reliable Web Hosting Solution
~Introducing ServerStack.io - Malaysia Most Reliable Web Hosting Solution

Here's what you need to know. They love it the moment they put eyes on it ... and we did too!

We used Astra Pro (check it out here) and it was really easy to do WordPress theme development with it.

We decided to share this quick info was because during our development process, we stumbled upon several requests on how to change header logo and primary menu in Astra.

So, this tutorial is all about answering the question. Don't worry, it is really simple.

How to change header logo and primary menu in Astra WordPress theme?

What is Astra WordPress theme?
~What is Astra WordPress theme?

Astra is created by Braintree Force and it is by far one of the most popular WordPress themes in the market. As a matter of fact, Kinsta even put them on the top 10 fastest WordPress themes in the market today.

So if you are thinking of going for Astra or Astra Pro, the decision is a good one. Plus, there are running a limited-time offer for lifetime licenses which you should certainly check them out. Here's the link to the promotion page.

Without further delay, let's get into work.

How to change header logo in Astra theme?

Changing header logo in Astra theme is really simple. Here's how it is done in just a few clicks.

Step 1: Head to Astra option

Login to your WP-Admin and look for Astra Options on the left sidebar. Click on that and search for Upload Logo.

How to change header logo in Astra Pro
~How to change header logo in Astra Pro?

Step 2: Customizer in Astra Pro

A new page will pop up, bringing you to the WordPress customizer setting. Here, you can change the logo directly from the side panel (choosing Choose Logo).

Change logo in Astra Pro theme
~Change logo in Astra Pro theme using Customizer

A point to remember is to check if you are using a transparent header option. The image above is done on a transparent header module.

How to change or edit the primary menu in Astra Pro theme?

The second part to the question is changing the menu layout/design in Astra Pro. By default, you can change the menu appearance in Astra directly. However, there will be times where you are not able to do so.

In this case, you are facing this challenge because you are using an Astra child theme like we do.

Here's how you can change or edit the menu display in Astra Pro.

Step 1: Head over to WP-Admin and head to the Customizer option

Not sure? It's here WP-Admin » Appearance » Customize.

Step 2: Customize header option

The next step is this. Customize » Header » Primary Menu. You can also hover your mouse to the primary menu and an edit icon will pop up. Clicking on the edit icon will also enable the customization to work.

Here's how it looks like:

How to edit primary menu in Astra Pro
~How to edit primary menu in Astra Pro?

As you can see on the panel on the left, you can easily configure the design or layout of the primary menu.

Recap

Astra WordPress is an easy-to-use free and premium WordPress theme. We hope that you find this tutorial useful and if you need anything, feel free to reach out to us!

Article written by Editorial Team

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

crossmenu