📋 The menu (the list)
Which links exist, what they're called, and in what order. You build this at Appearance → Menus.
Help visitors find their way around your site!
You've built pages, a logo and contact buttons. Now let's connect everything with a proper navigation menu — pages, custom links, dropdowns, and finally placing it in your header.
What's inside 🧭
Tap any card to jump straight there.
🗺️ Stop 1
How WordPress menus actually work
A menu is just a saved list of links. WordPress keeps the list in one place, and your theme decides where to show it.
In Phase Two you made a basic "Main Menu." Now we'll go deeper. The key idea is that building a menu and placing a menu are two different jobs — and beginners often finish the first one and forget the second.
📍 The location (the spot)
Where that list appears: Primary Menu (top of site), Footer Menu, or Mobile Menu.
🧠 Think of it like...
The signboards inside a railway station. The board itself (your menu) lists "Platform 1, Platform 2, Exit." The location is where the station hangs it — above the entrance, or near the stairs. A board in a cupboard helps nobody.
📄 Stop 2
Adding existing pages to your menu
The easiest links to add are your own pages — Home, About, Services, Contact. WordPress already knows about them.
1
Open Appearance → Menus
Pick your menu from the dropdown at the top and click "Select." No menu yet? Click "create a new menu," name it, and save.
2
Find the Pages box
On the left, open the "Pages" panel. The "Most Recent" tab shows new pages; "View All" shows every page.
3
Tick the pages you want
Check the boxes next to Home, About, Services, Contact, or whatever you've built. Use "Select All" to grab everything at once.
4
Click "Add to Menu"
The pages jump into the right-hand column, ready to be arranged.
5
Rename if needed
Click the small arrow on any item to open it, and edit "Navigation Label." The page title stays the same — only the menu text changes.
6
Drag into order and Save
Move items up or down to set the order, then click "Save Menu."
🏷️
Short labels win. A page titled "Our Complete Range of Digital Marketing Services" should appear in the menu as just "Services." Phone screens have very little room.
👀
Can't see Posts, Categories or Tags? Click "Screen Options" at the top-right of the Menus screen and tick the boxes you need. You can also turn on "Link Target" and "CSS Classes" there — we'll use Link Target in the next stop.
🔗 Stop 3
Adding custom links
Not everything lives on a WordPress page. A custom link can point anywhere — another website, your WhatsApp, a phone number, or a spot further down the same page.
1
Open the Custom Links box
On the same Menus screen, find "Custom Links" in the left column.
2
Paste the URL
Type or paste the full address in the URL field. External sites must start with https://.
3
Write the link text
This is the word visitors will see in the menu, like "Instagram" or "Chat on WhatsApp."
4
Click "Add to Menu"
It appears at the bottom of your list. Drag it where you want it.
5
Choose how it opens
Open the item's arrow and tick "Open link in a new tab" for any link that leaves your site, so visitors don't lose you.
6
Save Menu
Click "Save Menu," then check the live site.
What can go in the URL box?
| You want to link to... | Type this in the URL |
|---|---|
| Another website | https://instagram.com/yourshop |
| WhatsApp chat (from Phase Three) | https://wa.me/919876543210 |
| Tap-to-call | tel:+919876543210 |
| Send an email | mailto:hello@yourshop.com |
| A section on your page | #contact (or https://yoursite.com/#contact) |
🧠 Think of it like...
Your own pages are rooms inside your house. A custom link is a door that opens onto the street — it can lead to a friend's house (another site), or just ring a phone (tel link). You decide where it goes.
⚓
Section links need a matching ID. For #contact to work, the Elementor section you want to jump to needs the CSS ID contact. Set it under Advanced → CSS ID, without the # sign.
🔌 Stop 5
Integrating the menu into your site
A saved menu does nothing until you give it a location. This is the step that makes it appear on your website.
A. Assign the menu location
1
Scroll to Menu Settings
At the bottom of the Menus screen, find "Display location."
2
Tick the location
Tick "Primary Menu" for your header. Astra may also offer Footer Menu and Mobile Menu — tick whichever you want this menu to appear in.
3
Save Menu
Click "Save Menu" and refresh your live site. Your menu should now sit in the header.
B. Fine-tune it in Astra's Header Builder
1
Open the Header Builder
Go to Appearance → Customize → Header Builder, the same place you built your header in Phase Two.
2
Check the Primary Menu element
Make sure "Primary Menu" is dragged into your header row, next to your logo. Click it to choose which menu it shows, and adjust colours, spacing and font size.
3
Add a call-to-action button
Drag a Button element to the far right and link it to your WhatsApp link from Phase Three, so contact is always one tap away.
4
Set up the mobile menu
Switch to the mobile view using the small phone icon at the bottom. Check that "Toggle Button" (the hamburger icon) and the menu appear. On phones, the whole menu folds behind that icon.
5
Publish
Click "Publish" at the top to make all the changes live.
C. Reuse it in your footer
In the Footer Builder, drag in a "Footer Menu" element. Create a short second menu (Home, Privacy, Contact), give it the Footer Menu location, and visitors can find key links even at the bottom of a long page.
🧠 Think of it like...
Writing a list is like printing a new bus-route chart. Integration is actually pasting it on the bus stop's wall. Until it's pasted up, nobody travelling by that stop can read it.
🌟
Looking ahead: Elementor Pro has a "Nav Menu" widget that lets you place a menu anywhere in a page, with its own styling. The free version doesn't include it, but Astra's Header Builder does everything you need for now.
✅ Stop 6
Test, fix & keep it tidy
Always click through your menu like a real visitor before you call it finished.
1
Open your site in a private window
This shows you what visitors see, not what you see while logged in.
2
Click every single item
Pages should open the right page, WhatsApp should open the chat, and phone or email links should launch the right app.
3
Hover the dropdowns
Check each sub menu opens, and every child link works.
4
Repeat on your phone
Tap the hamburger icon, then open every item once more.
Quick fixes
| Problem | Most likely fix |
|---|---|
| Menu doesn't appear at all | You didn't tick a Display location. Go to Appearance → Menus and tick "Primary Menu." |
| Changes aren't showing | You forgot to click "Save Menu," or your browser is showing an old copy. Save, then hard-refresh (Ctrl + Shift + R). |
| Dropdown doesn't open | The child items aren't indented under the parent. Drag them right until they say "sub item." |
| Section link does nothing | The CSS ID on the section doesn't match your #name. |
| A page is missing from the list | It may still be a draft. Publish the page first, then add it. |
🔁
Menus are easy to change. Added a new page next week? Just come back to Appearance → Menus, add it, and Save. Nothing else needs rebuilding.