Chapter 9: Navigation & Menus

Navigation & Menus makes your site easy to explore. This is like building the roads and signposts for visitors: a good menu helps them find Services, Portfolio, Blog, or Contact quickly, improves SEO (Google loves clear structure), and boosts user experience (especially on mobile, huge in 2026).

In early 2026 (January 30, around 5:33 PM IST), WordPress handles menus in two main ways:

• Classic themes (e.g., older Astra without block mode): Appearance → Menus (traditional drag-and-drop).
• Block themes / Full Site Editing (FSE) (e.g., Astra with block mode, Blocksy, Kadence, Twenty Twenty-Five): Menus are built/edited using the Navigation block in the Site Editor—more visual, integrated with headers/footers.

We’ll cover both (most of you use hybrid or block themes now), with detailed steps, examples for your freelance web design site (webliance.in), and how to add mega menus (advanced dropdowns with columns/images).

Creating and Managing Menus

Access the menu editor:

• For classic/classic-hybrid themes: Dashboard → Appearance → Menus.
• For block/FSE themes: Appearance → Editor → Click header template part (or Navigation block) → Edit the Navigation block directly (or go to Navigation in sidebar for list view).

Step-by-step: Create your first menu (e.g., “Main Menu”):

1. Create the menu:
   • In classic: Menus → Enter name “Main Menu” → Create Menu.
   • In FSE: If no menu exists, add Navigation block (see below) → It auto-creates one.
2. Add items (left sidebar panels):
   • Pages → Check your pages (Home, About, Services, Portfolio, Blog, Contact) → Add to Menu.
   • Custom Links → For external (e.g., LinkedIn) or anchors: URL + Link Text → Add.
   • Categories → Add blog categories (e.g., “Web Design Tips”, “Hyderabad SEO”).
   • Posts → Rare, but add specific case studies.
3. Organize & structure (drag-and-drop):
   • Drag items to reorder.
   • Drag right under another → Creates submenu (dropdown). Example: Drag “SEO Services” under “Services” → Submenu item.
   • Drag further right → Deeper level (up to 3–4 usually).
4. Save & assign location:
   • Classic: Bottom → Menu Settings → Check “Primary Menu” (or Header) → Save Menu.
   • FSE: Changes auto-save (preview top-right). Assign via Site Editor header.

Example for your site:

• Menu name: Main Menu
• Top-level: Home | Services | Portfolio | Blog | Contact
• Under Services: Web Design | SEO Optimization | Website Maintenance | E-commerce Setup (submenus)
• Custom link: “Free Audit” → https://webliance.in/free-audit (opens new tab: edit item → Link Target → New Tab)

Screen Options & Help (classic Menus screen):

• Top-right Screen Options → Check: Link Target (new tab), Description, CSS Classes (for styling), Link Relationship (nofollow).
• Help tab → Explains each section.

Adding Menus to Header/Footer

In block/FSE themes (recommended 2026 way):

1. Appearance → Editor → Select Header template part (or homepage → click header).
2. Click existing Navigation block (or + → Search “Navigation”).
3. In block toolbar: Select menu from dropdown (your “Main Menu”).
4. Customize: Overlay (hamburger on mobile), justify (center/left), colors, typography.
5. For footer: Edit Footer template part → Add Navigation block → Choose secondary menu (e.g., “Footer Menu” with Privacy Policy, Terms).

In classic themes:

• Appearance → Menus → Manage Locations → Assign “Main Menu” to Primary/Header.
• Footer: Some themes have secondary location; or add widget (Appearance → Widgets → Footer).

Example: In Blocksy/Astra/Kadence (block mode):

• Edit header → Navigation block → Choose “Main Menu”.
• Style: Horizontal, no arrows, mobile: Off-canvas (slide-in).
• Add Site Logo block left, Search block right → Full header done.

Custom Links, Pages, Categories in Menus

• Custom Links: Add external (e.g., Behance portfolio) or #anchor for smooth scroll (e.g., #contact-section).
• Pages/Categories: Auto-linked, great for dynamic blogs (add category → /category/web-design-tips/).
• Advanced: Edit item → Add CSS class (e.g., “highlight-btn” for button style) → Style via theme customizer or CSS.

Example: Add “Get Started” as button:

• Custom Link: URL “#” (or contact page) → Link Text “Get Started”.
• Edit item → CSS Classes: “btn-primary” (theme styles it as button).

Mega Menus / Advanced Navigation (If Using Certain Themes)

Mega menus = wide dropdowns with columns, images, widgets (e.g., Services shows 4 columns: Design, SEO, E-commerce, Testimonials).

In 2026, native block themes don’t have built-in mega menus (use Navigation block with submenus), but top themes/plugins make it easy:

Best free/affordable ways:

1. Max Mega Menu (free plugin, 400k+ installs): Turns standard menus into mega.
   • Install/activate → Appearance → Menus → Enable for your menu → Edit item → Mega Menu tab → Choose layout (grid, columns) → Add widgets/images.
2. Theme-built (no extra plugin):
   • Astra Pro (~$47/year): Nav Menu module → Enable mega → Drag blocks in dropdown.
   • Kadence Pro (~$99/year): Ultimate Menu addon → Create hooked elements (block content) → Assign to menu item.
   • Blocksy Pro (~$69/year): Header Builder → Mega dropdowns with content blocks.
3. Other free plugins: QuadMenu, RT Mega Menu, ThemeHunk Mega Menu (drag-drop, icons, images).

Step-by-step example with Max Mega Menu (free):

1. Plugins → Add New → Search “Max Mega Menu” → Install/Activate.
2. Appearance → Menus → Select your Main Menu → Top-right → Max Mega Menu Settings → Enable.
3. Edit a top-level item (e.g., “Services”) → Click Mega Menu tab.
4. Choose Grid Layout (e.g., 4 columns) → Drag widgets (Recent Posts, Custom HTML for images, Text for descriptions).
5. Save → Hover “Services” on site → Wide dropdown with columns!

Pro tip for your site: Mega for “Services” → Columns: Web Design (image + desc), SEO (list), E-commerce (icon), Free Tools (links). Keeps menu clean while showing depth.

Common mistakes:

• Too many levels → Mobile breaks (limit 2–3).
• No mobile optimization → Test on phone.
• Forget to assign location → Menu invisible.
• Overload mega → Slows site (use images sparingly).

Homework:

1. Create “Main Menu” with 5–6 items + 1 submenu.
2. Add to header (Site Editor or Menus location).
3. Create “Footer Menu” (Privacy, Terms).
4. Try Max Mega Menu on a test item → See mega dropdown.
5. Check mobile view (resize browser or phone).

Questions? “My menu doesn’t show in header—why?” or “How to make button in menu?” Ready for