How to set up header & footer for WordPress website with Astra Theme

How to set up header & footer with Astra theme for WordPress website - websitelearninglab tutorial for beginners

In this tutorial I will explain how to set up the header & footer with the free Astra theme for WordPress websites.

As indicated in an earlier tutorial, if you use the Elementor Pro plugin, you can also design the header and footer even more easily by using the Elementor Pro version. This will give you way more flexibility and options to design everything exactly as you want it to be.

But if you only have the free version of Elementor, you can use the Astra theme for that and you can see how it’s done in this tutorial.

Table of Contents

What are the header and footer of a website?

If you are completely new to web design, it’s good to know that the header refers to the top bar with often the logo and navigation menu.

The footer is the bottom part of the website and it often also contains the logo with contact details and possibly a couple of links to pages of the website.

Header Astra theme settings 

To get started, from the WordPress dashboard go to the left navigation menu and then click on Appearance and then choose the top option Themes.

We see that the Astra theme is activated and to adjust the settings click on Customize

1 - Menu WordPress Appearance - Themes - Customize

After the page has loaded you will see the default header design at the top of the page.

At the moment it is still very boring and it would look better if the logo was displayed instead of the title.

I’ll show you how to change some basic settings.

For example, to change the color of the bar, click on the pencil icon at the top left.

2 - Default Astra Theme set up

Then click on the Design tab and over at the Background option you can choose a color.

You can choose any color you want by using the color palette or by entering a color code in the field below. For this tutorial I’ll choose a white background color.

But if you want a different color you can set it up here.

3 - Set color for header section with astra

To remove the title, hover over the title and click on the pencil icon. Here you will see that the Display Site Title option is enabled and if you disable it, you will see that the title is no longer visible.

4 - Hide site title with Astra theme

On the left side of your screen you will also see the options Select Logo and Select site icon, so let’s do that right now.

In the previous tutorial I’ll showed you how to create a logo and site icon and we are now going to add them. If you missed that tutorial and don’t know how to easily create a logo and site icon, I would recommend you to check it out.

First you have to click on Select logo.

5 - Select logo option with Astra

After the page has loaded you need to click on the Upload files tab and drag and drop the logo image to upload it.

Now select the logo and you can fill in the Alt. Enter text, Title, Caption and Description and make sure some keywords are in there for which you want the site to be found on in search engines.

In this example I enter Luxury watch brands logo black. Now copy and paste this text in the other fields. After that click on Select to proceed.

6 - Upload and select logo with Astra

Now you can select which part of the logo should be visible by dragging your mouse. After you are done you can click on Crop image.

7 - Crop Image

By defeault the logo is still too big for the header and we need to reduce the size. Therefore go to Logo Width on the left and here you can set the size. Just see for yourself what you like and I will now set the logo width to 130 PX.

8 - Set logo width

By the way, it is always the case that the logo links to the homepage of a website, so you don’t have to set that yourself anymore.

The next step is to ensure that the logo is also properly displayed on tablet and mobile devices.

To do this you can click on the middle icon at the very bottom for the tablet view.

Here you can see that the logo is still too big for this view and you can reduce it again with the Logo Width option. The settings you are doing now are only for tablet devices so it doesn’t affect the settings for desktop.

A minor disadvantage of the Astra theme is that you cannot see how the design looks like on all tablet sizes.  

On most screens it just looks good so it’s nothing to worry about. But with Elementor Pro you can really easily check all the different formats in literally a few seconds.

To continue I set the Logo Width for tablet to 120 PX.

9 set logo width for tablet

You can switch to the mobile view by clicking on the mobile icon at the bottom. For mobile you can set the size at the Logo Width option.
90 PX seems fine to me, and now click on Publish to save the settings.

10 set logo width for mobile

By clicking the pencil icon again when you hover over the logo, you can also add the site icon or favicon with the Select site icon option.

11 set site icon with astra theme

Go to the Upload files tab and drag the file to upload it. Change the Title to something relevant such as Luxury Watch Brands site icon and copy this text again in the other fields. Then click on Select.

12 Site icon settings after upload to wordpress

We see that the icon has now been added to the top of the browser. Now click the blue Publish button to save the changes.

13 Site icon visible save settings

The last step to finish the header is to set up the navigation menu.

At the moment only the About us, Contact and Home pages are shown because this is set by default. To adjust this you can go back to the WordPress dashboard and you can do that by clicking on the crossmark.

14 Navigation menu in header by default astra theme

Go to the Menus option which you can find below Appearance. Here you can see that no menu has been created yet, so that’s what i’m going to do now. 

Enter a name and it does not matter which name you choose because visitors of the site can’t see this. 

I fill in Menu 1 and then select the option Primary Menu and after that I click on Create Menu.

15 Set up menu in wordpress

Every time you add a new page or blog to the site you can add it to the menu by checking it and then clicking on Add to Menu.

In this example I only want the About us and Contact pages to be shown so I add them by clicking the Add to Menu button.

You can also choose a category and add it in the same way.

Now I save the menu by clicking on the Save Menu button.

16 Add pages to navigation menu

Go back again to the Themes settings via Appearance and then click on Customize for the Astra Theme.

17 Astra theme settings Customize

Now you see that the links have been changed and are displayed exactly as we have set.

To change the settings, click on the pencil icon in the navigation menu.

18 Customized navigation menu astra theme

Now click on the Design tab and at the Menu Color option you can set the colors.

I change the first color to black. And here we also have a few options, the first one is Normal.

The second is Hover and that is the color you see when you move the mouse over the text. Here I adjust it to light gray and I copy the color code and I also set it for the third dot.

That is the Active color and if you are on the About us page, for example, it will be continuously gray because it is active.

With the Menu Font option you can select a different font, but I think it’s fine as it is now with Inherit as it is set by default. 

19 Set color for navigation menu with Astra theme

You can then view how it looks on tablet again by clicking on the tablet icon at the very bottom.

Now you see that the option Toggle Button is also shown below the option General.

20 Set toggle button with astra theme

Click on it and at Icon Size you can adjust the size if necessary. I’ll just leave it as it is but if you want you can also change the style. Therefore you need to go to the Toggle Button Style option.

To set the color you can click on the Design tab and here I also set the icon color to black.

21 Change color toggle button with astra theme

Now click on the toggle button to expand the menu and click on the blue pencil icon.

22 Customize dropdown menu in Astra theme

Go to the Design tab and adjust the Link color to black. 

23 Change color toggle button in astra

To choose the correct menu, you can click on Configure Menu from Here in the General tab. 

24 Configure Menu from here Astra theme

Now go to the Off-Canvas Menu option and select the menu you created earlier in the WordPress dashboard. In this case it’s Menu 1

The correct menu is now being displayed.

Also make sure to view how the display is on mobile devices. If everything is to your liking save the settings by clicking on Publish again.

25 Set Off-Canvas Menu in Astra theme

Footer Astra theme settings

So now the header is done and now it’s time to customize the footer.

You can change the text in the footer by clicking on the pencil icon and entering a new text in the text field. 

For example, you can remove the part Powered by Astra WordPress Theme.

With alignment you can align the text to the left, right or the center if you wish.

26 Customize footer text in astra

To adjust the color of the text you can click on the Design tab and then choose a different color at the Text Color options.

27 Footer text color option

To change the background color of the bar, you can again click on the pencil icon on the left side of the bar.

28 Customize Astra theme pencil icon

Then click on the Design tab and adjust the color at the Background options. For this example I will make the background black.

29 Set background color footer astra theme

You can add the logo as an image next to the text by adding an extra column to the section. To do this, go to the General tab and select how many columns you want display in the footer. For this example I select 2  columns.

You can also select how the ratio of the columns should be at the Layout settings.

30 Set columns for footer

To add the logo you can now click on the + sign in the column and then choose the option Widget 1.

31 Set widget for footer

Now click on Widget 1 in the column and now you can add a widget on the left. Click on Add a Widget to see an overview of all the different widgets. Over here I select the Image widget.

32 select Image widget for footer

After the widget has been added you can click on Add image to select an image.

33 Add new Image widget for footer

In this case the logo in white color with a transparent background.

Change the title to something that is relevant for SEO such as Luxury watch brands logo white.

Copy this text and paste it into the other fields as well and then click the blue Add to Widget button.

34 Select new Image for footer

Now we see that the logo is visible. It’s still very large, so we are going to make it a little smaller. You can change this by clicking Edit image. 

35 Change image size

After that you can select the Thumbnail option and then click Update.

36 Thumbnail size image

I also set the allignment for the logo to the right at the Allignment options.

37 Image allignment right

In the footer I want to move the text a little bit more to the middle so that it fits better with the logo.

Click on the text and select the Design tab. Now go over to the Margin settings and enter 35 PX in the top field.

You can also enter a higher or lower value to change the position. 

38 Margin settings

Now go to the tablet view and there we see that the position is now also fine.

Over at the mobile view I fill in 10 at the top and also at the bottom Margin.

39 Margin settings text mobile

You could also add an extra column and add an extra widget such as a navigation menu. This way you can completely build the footer per widget in different layers and columns. For now I’ll just leave it clean and basic as it is.

In the General tab you can align the text to the left with the Alignment option, but I will also leave that as it is for this example.

I always use the Astra theme as a backup theme, that’s why I kept this header and footer very basic.

Now we are done with setting the header and footer in the Astra theme!

You can watch the video tutorial on YouTube over here.

Don’t forget to like and subscribe to the YouTube channel. I would appreciate that very much!

In the next tutorial I’ll show you the Elementor basics for beginners for those who aren’t familiar with Elementor yet.

The tutorial after will explain how to set up the header and footer with Elementor.

Check out this tutorial if you want to learn how to create a sticky header scroll effect with Elementor.

In other tutorials I have explained how to use Elementor to design: