☰ Menú de Navegació PRO+

📱 Disseny responsive del menú — justificació tècnica

El menú no és únicament funcional en escriptori: s’ha dissenyat perquè s’adapti correctament a tots els dispositius. El tema IT Security gestiona el comportament responsive del menú mitjançant CSS i JavaScript natius, i s’ha personalitzat amb CSS addicional per garantir el comportament correcte en cada breakpoint:

• ▶ Menú hamburguesa (≤768px): El CSS del tema aplica .main-navigation ul { display: none } per defecte en mòbil. Quan l’usuari fa clic al botó «Menu», WordPress afegeix la classe .toggled via JavaScript i el menú es despliega verticalment amb display: block.
• ▶ Submenú en mòbil: El submenú dels reptes passa de position: absolute (escriptori) a position: static (mòbil), quedant indentat visualment per indicar la jerarquia sense sobreposar contingut.
• ▶ flex-wrap en escriptori: La barra de navegació usa display: flex; flex-wrap: wrap perquè els ítems del menú passin a la línia següent si no hi caben, evitant desbordaments horitzontals en pantalles intermèdies.
• ▶ Àrea de pulsació accessible: Els ítems del menú en mòbil tenen padding: 12px 16px, garantint una àrea mínima de 44px recomanada per les directrius WCAG 2.1 per a interacció tàctil sense errors de pulsació.

El «Main Menu» s’ha configurat amb una jerarquia de 2 nivells que centralitza tots els reptes del portafolis TalentFP SMX 2026 sota la pàgina personal, mantenint les seccions secundàries al primer nivell per accés directe.

🗂️ Jerarquia completa — Main Menu

⚙️ Paràmetres de configuració

• 1
  Accés al gestor de menús

  Des del tauler d’administració de WordPress, s’accedeix a Aparença → Menús. El plugin UAE (Ultimate Addons for Elementor) amplia el submenú d’Aparença però l’opció Menús és accessible des del primer nivell.

• 2
  Creació del menú «Main Menu»

  Es crea un nou menú amb el nom Main Menu. Denominació clara, estàndard i compatible amb qualsevol tema WordPress. Un cop creat, WordPress li assigna un ID intern únic.

• 3
  Afegir pàgines al menú

  Al panell lateral esquerre, a Pàgines → Els més recents, s’han seleccionat totes les pàgines necessàries i s’ha usat el botó «Afegeix al menú». El Repte 1.5 s’ha afegit en el pas final.

• 4
  Establir la jerarquia per arrossegament

  WordPress permet reordenar i nidar els ítems arrossegant-los. Els reptes 1.1 a 1.5 s’han arrossegat cap a la dreta sota ARACELI SALDAÑA MARTINEZ, convertint-los en subelements del dropdown. El sistema indica l’estat amb l’etiqueta «subelement».

• 5
  Assignació: Primary Menu

  A la secció «Paràmetres del menú», s’ha activat la casella Primary Menu ✓. Això indica al tema IT Security que aquest menú ha d’aparèixer a la zona de navegació principal de la capçalera.

• 6
  Guardar i verificar

  S’ha fet clic a «Desa el menú». S’ha verificat el resultat al frontend visitant asaldana.inscastellbisbal.net: el menú apareix correctament a la capçalera amb el dropdown funcional dels 5 reptes.

Documentació visual de les quatre fases del procés: accés a l’administrador, selecció de pàgines, configuració de la jerarquia al backend, i verificació del resultat al frontend publicat.

📸 Evidència 1 — Tauler Aparença (administrador WordPress)

WordPress Admin · Aparença amb submenú Menús visible

[Captura 1] Tauler WordPress Admin → Aparença → Menús

Substitueix per la URL de la Mediateca de WordPress